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.
The Benefits of Mint
Ahh, it’s always so nice when spring comes along and you can open windows for the first time since the fall, clean things up, and start fresh.
Starting fresh – it’s just one of those ideas you can almost smell.
Fresh was the idea behind Mint, the javascript stats package that was a continuation of Shaun Inman’s popular little program called Shortstats. Mint’s mission was to be a no strings attached, straight to the point stats program, that used advanced techniques and technologies to track more then just hits and uniques.
Mint accomplished just that, after launching in 2005 and receiving a warm welcome in the designer community. Mint had trully shown in was a revolution in statistics logging.
The Features
Right from install, mint provides you with the most friendliest and cleanest looking green and black scheme ever. It truly makes you want to have a mint (or a few). Installation, well, let’s just say it melts in your mouth, being in nearly 2 minutes you’re seeing the mint admin panel for the first time, and seeing the very beginning of a greater look into your visitors.
A Indepth Look into Whose Who
Mint allows you the chance to break down your visitors, and find out where they’re coming from and where they’re going once they get to your site. Mint also allows the recent referrers to be exported through rss, so others can know exactly whose linking you.
Design Better by Knowing More
Another benefit of Mint is it’s User Agent 007. UA does what most common stats programs such as Awstats do, but ten times better. Mint tracks your users resolution, what version of flash they have, browser, and operating system. This is greatly beneficial during future designing, because you know what the majority of your visitors can see in terms of screen res and browser compatibility.
Extras
Download some Devlounge goodness, free of charge and free to use!
WordPress Plugins
- Feed Styler is a plugin for WordPress that lets you style your feeds using CSS.
- How to Write a WordPress Plugin article series is a must read for aspiring plugin authors.
WordPress Themes
Our WordPress themes are free to use, for both personal and commercial use. However, we do ask you to give credit where credit is due, which means that a link back to Devlounge is greatly appreciated.
- Iceburgg is a cold (pun sadly intended) theme for WordPress.
- Lounge 2 is the June 2006 version of Devlounge as a stand-alone theme, free for all to use.
- Particles is a grid-based, portal-like free theme released in August 2007.
- Prebuilt is a clean and simple theme to help you get started using WordPress.
- Wave is a three column clean WordPress theme.
Miscellaneous Downloads
Over the years we’ve released some random stuff not warranting their own category. The links can be found below.
- The PHP + Javascript Start Page gives you quick access to all your favorite sites. Self-hosted, no coding required, batteries not included.
- Clearmint for Mint is a fresh, white skin for the Mint stat service.
- The Designer’s List of Ad Formats brings together common and uncommon ad formats (as in sizes) for you to consider and play with, mockup images available and all.
- Fivesum is a desktop background in (old) Devlounge style.
- The Rockarolla Podcast Jingle is a free set of audio files for use in podcasts, including intro, outro, and dividing sound effects.
Look for more extras in the future!
Improving Content
This is a guest contributor article. Please support them by visiting their site.
Many first time webmasters automatically assume that once their website has launched with a bit of content on it, they will get some hits and regular readers. This is quite untrue. You won’t get any traffic if no one knows about your website. In this article I hope to tackle these problems and discuss some of the common ways webmasters drive more traffic to their site by understanding the user and utilizing various web services. All of the tactics discussed can be applied to blogs or websites.
Website Usability
Before I get into getting your website’s name out there, your site has to have some style. Most web users are instantly turned off by tacky site designs or extreme colors. I know I won’t stay at a website too long if the layout or navigation annoys me. The goal is to have a unique site, different than all the other websites on the net. The one thing I really stress to others is making it easy for your readers to contact you. It shouldn’t take a reader more than a click, if any, to find your email address or a contact form. This makes the reader feel like someone actually runs and cares about the website. An about page is also a great asset to have on a website. The more a reader knows about you or your company, the more they trust your content.
Decide on one main form of navigation and stick with it. Users often find it disconcerting when there are masses of links on the top of the website as well as the sides. If need be, create a sitemap page to help users find their way around and make that one of the primary links.
I highly recommend taking a look at usability guru Jakob Nielsen’s Usability 101, Top Ten Design Mistakes in Blogs and Top Ten Design Mistakes articles. Another thing to consider is how wide to make your website. Think about your readers on laptops that can only handle 1024×768 resolution or those readers that use 800×600 resolution due to bad eyesight. Try to accomodate them as much as possible. If you cannot make your website that thin, consider including buttons for increasing font sizes or width, as seen on Anandtech.
After you have sorted these matters out, take a look at the background framework. Ideally, you want your website to comply with W3C’s web standards, even if it only complies at the Transitional level and not Strict. I’m talking about things like using alt tags for images. Roger Johansson has a great article discussing reasons to use web standards. His website is a fine example of website following all usability and standards
Content
Your site’s usability goes hand in hand with its content. You can specialize in a niche subject as long as you have an idea of how many people might be interested in that subject. If you do well with your niche subject matter, you could get some crazy traffic for being the only decent blog or website online with that type of content. On the other hand you could have widely used content, such as some aspect of technology, but add your own twist with your opinion or comparing/contrasting from other tech analysts. People won’t go to your site to read something they could have read on CNet or Tom’s Hardware, they want a unique take on it. If you learn anything from this article, I hope its that reblogging is a very bad thing. The one thing to kill your traffic is having identical content to another several hundred blogs. I suggest taking a glance at Mr. Veloso’s Evils of Constant Reblogging to get a better idea. Finding out what your content should be is a key element of your blog’s identity and the type of image your blog will ultimately emit.
Along with the notion of unique content comes keeping the reader at your site for as long as possible. Most of your users at first will be drifters, or users that find your site through Google, glance around and then leave. They generally don’t land on your homepage, but a specific page, so all of your efforts on the homepage will be bypassed. In this case you want to have something on each individual page that can keep users tuned in. This might be a block of related articles or recent entries in the sidebar or a list of your top articles that would be viable for first timers. A more extreme approach but still very realistic, would be including a primary link named something like “First Time Here?” and link it to a page with some general info on how to navigate, what the site is about, etcetera. However, this is generally the same concept as an about page.
Technorati for Bloggers
Technorati is one of the best traffic providers for bloggers. It makes your blog much easier to find when people search by technorati tags. Technorati is also a large blog ranking engine. Based on the number of links to your blog from various websites, your blog is given a rank. The higher your rank the easier your blog is to find when people search for things. A higher rank gives your blog greater credibility in technorati. If you don’t already have a technorati account, get one. After you have setup the main settings, such as your profile, you need to claim your blog. Go to Account and then down the page to Your Blogs. Enter the URL of your blog in the URL field and then hit “Claim this weblog.” Once you’ve done that go to “Configure this Blog” and fill in what you can. Click the checkbox to select “Include this blog in Technorati’s Blog Finder” and fill out as many tags or keywords that accurately represent the content in your blog. When you’ve done that, click “Save Changes” and then grab your claim code. There are two types of codes that you may put somewhere in your blog for technorati to verify that your blog exists and keep track of it.
If you have a blog that is Blogger powered or some other blog host that does not give you direct control of your blog files you will want to use the “Link Code” and post it somewhere on your blog. If you are using a more versatile blog publishing system, such as a custom WordPress or Movable Type installation you should copy the “Embed Code.” You can edit your sidebar, header, or footer file and put it wherever you like. You also have the option of posting a Technorati search box or various links on your blog without altering the code you just pasted. Select the options you like and click “Save Changes.” Everything is done by automatically by Technorati.
You will also want to search for a plugin for your publishing platform that supports Technorati tags. For WordPress users, I recommend Ultimate Tag Warrior. Installation can get a bit complex, so moving to a WordPress theme that has support for UTW, such as K2, is a good idea. Basically, when you post an entry you can supply it with Technorati tags.
