Photo by Melisande*

Introduction

The secret is that you don’t have to hire an expensive blog designer to have a great blog redesign. While it certainly helps and makes the process much easier if you had one to work with, it would still be your responsibility in order to set the overall guidelines for the blog redesign. You need to have a direction when working towards a redesign of your blog. Without any direction you will just end up with a prettier blog (hopefully), which is fun, but does not guarantee that it will make your blog any better.

A great blog redesign starts with a plan. In order to put together a plan for your redesign, you must first reassess your goals, then figure out how well your blog is meeting your goals, and finally asking yourself whether the current design is helping your blog achieve your goals.

Let your goals guide your redesign

If you have ever tried to redesign your blog or anything for that matter, you have probably found your progress halted to a stop by little details such as does this blue or that green look better? This happens when you don’t have goals to guide your overall efforts. Little details will bog you down and slow your progress and even sidetrack you completely from the actual purpose of your redesign. The importance of the answer to whether that blue or green looks better pales in comparison to the answer for the question of whether this change will help you make more money, get more subscribers, or increase page views.

Making visual changes just for the sake of change itself will result in a prettier blog, but that does not necessarily mean a better blog. You can actually make it worst if your redesign is not built with your goals in mind. You can’t hit a target you cannot see.

Just like social media and SEO, your blog design is a tool, a means to an end and not the end in itself. Reassess your goals and allow them to guide your decisions when redesigning your blog. The following are some great resources to help you get started on figuring out your goals and reassessing your current ones:

List of resources

• The Pocket-sized Guide to Blogging
• How to Make Money Blogging: 7 Strategies to Make Money Online
• Why Do We Blog?

How well is your blog meeting your goals?

This is not about whether or not your current blog design is helping you achieve your goals, because that is the next step. This is about whether or not your current blog is where you want it to be. Is it giving you the exposure that you want? Is it getting you more clients and leads? Are you building a bigger network in which to spread your ideas around?

The answers to these questions will help you determine the goals for your blog redesign. This is different from the goals for your blog as this focuses solely on what you want the blog redesign to be able to accomplish in the end as a result of the blog redesign and nothing else. Increase page views? Get more subscribers? Decrease bounce rate? Increase discussions? Get more leads/clients?

List of resources

• How Can You Measure the Success of Your Blog?
• Social Media Marketing: Numbers Can’t Tell the Whole Story

Is your blog design helping you achieve your goals?

In order to figure out whether your blog design is helping you or not, you must really take a second look at your blog design. After that, take another 3-4 looks, seriously. As humans our brains are programmed in such a way that information that doesn’t change much, often just gets ignored completely by our mind even if we see them everyday. This is why we can do something everyday and not notice something until someone points it out to us or for some reason we were forced to pay attention to it. So when was the last time you really took a look at the design of your sidebar, footer, headlines, or comments?

If you are like most people, it was probably a long time ago. And who can blame you, as bloggers we get caught up with writing the next best article, promoting the crap out of it in social media outlets, and figuring out other methods to achieve our goals that we end up overlooking our own blog design. We no longer see the widgets we stuffed into the sidebar at the last minute, the links that no one ever clicks on in the footer, or that hideous rss button in the corner. Everything becomes a blur and your blog design suffers because it certainly doesn’t get better on its own.

So how do you figure out whether or not a blog design is helping you achieve your goals? It is pretty simple, as you go through your blog design keep in mind that any visual element that is not helping you achieve your goals is hurting it.

Conclusion

In the end, you should have a much better plan and direction for your blog redesign. Whether you take this to a blog designer or do it yourself does not matter as the end blog redesign will be that much better now that you invested time into a solid plan. If you are doing it yourself, then the next article is for you. It will focus on how to approach the redesign process after you got a plan.

Hire me!

Related posts:

1. The Secret of Great Blog Designs What is the purpose of a blog design? There are...
2. 10 Reasons Why Your Blog Design Will Never Be Done “You are either progressing or regressing. There is no...
3. 17 Resources for Creating a Blog Design 1. Weblog Usability - Top Ten Design Mistakes Jakob...

1. 404 User Experience Design

2. Adii

3. Renaissance

4. Avalonstar

5. Bartelme

6. Carlos Leopoldo

7. coda.coza

8. Creattica Daily

9. CSSAddict

10. Mancub

11. Darren Hoyt

12. Design Disease

13. Design Intellection

14. Edmerritt

15. Elitist Snob

16. Elliot Jay Stocks

17. greg-wood.co.uk

18. High Resolution

19. ifoh designs

20. Jesus Rodriguez Velasco

21. KISSmetrics

22. Kulturbanause

23. La Privata Repubblica

24. lotus from the mud

25. Lucy Blackmore

26. MonsieurLam

27. Natalie Jost

28. Noupe

29. Oaktree Creative

30. Ordered List

31. pixelgraphix

32. Playground Blues

33. Chris Shiflett

34. Smashing Magazine

35. Tim Kadlec

36. Wilson Miner

37. Yanko Design

Conclusion

Now go make your comments form that much better or sexier. I know I need to and that is why I am currently taking a second look at my own blog design. A redesign is coming in the future, along with an article about the whole redesign process.

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.

Hire me!

Related posts:

1. 5 Simple Ways to Make Your Blog Design POP In "The Secret of Great Blog Designs," I talked about...
2. 5 Ways to Make Your Blog Design Unforgettable Introduction A big problem with blogs these days is...
3. 30 More Must See Comment Designs for Blog Designers I am fascinated by the details in a blog design...

3 weeks after the release of version 0.1, I have finally added all the finishing touches for version 0.2 of Designredux, and it is still free. The live demo has been updated with the latest version for your viewing pleasure. Visually there has only been minor changes to the overall design. They were just little tweaks here and there to improve the look. A few odd bugs were fixed as well.

Most of the changes though are in the back end. Most notably the addition of a custom admin panel, custom pages, and it is now widget-ready. The following are the list of changes made.

Custom Admin Panel

Most of the work was done here. And most of the work means a lot of work. In order to maximize the use of the WordPress theme in version 0.1, it required you to go into the code and make some changes. With the creation of the custom admin panel, that is no longer necessary.

Navigation

In version 0.1, the navigation on top of the theme displayed all the categories as links.  This was obviously going to be a problem when there are too many categories or you don’t want to display every single category there. In order to fix that, I created an admin panel for the navigation so you can now pick which category you want displayed. You can pick as many or as little as you want.

Bottom right of the footer

This area required the edit of the about_text.txt file in order to make changes to its content in version 0.1. Now you can just change it from the admin panel and you can also change the title for that area.

Feedburner

Efforts have been made in this area to make it easier to add your feedburner account and activate subscribe by email without having to edit the code yourself. If you don’t have a feedburner account, it will just default to WordPress’s rss feed.

Google Adsense

Easy integration of Google adsense is now available for the sidebar and post’s footer. All you have to do is paste the code in the admin panel. I also designed it so the integration of google adsense will look nice. But it does require that you set your Google adsense to use #EEEEEE as the background and border color or else it will look sloppy You don’t have to, but your efforts will be rewarded. Check out the demo to see what I mean.

Google Analytics

Just paste google analytics code into the admin panel and you are done. No need to edit.

Documentation

Added a section to explain everything in the settings below the admin panel.

Custom Pages

Version 0.1 had no custom pages so these were added to cover the basic types of pages found on blogs.

Search.php

In the absence of a search.php file, WordPress uses the index.php to decide how to display the results. Not the best idea so I created the search.php so that the search results look nicer.

Page.php

Again WordPress used the index.php to decide how things looked when pages were displayed when page.php is missing. Now regular pages look much better.

404.php

The page you get when someone gets lost on your blog.

Archives.php

The archives page needs to be activated by creating a page in WordPress, you can call this page anything you want, a good name is Archives. Then go to the page templates section of the page and choose “Archives” in the drop down menu. That’s all you have to do.

