5 Features to Keep in Mind While Choosing a Blog Theme
5 Features to Keep in Mind While Choosing a Blog Theme
0 comments
What Everybody Ought to Know About Making Changes Count
Comments Off
Photo by Zachstern*
People who rate themselves as intelligent have a 47 percent higher need for change in their professional world. They regularly see possibilities and opportunities around them. (1)
Change is great, we should always be trying to make little improvements in not just our blogs, but everything in our lives. As always though too much of a good thing can be a very bad thing, especially in the case when changes are made just for the sake of change. Often times these types of changes are made purely out of boredom and not exactly with the purpose of making it better.
Change made just for the purpose of making a change in order to make things more interesting is not always a bad idea either. You might come across something that really works that you never would had normally tried. Nether less in order to make your changes count it is important to keep a few things in mind when making them.
Make sure the change will actually do what you want
It sounds silly to even bring it up, after all why would you even bother in the first place with a change unless you actually thought it would do what you want? The problem is that sometimes when we are making changes, we are actually only tinkering around in the shadow of a much bigger problem that we cannot see because we are so focused on little problems. This phenomenon is often referred to as tunnel vision.
For blogs, it is like working on making changes on your sidebar to improve your RSS subscribers count, when the bigger problem is how you are marketing your blog. You could have the most awesome sidebar ever, usability – check, design – check, content – check, but no visitors besides a few people who got lost looking for something else.
Ask yourself, if the change you are going to make really going to solve the underlying problem? If it isn’t, then don’t do it. Make changes that count and prioritize them. There are always more things to do in our lives than we have time to do.
Measure where you currently are
The reason it is important to measure where you currently are is in order to have a starting point that you can measure against after you have made the change in order to see if the change is effective. If you make a change, but have no way of keeping track of if the change actually did anything, then you really have no idea if the change was for better or worse.
For blogs, the equivalent could be measuring your current RSS subscribers, average page views, or even the number of times visitors click on a certain link. That link could be your services page or something else that is vital for the success of your blog.
Whatever change you are making, pick a measurement that is meaningful for you or at the very least a measurement that will indicate whether or not you are actually progressing. Measuring how many hits you get doesn’t really help you that much if all that is important to you is how many people actually contact you. Don’t get me wrong, it is still a helpful measurement, but focus on that numbers that really matter for you. Ask yourself, what has to happen for the change to be considered a success for you?
Measure your progress weekly
You could measure everyday, but that is just going to drive you insane no matter what you are doing. Depending on the changes you are making, it might even be better to measure bi-weekly or even monthly. Daily measurements will just have you riding on an emotional roller coaster no matter what changes you are trying to make.
When I was trying to lose weight, I use to drive myself nuts weighing myself everyday. I would feel happy if it went down, but if it went up or didn’t change I would be grumpy for the rest of the day. It was very unnecessary considering that it is normal to fluctuate up to four pounds in one day. Now, I measure weekly, but I take it with a grain of salt as I find biweekly measurements to paint a better overall picture as to what is happening.
In blogs, you have the same situation where the number of RSS subscribers will fluctuate everyday. Just because that change in your layout or that new article on X topic didn’t give you immediate results doesn’t mean it isn’t working. Stick with the change you made and keep track of your progress.
Reassess the change that you made
After you have got enough measurements it is a simple matter of deciding whether or not the change that you made was effective in solving your particular problem. If it worked out well, keep working in that direction.
If it didn’t work as well as you thought it would, figure out what went wrong. Ask yourself as many questions as it takes to figure it out. Did you make the wrong change? Was it successful but it solved the wrong problem? Did you use the wrong measurement? Or perhaps did you not give it enough time to actually see a change? Or did you not have enough information to make the change?
Conclusion
In the end, the whole process of change is really an experiment that you conduct in order to see if what you changed actually is for the better or worse. Experiment, make changes that count, and prioritize them. There are always more things to do in our lives than we have time to do.
Also remember to write down what works and what doesn’t. There is an odd phenomenon where people sometimes stop doing what works and keep doing what doesn’t work. It is more common than you think.
1. Whatley, A. 1998. “Gifted Women and Teaching: A Compatible Choice?” Roper Review 21:117-24
Hire me!
Related posts:
- Making a blog design visually interesting (2) – Adding in the details Making a blog design visually interesting (1) – Getting…
- Making a blog design visually interesting (1) – Getting started Creating visually interesting blog designs is an art. And as…
- 10 Reasons Why Your Blog Design Will Never Be Done “You are either progressing or regressing. There is no…
3 Things to Remember When Designing a Blog Footer
Comments Off
Photo by LA Wad*
Introduction
This is a guest post by Skellie from http://www.skelliewag.org. Check out her blog for articles on how to use blogs as platforms for profitable online businesses and a great reputation.
Blog footers have traditionally been neglected by designers, usually home only to the obligatory copyright line. Times are-a-changin’ though. Creative footers have become one of the hottest trends in web design, and blog footers are no exception.
It’s not hard to see why. A visitor who reaches the bottom of a web page and finds themselves without anymore content left to browse is at the point where they are most likely to wander away. Blog footers help capture and maintain the interest of the visitor who thinks they’ve seen everything. But they have to be done well. Here are three key things to remember when designing a blog footer.
1. Attention decreases from top to bottom
When a user visits a website, the first thing they see is the top area: the header, the top of the sidebar, and usually some of the content. This is the highest attention area of any design. As the user travels down the page, they need to be kept interested. The likelihood of boredom or distraction increases as the user travels downwards through the design.
They might see a blog post they want to read, or a link they want to follow. They might just decide that the blog isn’t for them. Because of this, most visitors to a blog will never make it to your footer. This means that if there is something you want every visitor to see–whether it’s your navigational menu or the icon for your RSS feed –it should go in the highest attention area of your site: the top area.
2. Your footer is not a navigation bar
Following on from section 1, you should not put ‘must use’ elements of the design in its footer unless they also appear in a high attention area. For example, if your ‘Contact’ page is only accessible through your footer–one of the most common usability errors you’ll see in modern web design–you’re drastically increasing the chances that someone who wants to contact you will lose patience trying to do so. They may never think to look in that area and simply won’t see the link. This can lead to missed opportunities and frustration for blog readers.
Putting a ‘Contact’ page link in your footer is fine, however, when you’ve linked it again in a high attention area. Having navigation at both the top and bottom of your blog will improve its usability, since putting links at the bottom of your page makes sense–once a reader has reached the bottom, they’ll probably want to explore another part of your blog.
3. Keep it interesting!
Blog footers are a great opportunity to surprise and delight those who find them. For years the website footer almost had to be boring. At most, you could expect to find copyright information and a contact link. The nether regions of a blog were to be avoided.
Now, designers are beginning to appreciate the opportunity to go against expectations. I’ve seen blog footers featuring funny quotes, interesting links, portfolio items, illustrations and top posts. These are the best kind of blog footers because they keep users entertained at a key point when they would be most likely to navigate away from a site. Don’t use a blog’s footer as a place for basic features like navigation. Instead, do something interesting and novel that will keep visitors interested!
Conclusion
As a designer, the best way to develop your skill with blog footers is to bury yourself in examples that work. Here are a few great places to start!
Hire me!
Related posts:
- Designing a better blog In order to redesign my blog, over the past few…
- How to Design a Better Blog and Make More Money Why is Your Blog Design Important to Your Blog’s…
- How to Blog Design Style Guide Introduction When designing blogs I noticed there are a…
The Secret to a Great Blog Redesign
Comments Off
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:
- The Secret of Great Blog Designs What is the purpose of a blog design? There are…
- 47 Must See Great Blog Designs This is a snippet of what is inside the blog…
- 10 Reasons Why Your Blog Design Will Never Be Done “You are either progressing or regressing. There is no…
Designredux Free WordPress Theme Updated to Version 0.2
Comments Off
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:
- Designredux 0.1 Free WordPress Theme Released Name: Designredux (Don’t you just love my theme names)…
- How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over…
- How to Disassemble a Free WordPress Theme Part 1 Most articles on WordPress themes focus on building a…
How to Design for Ads in Blog Design
Comments Off
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:
- How to Blog Design Style Guide Introduction When designing blogs I noticed there are a…
- Five Blog Design Mistakes that Make You Look Dumb Blog design rules are not set in stone by…
- Making a blog design visually interesting (2) – Adding in the details Making a blog design visually interesting (1) – Getting…
How to Disassemble a Free WordPress Theme Part 2
Comments Off
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
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.
>//fun stuff inside foreach loop
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
//fun stuff
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.
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
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.
comment_approved == '0') : ?> Your comment is awaiting moderation.
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
Trackbacks
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
comment_status) : ?>
If there are no comments for this post, it will do what is after the and before . 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
comment_status) : ?>
You must be logged in to post a comment.
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
How to Disassemble a Free WordPress Theme Part 1
Comments Off
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
" />
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
<?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'); ?>
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
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.
For more cool stuff you can grab from the bloginfo() function, check out the WordPress codex on bloginfo.
4. Internet explorer love
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
This allows plugins that need to output data into the
tags to be able to do so. So don’t delete it.6. Category Navigation
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
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
The if clause inside of
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
The bloginfo(’rss2_url’) function provides the link to the rss2 feed.
The second part is commented out with 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
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
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
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
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
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
Grabs the header.php file and spits it out there.
2. The WordPress Loop
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:
Not Found
Sorry, but you are looking for something that isn't here.
At this point, it just displays what is after the and before the 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
Read more'); ?>
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 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
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
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:
- How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over…
- Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I…
- Designredux 0.1 Free WordPress Theme Released Name: Designredux (Don’t you just love my theme names)…
Designredux 0.1 Free WordPress Theme Released
Comments Off
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:
- Designredux Free WordPress Theme Updated to Version 0.2 3 weeks after the release of version 0.1, I…
- How to Disassemble a Free WordPress Theme Part 2 In this article, I am going to go over…
- How to Disassemble a Free WordPress Theme Part 1 Most articles on WordPress themes focus on building a…
37 Ways to Design the Comments Form
Comments Off
Posted on 16th October 2008 by Vinh Le in internet |Uncategorized
ajax, bc, blog design, buddypress, canada, cheap, CMS, comment design, comments, comments form, dialup, discounts, drupal, gadget, hosting, html, inexpensive, islandnet.com, joomla, mysql, news, perl, php, Popular, programming, python, reliable, rewards, seo, unlimited databases, unlimited email, v4, v5, victoria, wordpress, wp, xoops
If you are a regular reader here, you know that I put a lot of emphasis on paying attention to blog design elements that usually don’t get much attention at all like comment designs. The comments form is another one of the blog design elements that usually ends up getting rushed at the end. There really is no right or wrong way to design a comments form as long as you pay attention to basic usability guidelines. The following are 37 ways other blog designers have designed their comments form:
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: