Introduction
Welcome back. Now that you’ve had a week to play around with your WordPress header file, your probably itching to get designing, and move along with your layouting. Believe it or not, the jump from html to WordPress templates is not a hard one to make at all – in fact, it’s more like walking up stairs then jumping.
That ever dangerous Index.php
Everything that happens in WordPress goes down in the index.php, the center of your blogging universe. This one file is usually the deciding factor in your visitors either saying “I should check this out” or, “WTF” – and leaving.
The index is what’s going to grab the readers attention. If it’s impossible to navigate, read, and is a mess organization wise, your blog or site is a bust. While ultimately, content usually proves king over design, design plays a major role in visitors attitudes towards a site.
Breaking down that mess
Let’s take a look at that wonderful index.php, in this case, it’s WordPress 2.0’s default theme, Kubrick. This is the theme everyone installing wordpress starts with, and the theme most beginners stick with, simply because customizing WordPress is such a hard concept to grasp.
First things first. If you’ve never found it to this file yet, nows the time to do it. Head over to the Presentation tab, then Theme Editor. Make sure you’re on the WordPress Default theme, as it will make it much easier to understand and follow along with my examples.
Php get my help
The very first thing you notice is a small line of php code, looking like below:
[php][/php]
Look familiar? That’s our friendly header.php being called into the template. You’ll notice there are a few more of these php get functions throughout the file, including one for the footer and one for the sidebar. You’ll also notice that these appear frequently – in every theme file to be exact. These functions make it much easier to include things in each different theme file. Instead of copying all the header, footer, and sidebar code into every theme file, these functions do it all for you. This becomes a real time saver, because to change the header of the blog, you simply modify that one file (header.php), and wham, the changes are seen on all pages.
Wasn’t that last weeks article?
Alright, alright, back on task. If you continue down the index.php, you’ll notice a whole jumble of code between the function for getting the header, and the function for getting the sidebar and footer.
The first line you’ll stumble upon sets up the overall look of the page:
[html]
By quickly scrolling down to the bottom of the Index template, you’ll notice that div we just opened for id “content” gets closed right before that sidebar function. This will become important, but we’ll get to that later.
The next block of code you see is essentialy the whole thing between the first opening and closing div we saw. It looks like this:
[php]
Not Found
Sorry, but you are looking for something that isn’t here.
[/php]
Wow, what a mess
Believe me, if I was new to code, I would quit right there after seeing all that. I’d have no place to start.
So, let’s make things a little easier for you.
Take a look at the first few lines of this php block. These functions are very easy to understand, simply by looking at them. Together, they’re saying, if there’s a post available, then show it. Now, it’s up to you to give it the parameters so it nows how and what to display, otherwise those functions go unused.
[php]
[/php]
The parameter setup all goes down in the next few lines, beginning with another opening div, this time for class “post”.
[html]
[/html]
This is where WordPress, stylesheets, and php combine to provide you with your posts. First, the post id is called upon. Usually, this is not shown, which is this case in this theme. Between the opening and closing h2 tags are php functions calling for the post title name, as well as the permanent link to them. In the opening and closing small tags, you get a function that will output the time of the post, as well as the authors name, as specified in the WordPress Dashboard.
Next, we have the div that does all the displaying for each and everyone of your posts.
[html]
[/html]
What this is doing, is grabbing the article content, in this case, the whole article content, and, if specified as a cutoff text limit in the WordPress Dashboard, or if you decided to insert the More tag into your post, a link to the rest of the post (Read the rest of this entry…).
Below that is the final class in this file, which is “postmetadata”. This is where extra stuff like text links to categories the article was posted in, comments and the number of comments go. It’s fairly easy to see what php functions to which.
Customizing WordPress: Headers
WordPress Customization Series Introduction
Over the next few weeks, Devlounge will chronicle all customization elements of wordpress, from headers, to layout, and even what plugins you need to have. By the end of the series, you’ll be on your way to using harvesting all of the power of WordPress, to do much more than a blog.
It All Gets Started:
Sometimes, headers become lost as an way of customization for wordpress. But in many ways, your wordpress header can be the kickstarter of your blog, in both terms of search placement, and display for every wordpress based page.
Understand It’s Purpose – Header.php
The WordPress Header is, by default, generated dynamically, with such things as the blog title and description, theme name, author, and stylesheet url. Usually, you’d prefer to keep these settings untouched, as it ensures that stylesheets will work correctly with your blog, and everything will flow right. But, in order for your blog to stand out, small tweaks to the header can make all the difference.
Output Better Titles
By default, WordPress outputs titles as “blog name – description – page/post title”. While in most cases this would be fine, there comes a time when you may want to change the page title to your own. Maybe you want all pages to have just the site name, or, you’d like to remove the description tagline. These edits are extremely easy to make, but first timers who know basic html become nervous when they see php being used to generate the title tag.
Looking at the php tags for the first time, you’ll find it’s easy to see the meanings behind them. In the WordPress Default’s theme header.php, you’ll come across the title tags being filed with the tags from the screenshot above. So, what does it all mean? In between the title tags is php code calling for information from the WordPress Options, Options tab, where you specify the blog name and description. The next few php requests check to see if the page is a single page or part of the archives, and then assigns them with the corresponding name, usually “blog name – page or post title”.
So, how do you get around this? Start off by deleting everything between the title tages, so only the opening and closing tags remain. Next, you can enter the page title as you wish, for example, My Site. If you plan to include what page you’re on, you may want to include a space after your title, followed by a hyphen, space, and then the approriate php code. In this case you’d take all of the php code after the php tag containing “blog info” is closed.
You’ll now have a title that’s been customized, and doesn’t rely on the WordPress Options to generate it. This gives you the ability to include your own slogan, and not include page and post titles at all if you’d like to keep them out.
Adding Style to Your Sheets
Another benefit of editing the header is the ability to assign alternative style sheets, such as custom stylesheets for Printing, which normal wordpress headers would not have. Adding an alternative style sheet is easy, and it only requires one line of code, pointing to the location of your print style.
[html]
Setup A Common Header
Since all theme files call for both the header and the footer (Index, Page, Single, Archives, Etc), the header is a great place to setup parts of your design which will repeat on every page, for example, a graphical banner and navigation. In the WordPress Default Theme, there are some quick stylesheet classes and allow for easy changing of elements such as a header background color and image. The actual page design begins after the stylesheet ends, following the body. Underneath the opening body tag, you can begin adding elements that you’ll want to be located on every single page.
[html]
Meta Your Blog
Another thing WordPress leaves out which is essential to earning blog popularity is metadata, such as keywords, descriptions, etc. These can be easily added, by adding just a few lines of code and filling in your best choice of keywords and site description. This will greatly increase your rank of search engines, and benefit your blog in the long run.
[html]
[/html]
Up Next
Next week, we break down early layout techniques, and get you started with turning your blog into your own. Over the next few weeks, I’ll also be bringing you Advanced Layouting, Customizing the Sidebar, Making the Footer leave a better print, and Plugins you need to have.
We Tested 50 Web Tools For Online Entrepreneurs
A small team that uses the right web tools and services can achieve the same results as medium and large teams.
We reviewed 50 web tools and services that are known to effectively help businesses of all sizes. Expect to see solutions like the following: [Read more…]
Complete Showcase of 50+ Web Tools & Services
Are you hoping to launch your online business soon? Need some help to make sure everything’s in place? Here’s a list of 50+ web tools and services that can help you finalize details. [Read more…]
Tips for Building a Profitable Affiliate Website
Have you been thinking about getting into affiliate marketing but aren’t sure where to begin? If so, you’re in the same boat as many other entrepreneurs who want to figure out how to build a profitable affiliate website. While that is a perfectly achievable goal, there are a few basic rules you need to follow to make it work. Here’s a summary of the three steps to creating the site that’s best suited for your interests, experience, budget, and long-term goals. [Read more…]