Conclusion

A lot of work has already been done on this theme, but there are more coming. More tutorials will continue to roll out soon on how to take this theme to the next level. If you have any requests or ideas, please feel free to leave a comment, send an email, or tweet me on twitter about it.

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.

Hire me!

Related posts:

1. Designredux 0.1 Free Wordpress Theme Released Name: Designredux (Don't you just love my theme names)...
2. How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over...
3. How to Disassemble a Free WordPress Theme Part 1 Most articles on Wordpress themes focus on building a...

Introduction

Anyone who has been reading blogs for than a few days will notice that there are two common types of ads in blogs. Those two types are Google adsense, which is essentially a bunch of text with links and banner ad blocks, which often comes in the size of 125 x 125. Then there are three places it often gets placed, the sidebar, inside of a post, or at the bottom of a post.

Advertisements are a nice way of making money with blogs, but where it often goes wrong is the implementation of these ads into blog designs. Most blogs tend to just stick the advertisements right into the blog design without a second thought. This often results in making the blogs distracting, ugly, and less usable. But this does not have to be the case, there are many ways of integrating ads into blog designs without making it worst.

There is pretty much nothing you can do about the design of the ads themselves, besides rejecting the advertisers, which will only end up hurting your earning potential. Therefore the only thing you can do is to ensure that the integration of the ads into your blog design is done well.

1. Give the ads their own real estate

By creating separate real estate for the ads, it makes it clear that they are separate from the actual content of the site itself. This makes it easier for your readers to navigate and use your blog.

An easy way of doing this is to group the ads into a separate container or area of the blog and styling them different from the rest of the blog. Noupe did this in the above example by making the background color for the ads different. You could also try creating a thick but subtle border around the ads.

2. Label the ads as ads

Why bother labeling ads? Because it makes it easy for the reader to know that they are ads at a quick glance. Also by labeling the ads as ads, this decreases the likelihood that the readers will confuse the ads as actual content of your blog.

Ads in the sidebars usually don’t need labels because the sidebar is already separate from the content, but the labels are still helpful. Ads inside of posts should always be labeled as ads, because it is more likely that the reader will confuse them with actual content and get distracted.

An easy way of labeling ads inside of posts is by creating tabs that say “Advertisement” as WebDesignerWall has done above. Simple and to the point, it doesn’t need to be fancy at all.

3. Design for content over ads

In any blog design, there is a hierarchy of elements with varying levels of importance. In general, it is a bad idea to make it so that advertisements appear to have a greater level of importance over your actual content. When you make ads appear more important in your design, it shows the reader how little you value your own content. If it seems like you don’t value your own content and just want to make some quick money, your credibility will drop. Along with your credibility, it decreases the chance that the reader will actually read through all of your content because the ads will be distracting.

Basically what I am saying is that anytime the ads are too distracting or taking way too much attention away from your actual content, then you are designing with ads over content in mind. Ads are often already jumping off the page, there is no need to add to that. Macalicious does a great job of designing with content over ads in mind with their blog design.

Conclusion

As you can see from the above examples, advertisements don’t have to be ugly or distracting. Now that you don’t have any more excuses, make those ads pretty!

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. For more on blog design, check out my massive guide on Blog Design.

References

1. Top picture is by Steve Webel

Hire me!

Related posts:

1. How to Blog Design Style Guide Introduction When designing blogs I noticed there are a...
2. Five Blog Design Mistakes that Make You Look Dumb Blog design rules are not set in stone by...
3. What Everybody Ought to Know About Usability and Web Design Even people who have no idea about usability feel...

In this article, I am going to go over the rest of the files in the Designredux WordPress theme before we go on to adding extra features, scripts, and custom pages to the theme. Check out How to Disassemble a Free WordPress Theme Part 1 if you missed it.

The files that this article is covering are comments.php, single.php, functions.php, and style.css.

Comments.php

The comments contains everything required for the comments to function. This includes the comments itself, the comments form, and various checks that do different things depending on the settings set in WordPress.

1. Some pre-flight checks

if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))

 die ('Please do not load this page directly. Thanks!');

