Posts filed under Blog Design
By far the most common question that I have received from ya’ll since starting Edit and Post is “How do I make my blog look the way I want?”. Now that you have installed WordPress and know how to install WordPress plugins, it’s time to start learning about themes.
Themes hold files that tell the browser what to display and how it should look. If you remember from this post, PHP gets turned into HTML and that tells the browser what to display. In coding language PHP = “get”. CSS tells the browser how the html you have coded should look.
WordPress comes installed with several themes, including the Default theme. Let’s take a look at the files in the Default theme and see what they do. Don’t worry if all of this is very confusing now!
index.php – Displays your main blog page. Includes PHP calls for all of the files that control how your main blog page is displayed.
header.php – The header file essentially sets up the page and includes PHP calls to “get” the CSS files for the theme, the blog information and title from your WordPress options, and your header image. It also calls WordPress itself from your server and includes the opening html for the body of your page. There can be lots more included in here (and we’ll get to that when we talk about more complex coding).
footer.php – “Closes” your page in the browser. Calls the WordPress footer. Also includes any credits, copyright info, etc that you want to display.
single.php – Displays a single post. Includes PHP calls for all of the other page elements that you display on a single post.
comments.php – Displays the comments for a post. This file is typically only called from single.php.
archive.php – Displays category, tag, and date archives, as well as any other kind of archive you might have on your site due to some advanced coding. Includes PHP calls for all of the other page elements that you display on your archive page.
404.php – If someone is searching for something on your site and goes to a permalink that doesn’t exist, they will see this 404 page. Includes PHP calls for all of the other page elements that you display on your 404 page.
archives.php – Displays a list of your archives by month and subject. Includes PHP calls for all of the other page elements that you display on your archives page.
comments-popup.php – If you want comments to display in a popup window, this file will be used to control what is displayed in that window.
functions.php – A super-important file that you don’t want to edit until you know what you’re doing. :) functions.php basically performs like a plugin, and any php code in here will be executed when you call the function from your other template files.
image.php – Displays a single image and includes PHP calls for all of the other page elements that you display on a single image.
links.php – Displays your blogroll links. Includes PHP calls for all of the other page elements that you display on your blogroll links page.
page.php – Displays a WordPress page and includes PHP calls for all of the other page elements that you want to display on that WordPress page. This file usually looks a lot like single.php.
search.php – Displays search results and includes PHP calls for all of the other page elements that you want to display on the search results.
sidebar.php – Displays the sidebar widgets that you have defined; if no widgets are defined, displays a default sidebar.
style.css – a theme’s stylesheet is where the CSS for a theme is held. Themes can have one or many stylesheets. CSS is pretty complicated, so for right now know that each little section of CSS is called a div, and div tags control how whatever is inside them is displayed.
rtl.css – If you are publishing in a language that reads right to left, this stylesheet will be used.
Let’s look at an example and maybe this will start to make more sense. Remember single.php? It’s the file that displays your single post page.
single.php is going to start by doing a PHP call for header.php. Remember, the header.php has already called in all of your stylesheets and WordPress itself.
<?php get_header(); ?>
Each section of your page is styled using div tags. The header.php file probably had several div tags to display your header image, menu bar, etc. In single.php the main content of your page is also enclosed in a div tag. Let’s call it “content”. When you include a div tag in your php file, WordPress will look in your stylesheet for the div tag name and display the results using the CSS assigned to that tag.
Then it is going to ask the WordPress database for the data from the post itself. This is an if statement in PHP, because if no post exists you want to include a message saying that no post exists.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Once it knows what the post is, you’ll want to format it accordingly. So perhaps you have a div tag for your post header that you surround the post title with. Because that is the only thing you want to format as a “title”, you will then close the div tag.
<?php the_title(); ?>
Now that you have displayed the title, you want the content. You probably have some styling for this, let’s call it “entry”.
<?php the_content(); ?>
Then you want to include your comments.php file.
<?php comments_template(); ?>
Now let’s close the if statement from above and tell WordPress what to display if no post exists, and once that is done we are done with the “content” so we will close the div.
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
Lastly, we’ll call the sidebar and the footer. Remember, the footer closes the page, so after the footer is called, single.php has done its job.
<?php include(TEMPLATEPATH . ‘/sidebar.php’); ?>
<?php get_footer(); ?>
This is a lot to wrap your arms around but I hope it’s starting to make some sense, because we’re going to be talking a lot more about themes as we start to edit each of the theme files, make new theme files, and add in awesome new functionality!
Any questions so far?
You’ve read my previous post about deciding whether you’re ready to start a blog and the green light has appeared. Now what?
(If you are a vendor with an existing company name (and you plan to add a blog with your existing company name on your site) move on along to Step 2.)
It sounds quite obvious but naming your blog is not as easy as it sounds. After brainstorming blog names, you will first need to verify in the US Trademark Database (TESS) that your chosen name is not taken. You will also want to verify with Whois that the .com of your chosen name is available for purchase.
I cannot stress enough how important branding is to your new blog. This includes color schemes, fonts, and most importantly your blog logo and header. You want your blog to be a reflection of you, your company, and your content.
Think of brands you use on an everyday basis. What makes you choose Tide vs. Cheer? Coca-Cola vs. Pepsi? A generic granola bar may taste almost exactly like Quaker, but how likely are you to choose generic? What makes you lean towards brands that you trust? It isn’t always taste, usefulness or tradition – in some cases it’s as simple as the overall appearance of the product on the shelf.
The web is the same. You may have the best content in the world but if your blog/site is poorly designed and difficult to navigate, you’re not going to generate the readership you want. So when you’re branding, as difficult as it may be, you’re in Field of Dreams land. “If you build it (and have excellent content, and market yourself, and make sure you SEO your site properly, all of which we’ll discuss soon!), they will come”.
In Photoshop, Powerpoint, or with stick figures (my preferred method), begin sketching out your blog’s look and feel. Do you want a 2-column or 3-column layout? How do you want your front page to appear? Do you want to immediately display excerpts or full-text posts? What information do you want to display in your sidebar? What information do you want included in your posts’ headers? Their footers? What navigation elements are essential?
This is a daunting task but before any technology is implemented you need to have a vision! Review as many blogs as possible for elements you want to incorporate into your preliminary design. This is also the time to work with your graphic designer on any special illustrations for your site, or to gather the best photos of your work to display.
Now that you have a good idea of the look and feel of your new blog, it’s time to get technical! Next up: a series of posts on Building Your WordPress Blog!