Most articles on Wordpress themes focus on building a WordPress theme from the view point of a developer. This series of articles will instead be focused on breaking down an existing free WordPress theme and will pay particular attention to the design of the theme throughout the series. After breaking down everything, this series will focus on adding more features and improving the design of the WordPress theme. For example, topics that will be covered are creating and integrating a variety of plugins, scripts, and redesigning parts of the theme to make it even better.
The free WordPress theme that we will be disassembling is Designredux WordPress theme
I will be going over the header.php, sidebar.php, footer.php, and index.php files in this part and will cover the rest in the second part of this article.
Header.php
The header contains exactly what you think, everything on top. Basically this includes general information about the document type, the title, links to external scripts, and the navigations located in the top part of the WordPress Theme.
1. General information about the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="; charset=<?php bloginfo('charset'); ?>" />
This tells the browser what type of page it is and how to render it. It is very unlikely that you will ever have to change it.
2. Title
<title>
<?php wp_title();
if (function_exists('is_tag') and is_tag()) { ?>Tag Archive for <?php echo $tag; }
if (is_archive()) { ?> archive<?php }
elseif (is_search()) { ?> Search for <?php echo $s; }
if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?>
<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
</title>
The title part is slightly a little more complicated here than usual. What it does is it checks to see what the current page it has been loaded on is. Based on what the page it is, it will display different titles. But it will always include the blog’s name and description that is set in the settings of WordPress.
3. External scripts
<link rel="stylesheet" href="<?php bloginfo('template_url');?>/css/reset.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
The first external script called is the reset.css, which does exactly what it says and resets all the elements of the html to a base level in order to take care of the inconsistencies between how browsers render CSS/XHTML. For more information on reset.css, check out Meyerweb.
The second external script called is style.css, which is what your main css stylesheet needs to be named or else WordPress will get pissed. The url of which has its own special php call as you can see.
The following code is used to get the url of where your theme is located so you can link to the scripts, css, and other files you have in your theme.
<?php bloginfo('template_url');?>
For more cool stuff you can grab from the bloginfo() function, check out the Wordpress codex on bloginfo.
4. Internet explorer love
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php bloginfo('template_url');?>/css/iefix.css" type="text/css" />
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/unitpngfix.js"></script>
<![endif]--><!--[if lte IE 7]>
<STYLE TYPE="text/css">
* html #subscribe ul#subscribe_buttons, #subscribe_buttons li {height: 1%; margin-bottom: -30px; padding-bottom: -30px;}
</STYLE>
<![endif]-->
This part of the header is where we show some love for internet explorer by paying closer attention to all of its beautiful little quirks. If the page detects that the browser is internet explorer 6 or less, then it will call a iefix.css to fix some css issues and unitpngfix.js to fix the issue with transparent png.
The logo uses a transparent png so that it displays nicely over the gradient background in the header. Without the fix, it looks terrible. The fix is provided by the awesome guys at Unit Interactive Labs.
The second if clause just adds a small css tweak for internet explorer 7 so that it looks just as pretty as it would in other browsers. For more information on css fixes for browser inconsistencies, check out Position is Everything.
5. Wordpress plugin
<?php wp_head(); ?>
This allows plugins that need to output data into the <head> tags to be able to do so. So don’t delete it.
6. Category Navigation
<ul id="cat_nav">
<?php wp_list_categories('hide_empty=0&title_li=&depth=1'); ?>
</ul>
The wp_list_categories() function with the parameters of ‘hide_empty=0&title_li=&depth=1′ provides a list of all the categories (first-level only), shows even empty categories, and doesn’t output a title. To see what else you can do with wp_list_categories(), check out the Wordpress Codex on wp_list_categories.
7. Logo
<h1 id="logo"><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
The get_settings(’home’) function provides the link to the index of the blog and bloginfo(’name’) grabs the name of the blog. While the text gets indented off to the side anyways, it is important to have it there for SEO.
8. Page Navigation
<ul id="page_nav">
<li class="<?php if ( is_home()
or is_archive() or is_single() or is_paged() or is_search()
or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php }
else { ?>page_item<?php }?>">
<a href="<?php echo get_settings('home'); ?>"><?php _e('Home'); ?></a>
</li>
<?php wp_list_pages('sort_column=id&depth=1&title_li=');?>
</ul>
The if clause inside of <li> tags changes the class depending on what type of page you are currently on. The current page gets assigned a class of “current_page_item” for styling purposes. The wp_list_pages() function follows the same convention and will also assign the class name of “current_page_item” if it is the current page.
The wp_list_pages() function with the parameter of ’sort_column=id&depth=1&title_li=’ displays in a list all pages (first-level only), sorted by id, and doesn’t output a title.
Sidebar.php
The sidebar contains several other methods of navigating the blog. It contains the search form, list of popular articles, and buttons for subscribing to your feed either by RSS or Email.
1. Subscribe buttons
<ul id="subscribe">
<li class="sidebar_header">Subscribe to the feed</li>
<li class="sidebar_subscribe">
<ul id="subscribe_buttons">
<li>
<a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe to Feed by RSS"><span class="rss_icon">Subscribe by <span>RSS</span></span></a>
</li>
<!-- Subscribe by email, to activate include the link and delete these comments
<li>
<a href="" title="Subscribe to Feed by RSS"><span class="rss_icon">Subscribe by <span>EMAIL</span></span></a>
</li>
-->
</ul>
<div class="clear"></div>
</li>
</ul>
The bloginfo(’rss2_url’) function provides the link to the rss2 feed.
The second part is commented out with <!– commented out stuff –> because you will need a plugin to be able to allow readers to subscribe by email or a link to a feedburner’s email page. There is no point in showing it unless you want to use it. Just delete the comments and put the link in to activate it.
2. Popular posts
<ul id="popular">
<li class="sidebar_header">Popular posts</li>
<?php
query_posts('category_name=Popular&showposts=5');
while (have_posts()) :
the_post();
?> <li><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php
endwhile;
?>
</ul>
The function query_posts() with the parameter of ‘category_name=Popular&showposts=5′ shows the latest 5 posts from the category ‘Popular’. The while() function loops through the results until there are no more posts and displays the link and title of each post.
For more detailed information on query_posts() function and other cool things you can do with it, check out Vandelay’s article on Category Hacks for Wordpress Theme Designers and the trusty Wordpress Codex.
3. Search form
<ul id="search"> <li class="sidebar_header">Search</li> <li> <form id="search_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get"> <input type="text" name="s" id="search" class="text" value="<?php echo wp_specialchars($s, 1); ?>" size="22" tabindex="2" /> <input name="submit" type="submit" id="submit" class="button" tabindex="5" value="Search" /> </form> </li> </ul>
This is the basic search form. When someone submits a search, WordPress detects that action and displays the results according to search.php. If no search.php exists it will use index.php to display it. The wp_specialchars() function just strips out all the special characters before submitting the search query.
Footer
The footer in this theme displays the latest 5 posts and a little about section as well as some additional copy at the end.
1. Recent Posts
<ul id="footer_recent">
<li class="footer_header">Recent posts</li>
<?php $myposts = get_posts('numberposts=5'); foreach($myposts as $post) : setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>">
<span class="footer_date"><?php the_time('F j, Y'); ?></span> <div class="footer_headline">
<h6><?php the_title(); ?></h6>
<span class="footer_comments_number"><?php comments_number('0', '1', '%'); ?></span>
<div class="clear"></div>
</div>
</a>
</li>
<?php endforeach; ?>
</ul>
The get_posts() function with the parameter of ‘numberposts=5′ returns the latest 5 posts. It then loops through a foreach loop and for each post it calls another function setup_postdata(), which gives us access to more than the title and link of the post. In this case, we need the comments number as well.
The comments_number() function displays the number of comments for that particular post. The first parameter decides what to display when there are no comments. The second parameter decides what to display when there is only one comment. The third parameter decides what to display when there are more than one comment.
The other functions are basic template tags used to grab the date and title of the post, which you can find more about at Wordpress Codex on template tags. For more information on get_posts() function, check out the Wordpress Codex on get_posts().
2. About section
<ul id="footer_about"> <li class="footer_header">About</li> <li class="footer_about_text"> <!-- Open about_text.txt in the theme folder to edit this text --> <?php include (TEMPLATEPATH . '/about_text.txt'); ?> </li> </ul>
The include() function grabs the file passed to the function and displays everything that is in there. The TEMPLATEPATH is just the path to where your theme is located. In order to change what is displayed, just open about_text.txt and edit it as you please.
3. Copy information
<ul id="footer_copy">
<li class="left">
© <?php echo date('Y')?> <a href="<?php bloginfo('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
</li>
<li class="right">
<a href="http://www.blogdesignblog.com" title="WordPress theme: designredux"><?php _e('Designredux theme developed by blogdesignblog.com'); ?></a>
</li>
</ul>
The date() function with the parameter of ‘Y’ just grabs the current year formatted as XXXX. The function _e() is for translating the text into different localization, if one doesn’t exist, it just displays what is inside the single quotes.
For more information about what you can grab from date() check out the php.net documentation on date(). If you are interested in the _e() function and other translation tools check out the Wordpress Codex on translating.
Index.php
Index.php is the basic way of displaying a page, it is used when there are no other better page templates to use. It also serves as the home page.
1. Header
<?php get_header(); ?>
Grabs the header.php file and spits it out there.
2. The Wordpress Loop
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post();?>
Well that is just the beginning of the loop. The if clause checks if there are any posts, if there are then it will loop through them and display them according to how it is arranged inside the loop.
If there are no posts then it will just go to the following code:
<?php else : ?> <h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php endif;?>
At this point, it just displays what is after the <?php else: ?> and before the <?php endif;?> when there are no posts. You can put anything you want in there to let the reader know there are no posts.
3. Inside the Wordpress Loop
<div class="post"> <div class="post_header">
<span class="post_date"><?php the_time('F j, Y'); ?></span>
<div class="post_headline">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<span class="post_comments_number"><?php comments_popup_link('0', '1', '%'); ?></span>
<div class="clear"></div>
</div>
<div class="post_byline">
Posted by <span class="post_author"><?php the_author_link()?></span> in <?php the_category(', '); ?>
</div>
</div>
<?php the_content('<span class="post_read_more">Read more</span>'); ?>
<div class="clear"></div>
</div>
The the_time() function with the parameter of ‘F j, Y’ grabs the date of the post and formats it to display the full textual representation of the month, followed by the day of the month without leading zeros, then a comma, and finally the year in the format of XXXX. For more cool ways you can display the date, check out php.net’s extensive documentation on it.
The the_author_link() grabs the name of the author and wraps it with a link to the author’s website. There are many other ways you can display the author’s name and change where it links to at Wordpress codex on template tags.
The the_category() function with the parameter of ‘, ‘ displays a link to each category separated by a comma and space that the post is assigned to in WordPress. More on the_category() function at Wordpress codex on the_category.
Finally, the the_content() function displays the actual post. When you use the <!–more–> tag, the post will be cut off and display what is inside the single quotes at the end of the post wrapped in a link to the full article.
4. Page Navigation
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); }; ?>
This checks if there is a function called wp_pagenavi and then calls it if there is. WP-PageNavi is a plugin that makes pages much easier to organize. I modified this plugin a bit and inserted it into functions.php so that it doesn’t require any installation.
5. Sidebar and Footer
<?php get_sidebar(); ?> <?php get_footer(); ?>
These last two functions do exactly what they sound like they do, they grab the sidebar.php and footer.php and spits them out right there.
Conclusion
This concludes the first part of this article. The next part of this article will cover the single.php, comments.php, and the rest of the theme. Check out the links below to help familiarize yourself more with WordPress functions/template tags.
Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.
Further Reading
1. Wpcandy has a pretty cool basic cheat sheet for wordpress with common code snippets and what they do.
2. Wpcandy went ahead and outdid themselves later and made an advanced cheat sheet for wordpress.
References
1. Picture is by MumbleyJoe
15 comments
For a coding monkey idiot like me this is actually a much better way of learning than the ‘building a WP theme from scratch’ and such like, as most of my learning has been from dissecting an already coded free theme, so the layout and clear steps is great for me!
Thanks!
Great post, follow up with “Dissasemble a Premium Theme”?
This is pretty handy: there’s no real ‘this is how you create a WordPress theme’ resource out there, so posts like this help us pick up some basic ideas that we might not have been aware of. e.g. I have to admit that I didn’t know what
php wp_head()was actually for (embarrassing, I know).Thanks,
Leon
Awesome
Dude! Typo in the title! Don’t let it happen!
great attention to detail. you really covered it all. I imagine this will be a great resource for those building their first custom design.
Thanks for writing and posting this. I’ve been hacking free themes for awhile and I always learn something new and your article has helped alot.
~Jeremy Newton
Breaking down a free WordPress theme in order to rebuild it better.
Great job!!!!
@styletime You’re welcome, that is the same way I learned by taking things apart and then putting them back together.
@Bill That is not a bad idea. Any particular theme you have in mind? Interestingly enough, the Revolution Theme is going to be open source soon so I can take that apart. That would be fun.
@leon In the beginning, I didn’t know what anything was for until I took it out and I broke something.
@Octopus It was a long night, please forgive me.
@Jeremy You’re welcome.
@Mong, @Alek @Bob, @Salmen Thanks.
Wonderful start of a series, which I will definitely be following! I’ve been looking for a well-explained (but not übur-technical), clear breakdown of WP themes and how to use them. I’ve been able to tear apart most of the themes I’ve used, but sometimes I’m unhappy with the results, or it takes me forever.
I’m looking forward to this series. Thanks!
Great post! Found you on entrecard and added you to my favorites.
Great series! Taking things apart is a great way to learn. This will really be helpful for people who want to learn more about themes and don’t know where to start. I learned a lot about this is a similar way by converting an existing CSS template to WordPress.
Great article, very helpful. I will try to do something with my blog http://www.thevisualscience.com
Hello! You always seem to write about stuff that interest me, I think it’s time I bookmark your blog.
Add a comment