Checks to see if the comments.php is loaded directly into the browser. If it is being directly loaded, it will stop loading and display the message within the die() function. Comments don’t work outside of the WordPress Loop so it would be pointless to load it directly.

if (!empty($post->post_password)) { // if there's a password

 if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie

                <p class="nocomments">This post is password protected. Enter the password to view comments.<p>

<?php return; }}?>

Checks to see if a password is set for the post. If a password is set, it will stop the post from being displayed and instead display an input box where you can enter a password in order to see the post.

<?php if ($comments) :?>	<ol id="comments_list">

 	<?php $comment_index = '1'?>

                <?php foreach ($comments as $comment) : ?>

 		//fun stuff inside foreach loop

                <?php endforeach; ?>

Checks to see if there are comments before it begins the process of churning out all the comments. Then it sets $comment_index = ‘1′ in order to be used later for displaying the comment’s number. Only after all that does it begins the foreach loop which will go through every comment one by one and do everything inside the loop.

2. Inside the comment’s foreach loop

<?php $comment_type = get_comment_type(); ?>

<?php if ($comment_type == 'comment') { ?>

        //fun stuff

<?php } else { $trackback = true; } ?>

The first line gets what type of comment it is. There are three types of comments you can get. The three being regular comments, trackbacks, and pings. The reason for checking this is to separate the comments from the trackbacks and pings so it can be organized better. After getting the type, it checks to see if it is a regular comment. If it is a regular comment, then it does all the fun stuff after that. But if it is not a regular comment, it just sets $trackback to true, which tells us that there are trackbacks/pings in this post.

<li class="<?php if (1 == $comment->user_id) { ?>comments_author <?php }; ?>

        <?php if ($comment_index % 2 == 1) { ?>odd<?php }; ?>" id="comment-<?php comment_ID() ?>">

The first line checks to see if the commenter is an author by checking to see if its user id is equal to 1. If it is then it adds the class “comments_author” to the <li> tag so it can be styled differently from the other comments. The second line checks to see if the comment’s number for that comment is odd, if it is then it will add a class of “odd” so it can be styled differently from the even comments for easier reading. <?php comment_ID; ?> just adds the id for the comment.

<span class="comments_index"><?php printf("%03d", $comment_index); $comment_index++; ?></span>

The printf() function is used to format the comment’s number for display. The format in this case being defined by “%03d”, which just means it has to be outputted as 3 digits and if it isn’t already in 3 digits format then add leading zeros until you get 3 digits. That is why it comes out as 001 and 002 instead of 1 and 2. $comment_index++ just adds one more to the index so the next one will be 2, 3, 4, etc.

<?php if ($comment->comment_approved == '0') : ?>

 <em>Your comment is awaiting moderation.</em>

<?php endif; ?>

The first line checks to see if you have set comments to be approved before displaying in the settings of WordPress. If you have it set to be approved first, then it will just give a message to the commenter that it is awaiting moderation.

3. Trackbacks and pings

<?php if ($trackback == true) { ?>	<h3>Trackbacks</h3>

<ul id="tracksbacks">

 	<?php foreach ($comments as $comment) : ?>

 	<?php $comment_type = get_comment_type(); ?>

 	<?php if($comment_type != 'comment') {?>

 		<li>

 			<?php comment_author_link(); ?>

 		</li>

 	<?php } ?>

 	<?php endforeach; ?>

 </ul>

<?php } ?>

The first line checks to see if there are any trackbacks or pings. If there is, then it will display them by using a foreach loop again. This is pretty straightforward after having gone through the comment’s foreach loop. This time you just display a link to the trackback/ping if they are not regular comments.

4. If there are no comments

<?php else : ?>

        <?php if ('open' == $post->comment_status) : ?>

 <?php else : // comments are closed ?>

 	<p class="nocomments">Comments are closed.</p>

 <?php endif; ?>

