Published on


Published in: Education, Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. WORDPRESS VS CSS WordPress Themes use a combination of template files, template tags, and CSS style sheets to generate your WordPress site's look. Template Files Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. Template Tags Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. CSS Style Sheets On every template file within your site, there are XHTML tags and CSS references wrapped around your template tags and content. The instructions for styling are found in the style.css file within each Theme folder.
  2. 2. To allow for flexibility, WordPress adds a number of CSS classes on elements across the site to make it easier to customize. Probably the most important set of these classes is for post images. A good WordPress theme has classes for left, center, and right alignment as well as styling for captions. It’s really easy to add these styles to your theme. Standard Alignment .alignleft { float:left; } .alignright { float:right; } .aligncenter { display:block; margin:0px auto; } That’s it! Now why do we need these classes, you ask? This trio of classes is WordPress’s default way of aligning images in a post. When a user uploads a new image through the post editor, they can choose to align it to the left, center, right, or just have no alignment (uses the class .alignnone). In order to transfer that display option to the theme, you need to have those classes ready to go on the front-end of the site. The left, center, and right alignment classes aren’t just used on images, though. You can use them throughout your site to position other elements like divs, links, etc. Image Captions If the user decides to add a caption to the image, a div with a class of .wp-caption is wrapped around the image and its caption text, which is stored in a standard paragraph tag (<p>). Below is an example of how to style the caption box, which will have a light grey background and border and a small amount of padding. .wp-caption { border:1px solid #ccc; background:#eee; padding:5px; } If you want to style the caption text, that paragraph tag has a class of .wp-caption-text: .wp-caption .wp-caption-text { text-align:center; margin-top:5px; } As for post images, that’s about it! Next, let’s take a look at some of the other standard classes you’ll find throughout a WordPress site. Menus In order to create a good navigation menu, it’s important to know your menu classes.
  3. 3. Fortunately, WordPress provides plenty of classes within its dynamic menus to allow for an adequate amount of customization. As you can see in the diagram above, every list item that WordPress generates has at least one class. The entire thing is an unordered list, each upper level link and subpage link is a <li> list item, and the subpage menus are contained in unordered lists as well. It’s actually quite easy to understand. The active page will always have the .current_page_item class. Categories: The setup of category lists is quite similar to pages. Each category list item has a class of .cat-item, the active category has .current-cat-item, and when viewing a subcategory, the parent has a class of .current-cat-parent. Notice the hyphens instead of the underscores. I can’t tell you why it’s like that but maybe we’ll see a uniformity in classes in the near future. Widgets: the classes involved with a widget can be customized but the typical setup is that the widget is enclosed in <div class="widget">. WORDPRESS AND PHP The Loop Basically, Loop’s what displays the content we see on homepage, single posts, pages, archives,
  4. 4. search results, and more. If a user accesses homepage, archives, or search results – by default, the Loop will display a certain number of posts as defined in Reading Options. Basic flow of the loop Let’s break the Loop down into 3 parts. <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> 1. What you want displayed in the Loop <?php endwhile;?> 2. What is displayed when the Loop is over <?php else : ?> 3. If there’s nothing to display <?php endif; ?> If there are posts available in the query, it will start displaying them in a while loop, what is defined in part 1. When the while is over, it will display what is in part 2. If there’s no posts found, or there’s some sort of other 404 error, part 3 gets displayed. Template Tags used within the Loop Unless you want 1. What you want displayed in the Loop repeated on your WordPress blog’s homepage 10 times, you should probably learn some of the basic template tags. Let’s take a look at the code of index.php in the default WordPress template.
  5. 5. There’s quite a few template tags within the Loop that will output things such as the post title, the permalink, the content, etc. I’ll break down each of the template tags in the WordPress default theme. • <?php the_permalink() ?> – This will echo the permalink of the post, i.e http://www.themelab.com/?p=1 • <?php the_title(); ?> – This echos the post title, i.e. Hello World! • <?php the_time(’F jS, Y’) ?> – This will echo the date, i.e. April 4th, 2008. A full list of ways to format the date can be found on php.net • <?php the_author() ?> – This will display the author’s name, i.e. Leland. This is commented out in the default theme. • <?php the_tags(’Tags: ‘, ‘, ‘, ‘<br />’); ?> – This will display the tags assigned to the post, separated by commas, and followed by a line break • <?php the_category(’, ‘) ?> – This will display the categories in a similar fashion as the tags above. • <?php edit_post_link(’Edit’, ”, ‘ | ‘); ?> – The edit post link will be visible only to those with permission. • <?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?> – Will display the link to the comments. This will not be displayed on single posts or pages. There are a lot more listed on the Template Tags page over at WordPress.org. Some of these may work in the Loop, while some may not. After the Loop Let’s take a look at the code after the loop stops looping in the default theme.
  6. 6. <div class="navigation"> <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div> <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div> </div> As you might have guessed, this will display the pagination you see on the homepage, archives, and search results. These won’t be displayed on single posts and pages. Of course you could replace this with something like PageNavi, but that’s up to you. If there are no posts to display (possibly due to a 404 error), the following will be displayed after the else <h2 class="center">Not Found</h2> <p class="center">Sorry, but you are looking for something that isn't here.</p> <?php include (TEMPLATEPATH . "/searchform.php"); ?> That will display the Not Found message along with the search form. In this case there would have to be a search form code located in a file called searchform.php in the template directory, which there is in the default theme.
  7. 7. Grab Category Name This PHP snippet will get the category of the current post and place it in line where the code is inserted. It would be useful to add a heading or phrase that relates to the category. <? $cat = get_the_category(); $cat = $cat[0]; echo $cat->cat_name;?> PHP Snippets for Header <?php bloginfo('name'); ?> Title of the site <?php wp_title(); ?> Title of the specific post or page <?php bloginfo('stylesheet_url'); ?> The style.css file's location <?php bloginfo('pingback_url'); ?> Pingback URL for the site <?php bloginfo('template_url'); ?> Location for the site’s theme files <?php bloginfo('version'); ?> WordPress version for the site <?php bloginfo('atom_url'); ?> Atom URL for the site <?php bloginfo('rss2_url'); ?> RSS2 URL for the site <?php bloginfo('url'); ?> Exact URL for the site <?php bloginfo('name'); ?> Name of the site <?php bloginfo('html_type'); ?> HTML version of the site
  8. 8. <?php bloginfo('charset'); ?> Charset parameter of the site PHP Snippets for Templates <?php the_content(); ?> Content of the posts <?php if(have_posts()) : ?> Checks if there are posts <?php while(have_posts()) : the_post(); ?> Shows posts if posts are available <?php endwhile; ?> Closes the 'while' PHP function <?php endif; ?> Closes the 'if' PHP function <?php get_header(); ?> Header.php file's content <?php get_sidebar(); ?> Sidebar.php file's content <?php get_footer(); ?> Footer.php file's content <?php the_time('m-d-y') ?> The date in '08-18-07' format <?php comments_popup_link(); ?> Link for the comments on the post <?php the_title(); ?> Title of a specific post or page <?php the_permalink() ?> Url of a specific post or page <?php the_category(', ') ?> Category of a specific post or page <?php the_author(); ?> Author of a specific post or page
  9. 9. <?php the_ID(); ?> ID of a specific post or page <?php edit_post_link(); ?> Link to edit a specific post or page <?php get_links_list(); ?> Links from the blogroll <?php comments_template(); ?> Comment.php file’s content <?php wp_list_pages(); ?> List of pages of the <?php wp_list_cats(); ?> List of categories for the site <?php next_post_link(' %link ') ?> Url to the next post <?php previous_post_link('%link') ?> Url to the previous post <?php get_calendar(); ?> The built-in calendar <?php wp_get_archives() ?> List of archives for the site <?php posts_nav_link(); ?> Next and previous post link <?php bloginfo(’description’); ?> Site’s description Content Only For The Home Page <?php if ( is_home() ) { include ('example.php'); } ?> This snippet will include the file specified, only if the user is on the home page of the site.
  10. 10. Place this code in the index.php file. Styling Different Categories <?php if ( is_category('15') ) { <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/cat-15.css" type="text/css" media="screen" />; <?php } else { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <?php } ?> This snippet assigns a specific stylesheet (category-15.css) to category 15 and will assign the rest of the site the default stylesheet (style.css). Place this code in the <head> area. Unique Images For Different Categories <?php if (is_category('7') ): <img src='<?php bloginfo('template_url'); ?>/images/cat7.jpg' alt='' /> <?php } elseif (is_category('8') ):
  11. 11. <img src='<?php bloginfo('template_url'); ?>/images/cat8.jpg' alt='' /> <?php endif; ?> This snippet assigns an image (cat7.jpg) next to each post title in category 7 and an image (cat8.jpg) next to each post title in category 8. Place this code in the category.php file. Styling Individual Posts <div id="post-<?php the_ID(); ?>"> This snippet will assign the post ID to the DIV. For example, if the ID for the post is 8, that line will echo as <div id=”post-8”></div>. Now you can style that individual post in the CSS as #post-8. Place this code within the loop. Previous & Next Posts Links <?php next_posts_link('Next Entries &raquo;') ?> <?php previous_post_link('&laquo; Older Entries'); ?> The first snippet will echo “Next Entries »” with a link to the next set of posts. The second snippet will echo “« Previous Entries” with a link to the previous set of posts. Place this code outside the loop.
  12. 12. Site Page Links <ul> <li<?php if(is_home()) { ?> class="current_page_item"<?php } ?>><a href=" <?php bloginfo('home'); ?>">home</a></li> <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?> </ul> This snippet will first echo the text “home” with a link to the home page. Next, it will echo the WordPress pages links in a list, in order defined by your settings, excluding the child pages, and excluding a title header for the list. If one of the pages in the list is active, the link for that page will be assigned the class “current_page_item”, which can now be styled in your CSS. Place this code in the template files. Dynamic Page Titles <?php if (is_home()) { echo bloginfo('name'); } elseif (is_404()) { echo ' 404'; } elseif (is_search()) { echo ' Search Results'; } else { echo 'WPCandy » '; wp_title(''); } ?>
  13. 13. If the home page is active, the title will display the name of the site. If the 404 page is active, the title will echo ‘ 404’. If the Search Results page is active, the title will echo ‘ Search Results’. If any other page on the site is active, the title will display ‘WPCandy » [page name]’. Place this code in the <head> area. Query Posts <?php query_posts('cat=2&showposts=5'); ?> This snippet will display the 5 latest posts from only category 2. Place this code right before the loop. Unique Templates For Categories <?php $post = $wp_query- >post; if ( in_category('3') ) { include(TEMPLATEPATH . '/cat3.php’); } elseif ( in_category('4') ) { include(TEMPLATEPATH . '/cat4.php'); } else { include(TEMPLATEPATH . '/cat.php'); }?> This snippet will assign a unique template to certain categories. In this case, ‘cat3.php’ will be assigned to ‘Category 3’, ‘cat4.php’
  14. 14. will be assigned to Category 4’, and the rest of the categories will be assigned ‘cat.php’. Place this code at the top of category.php. Tag Cloud <?php wp_tag_cloud('smallest=1&largest=9&'); ?> This snippet will create a tag cloud, in alphabetical order, with the smallest text at 1 pt and the largest text at 9 pts. Using Javascript  Javascript will work within WordPress. If used within the template files, most Javascript will work fine. Using them within a post is another matter, though.  Once you enter the world of PHP, it is really hard to go back to using Javascript, but they still serve their purpose.  If you can replace a Javascript with PHP code, tags, or script in WordPress, do so. Your life will be much easier. If not, here are a few tips to make your Javascript work in WordPress. Javascript in Template Files To use Javascript repeatedly within your site, you can either set the call for the Javascript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using Javascript in any HTML page. To "load" the Javascript file into your site, in the head, add something like this: <script type="text/javascript" src="/scripts/emailpage.js"></script> If your custom Javascript isn't working after including the previous line of code in your header.php template file, use the following line of code. <script type="text/javascript" src="<?php bloginfo('template_url');? >/pathto/yourscript.js"></script> Include the leading forward slash "/" even if your file is located in the root of your theme.
  15. 15. Be sure that you define the type correctly, as your site will not validate without it. In the spot where you wish to use the Javascript, set the call for the Javascript. For example, you are using a Javascript that sets a link for users to "email this page" to a friend and you want it to be under the post title. It might look like this: <h3 class="storytitle"> <a href="<?php the_permalink()?>" rel="bookmark"> <?php the_title();?></a> </h3> <div class="emailpage"> <script type="text/javascript"><!--//--><![CDATA[//><!-- emailpage(); //--><!]]></script></div> Function Reference/wp enqueue script A safe way of adding javascripts to a WordPress generated page. <?php wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); ?> $handle (string) (required) Name of the script. Lowercase string. Default: None $src (string) (optional) URL to the script. Example: "http://example.com/wp-includes/js/scriptaculous/ scriptaculous.js". This parameter is only required when WordPress does not already know about this script. Default: None $deps (array) (optional) Array of handles of any script that this script depends on; scripts that must be loaded before this script. false if there are no dependencies. This parameter is only required when WordPress does not already know about this script. Default: array() $ver
  16. 16. (string) (optional) String specifying the script version number, if it has one. Defaults to false. This parameter is used to ensure that the correct version is sent to the client regardless of caching, and so should be included if a version number is available and makes sense for the script. Default: false $in_footer (boolean) (optional) Normally scripts are placed in the <head> section. If this parameter is true the script is placed at the bottom of the <body>. This requires the theme to have the wp_footer() hook in the appropriate place. (New in WordPress 2.8) Default: false Javascript in Posts To use Javascript inside of posts in WordPress, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would be unnecessary. For the occasional or one time use of Javascript, you need to put the script into a Javascript file and then call it out from within the post. Make sure that each script is defined by its function name such as: function updatepage(){var m="Page updated "+document.lastMo.......} To include a Javascript inside a post, you need to combine both the call to the script file with the call to the Javascript itself. <script type="text/javascript" src="/scripts/updatepage.js"></script> <script type="text/javascript"> <!-- updatepage(); //--></script> If the src attribute of your javascript tag is being stripped out you need to turn off the rich editor (from the dashboard go to Users > Personal Options). If you are using the rich editor the javascript tag's src attribute may be stripped out even when manually editing in the HTML popup window.
  17. 17. Creating a Multiple Script File You might have a collection of scripts that you call from time to time, like a scripts which calculate time zones or distance, or maybe scripts that create some effect or accent on your page. For recurring Javascripts, consider grouping them together into one file. For this example, name the group Javascripts file scriptfile.js (choose whatever you want) and say it contains the updatepage, emailpage, and caltimezone scripts. As you copy each Javascript into the file, make sure it has a unique function name such as with this condensed version: function updatepage() {var m="Page updated "+document.lastMo.......} function emailpage() {mail_str = "mailto:?subject=....} function caltimezone() {var timerID; function tzone(tz, os, ds, cl) {this.ct =......} Place the script file of all the Javascripts in the head of the header.php template file between the meta tags and the style sheet link. It will just sit there, loaded into the browser's memory, waiting for one of the scripts inside to be called. <script type="text/javascript" src="/scripts/scriptfile.js"></script> In the spot in your post where you would like to use the Javascript, call it as follows: <script type="text/javascript"> <!-- updatepage(); //--></script>