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]
Hello <php code>[/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]
[/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.
It was not long ago that simply taking a design, slicing it up in your favorite graphics program and uploading the pre-created html could pass as a perfect website; times have long since changed.
CSS has been around for a while, but it wasn’t until recently that CSS became part of the new trend hitting the net. With the introduction of Firefox, Opera, and other browsers supporting web advances and standards, CSS became the new way of styling all aspects of a site – from backgrounds to link colors and more.
Enter today, where we have a combination of a more cleaned up version of HTML and CSS being used together to build and style entire sites. They are today’s “standards”, a far different looking standard then the tables of years past. The hardest part for someone new to design is learning how to design using what’s out there today.
Leave the dust on the tables
Tables are old news. Many experienced designers pay a lot more attention to code these days. No matter how great your design is, everyone is looking for how many errors you have under a W3C validity checker. Leaving tables behind isn’t as easy as you think. It’s not as simple as finding all tags and replacing them with DIVs.
Styling with style sheets
How’d they get that rollover text effect? How do their links change colors link that? Chances are everything you see done today on good websites is coded in the cascading style sheet, or CSS. CSS files are simple pieces of code that can define text colors, sizes, font, borders, height and width or content boxes, and many other aspects of a site. CSS is also now being used in rollovers. Rather then having two separate pieces of code for a regular image state and a rollover image state, CSS is being used to control all the various states. If you can learn CSS, you are on the road to building better and cleaner sites.
Teach yourself
One thing I found to benefit myself a lot was learning on my own. If you have any basic HTML knowledge, learning XHTML and CSS is amazingly easy; programs such as Dreamweaver or TopStyle Pro aren’t there to intimidate you – they’re there to assist you and increase your output time by helping along with the coding process. The latest version of Dreamweaver will also clean up your html for you, making it valid XHTML. CSS is another thing, but it’s amazingly easy to understand once you view the source of another site.
View source is the key
When you stumble upon a site that has a layout making you say “how’d they pull that off?” the View Source feature of most browsers is irreplaceable; while I was learning, I visited many sites listed on cssvault and other CSS gallery sites. By copying the HTML code into your favorite coding program, and doing the same for the CSS, you can see exactly how the site was built. At first, the jumble of code may seem confusing and very hard to understand, but take things slowly and one part at a time. Look for things like DIVs with specific names (ID’s and/or classes) and find the corresponding information on the style sheet. It’s important to switch back and forth between code, CSS and design view(s); it makes it much easier to see what’s going on and how things are happening. You can experiment by changing values in the CSS like width settings and see how things change on the HTML. It’s all up to you to play around with different settings until you feel comfortable with it.
One, two or three column(s)?
There are many different ways of laying content out on a page. Some people want one column, some want two, and some want an unlimited amount. They won’t stop until they are content that they have a separate column for every different piece of information on their site. However you like it, there are ways to archive it. Bluerobot contains some excellent examples and detailed explanation of various layout types.