<?php endif; ?>

If there are no comments for this post, it will do what is after the <?php else: ?> and before <?php endif; ?>. The second line pretty much just checks to see the status of the comments. If the comments are open, but there are no comments it doesn’t do anything. But if the comments are closed it will say so.

5. Pre-flight checks before displaying the comments form

<?php if ('open' == $post->comment_status) : ?>

 <?php if ( get_option('comment_registration') && !$user_ID ) : ?>

 	<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>

<?php else : ?>

Before we can display the comments form, we have to check if the comments are open or not and that is what the first line does. Now if it is open, but the settings in WordPress is set so that only registered users can comment then it will force you to login if you haven’t already done so. If all the conditions are satisfied, the conditions being comments are open and you are logged in if required to do so, then the comments form will be displayed.

6. Comments form

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

Sets the action of the form to the wp-comments-post.php file, which will process the form.

<?php if ( $user_ID ) : ?>	<p class="comment_status">Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout »</a></p>

<?php else : ?>

Checks to see if you are logged in. If you are logged in, it will tell you so and also give you an option to log out if you want to.

<label for="author">Name <span><?php if ($req) echo "*"; ?></span></label>

<input type="text" name="author" id="author" class="text" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />

<?php if ($req) echo “*”; ?> checks to see if the settings in WordPress is set so that it requires the user to fill out their name and e-mail. If it does require it, then it will display * next to the field. <?php echo $comment_author; ?> fills in the user’s name if they are registered, but if they are not, it just leaves it empty.

<?php do_action('comment_form', $post->ID); ?>

The do_action(’comment_form’, $post->ID) function is a hook for plugins, similar to wp_head() in the header. So don’t go deleting this or comment plugins won’t work.

Single.php

The single.php is used to display single posts. In this theme it is identical to index.php, except for a couple of things. For one, the number of comments are no longer displayed in the top right. And secondly, the comments.php is called on this page.

1. Comments.php

<?php comments_template(); ?>

<?php comments_template(); ?> calls the comments.php file and spits it out. That’s it.

Functions.php

The functions.php file is used to hold all the custom functions outside of what WordPress offers that you plan to use in your theme. In this theme, it just contains the WP-PageNavi plugin, which is used in the theme for easier pagination.

Style.css

The style.css file is what WordPress expects to be your main stylesheet for your theme. It also contains nifty information about the theme that WordPress uses to display. Breaking down the style.css file is out of the scope of this series.

1. General information about the theme

/*

Theme Name: designredux

Theme URI: http://www.blogdesignblog.com/themes/

Description: A simple sweet blue/silver theme designed by blogdesignblog.com

Tags: Blue, fixed width, widgets, two columns, silver

Author: Vinh Le

Author URI: http://www.blogdesignblog.com

Version: 0.1

.

This theme is distributed under the Creative Commons Attribution-Noncommercial 3.0 Unported License.

Basically you can do whatever you want with it as long as you credit me with a link and

use it for non-commercial purposes. A link/credit is already integrated on the bottom of the

footer, you can remove it, but only if you put it somewhere else on the page.

.

*/

This is pretty self-explanatory. It is just basic information about the theme.

2. Color Scheme

/* `Color Scheme

----------------------------------------------------------------------------------------------------*//*

 Blue : #6f9fbd

 Text: #42423d

 Black: #464646

 Deep Black: #272727

 Silver: #eeeeee

 Pink: #ec81c0

*/

This is usually not required, but I thought it would make life easier for people who want to customize the theme.

Conclusion

This concludes the second part of this article. Now that we are done disassembling the WordPress theme, we can actually start the really fun part, which is modifying the theme to do what we want. This includes creating custom pages, scripts, and plugins. If there is something specific that you would like to see added to the theme, just leave a comment and I will cover it in a future article.

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. WordPress Codex for Theme Development.

References

1. Top picture is by wasabicube

Hire me!

Related posts:

1. How to Disassemble a Free WordPress Theme Part 1 Most articles on Wordpress themes focus on building a...
2. Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I...
3. Designredux 0.1 Free Wordpress Theme Released Name: Designredux (Don't you just love my theme names)...

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

Hire me!

Related posts:

1. How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over...
2. Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I...
3. Designredux 0.1 Free Wordpress Theme Released Name: Designredux (Don't you just love my theme names)...

Name: Designredux (Don’t you just love my theme names)

Version: 0.1

Platform: Wordpress (Possibly other platforms if there are enough requests)

Live Demo: Designredux live demo

Download: Designredux 0.1 zip

A few notes

Yes, this version is really 0.1 because this theme was designed with the intention of being in continual development as a project for this blog. Basically what that means is that this theme is intended to be used as a part of a series of tutorials on coding, designing, and redesigning. By the time it hits 1.0, it will be loaded with new features and of course a redesign as it is reassesed as time goes on.

The next series of articles will focus on how this theme was built from scratch. Then after that, future articles will focus on adding more features and improving the design of the theme. If you have anything you would like me to cover in particular, feel free to drop me a message or comment.

Subscribe today by RSS for free and get more tips on improving your blog design. 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.

Hire me!

Related posts:

1. Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I...
2. How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over...
3. How to Disassemble a Free WordPress Theme Part 1 Most articles on Wordpress themes focus on building a...

1.  404uxd

2. antiphrasis

3.  Avalonstar

4. Blog Design Studio

5. Carlos  Leopoldo

6. Challies

7. Chilligavva

8. coda.coza

9. Creative Curio

10. cssaddict

11. Design Disease

12. Design Intellection

13. Design Snack

14. DesignWorkPlan

15. Elliot Jay Stocks

16. Ecstatic Media

17.  Freelenz

18. greg-wood.co.uk

19. Jeff Sarmiento

20. Kulturbanause

21. MacRabbit

22. Monsieurlam

23. Particletree

24. RIKCAT

25. Simone Maranzana

26. Natalie Jost

27. The Swell Guys

28. Twitter

29. Wilson Miner

30. Zinaz

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.

Hire me!

Related posts:

1. 30 Must See Comment Designs for Web Designers Comment design is an art. Comment design is often overlooked...
2. 37 Ways to Design the Comments Form If you are a regular reader here, you know that...
3. The Secret of Great Blog Designs What is the purpose of a blog design? There are...

“You are either progressing or regressing. There is no such thing as standing still” (1)

Introduction

A blog design in it’s simplest form is an interface between the user and the data on the blog. It is the job of the blog design to make it as easy as possible for the user to be able to tell if the blog contains data that the user might be interested in. And if it does then it needs to be able to display it in a way that makes it easy for the user to be able to consume that data. That will never change.

Everything else about blogs do change though. Blogs exist in a fast-paced environment where not only are changes fast, but news of them are just as fast if not faster. Blog designs need to be able to change along with the blogs in order to meet any new needs or goals that appear. A blog design will never be done simply because blogs will never stop evolving. What makes sense one moment won’t necessarily hold true the next moment.

1. The environment changes all the time.

The environment I am referring to is everything that relates directly or indirectly to the blog design, including the blogosphere, technology, widgets, plugins, etc. These elements of the environment change all the time so it is important to reassess if the blog design meets it’s goals whatever that may be for that particular blog the best way it can be. For example, new technology could make accomplishing certain goals easier so it is important to continually reassess the blog design by asking yourself how you can improve on your blog design.

2. Just because it was true five minutes ago, doesn’t mean it will be true tomorrow

Just as the environment changes all the time, the decisions we make on our blog design might work well one moment based on the current situation. But since situations changes all the time as well, it doesn’t necessarily mean it will continue to work later on. So just because you have been doing something a certain way for a long time does not mean it is still the best method later on.

3. You change as time goes on

You get better, experience new things, learn new skills, and so what you can do for your blog design changes. Therefore it is important to reassess what else you can do for your blog design that you might not have been able to do before because of lack of knowledge or experience.

4. What seemed like a great idea at one moment, might not be later

Tables used to be a great idea for layouts and we all know how GREAT that was. It has thankfully died out for the most part. Trends come and go, reassess your blog design periodically so you are not the last person to know when a trend has gone because it has been proven to suck.

5. New research can render parts of your blog design old

Guys in white lab coats spend a great part of their lives in cages to give us valuable research on various topics, such as usability, accessibility, psychology, perception, and other cool things. In order to not waste their sacrifices and make your blog designs better, it is important to listen when they talk. Occasionally new research could change a commonly established practice to not be as great as it was thought to be or new ideas that replaces old ones.

6. You are human

As humans we might like a blog design for the first few months, but after a period of time we just get sick of it. How long it takes for a person to reach that point differs from person to person, but inevitably we get sick of staring at the same old blog design and we want to redesign it. (It takes me about 2 weeks) On the upside, it allows us to make more radical changes instead of just small ones.

7. What we need the blog to do changes

At the beginning, a blog design might be created just for the purpose of blogging, but over time the needs of the blogger might change. For example, a blogger might decide that he/she wants to make money off the blog, but advertisement blocks were never taken into consideration for the first design. While ads could be forced into the old design, it is much better to redesign it to fulfill the blog’s new needs.

8. Pink is no longer your favorite color

It happens, your tastes change and for a lot of people the blog represents their personality. So you might deem it is important enough for your blog design to make changes to match your new-found favorite color or anything else you feel is important to reflect about your personality.

9. Readers change

Imagine this, your blog suddenly goes from the cozy 300 readers that you are used to and blows up to 1,000 readers. That doesn’t mean that you get more of the same users, it could mean that you got new users that are nothing like your old users and they may have different needs that you need to adjust your blog design for.

10. There is no such thing as perfection

But you can get pretty damn close by continually working on your blog design to make it better.

Conclusion

In the end, blog design trends come and go, but the basics will always remain important for a great blog design. But that doesn’t stop the fact that small improvements over time result in big improvements. Never stop trying to improve your blog design and reassessing it to make sure it is the best you can make it.

Subscribe today by RSS for free and get more tips on improving your blog design. 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.

References

1. “Pocket Sponsor: 24/7 Back to the Basics, Support for Addiction Recovery” By Shelly Marshall (p 16)

2. Picture is by marcelgermain

Hire me!

Related posts:

1. Why You Need to Become a Renaissance Blog Designer The Renaissance was a "great period of revival of...
2. Blog design + Psychology = Food for thought If I can only use one word to describe my...
3. 5 Ways to Make Your Blog Design Unforgettable Introduction A big problem with blogs these days is...

The Renaissance was a “great period of revival of classical-based art and learning in Europe that began 14c.,” and it also means “rebirth” in French. (1)

So what does the Renaissance have to do with blog design anyways? I’m not suggesting we need to have some sort of grand movement within blog design, but what I am suggesting is that we take a look at blog design from different points of perception that we never considered to do before. Most blog designers have their roots from web design and while web design and blog design share a lot of commonalities, there are still quite a few different aspects that present blog designers with different problems, questions, and goals for their blog designs.

The same tools and techniques used to solve problems in web design can not always be applied to blog design in a seam less transition. Sometimes you might get lucky and it will work great, other times you might get disappointing results. That is why it is important to approach blog design in a different manner and why it is even more important to become a Renaissance Blog Designer.

So what is a Renaissance Blog Designer?

A Renaissance Blog Designer to me means a person who not only understands the graphic design side of how to select a color, type, and layout for a blog design, but a person who understands more than what is required to do the minimum of his profession. While it is certainly possible to get by on these skills only and leave the other aspects of the blog design to other people, it will limit the overall picture that you can see.

A Renaissance Blog Designer needs not only to understand how graphic design relates to blog design, but he/she also needs to understand the greater overall picture of how the bl