WordPress Customization

A. Introduction To WordPress

Site: http://wordpress.org/

Description

“WordPress is a state-of-the-art semantic personal publishing platform with a focus on aesthetics, web standards, and usability. What a mouthful. WordPress is both free and priceless at the same time. More simply, WordPress is what you use when you want to work with your blogging software, not fight it.”

Benefits

• Easy to use back end for writing content and making other dynamic changes to your site.
• Simple setup, anyone with a little bit of server experience can install it.
• Themes and Plugins are numerous and mostly free.
• Easy to build your own theme or customize an existing one.
• Uses standard/free web server technologies: PHP & MySQL.

Using WordPress

1. Login to the administration features by going to: http://<your blogurl>/wp-admin/
2. To write a post click on the “Write” tab. You can write in a visual editor or you can write straight HTML. I recommend learning HTML and editing pages in it, you’re posts will come out a lot better and be easier to modify later. Choose your editor under My Profile -> “Use visual editor when writing”. If you have a normal sized monitor you may also want to turn up the number of lines you can see at once in the editor at: Options -> Writing -> “Size of the post box”, I recommend setting it to about 30 lines instead of 20.
   
3. General options for your blog are under: Options -> General.
   
4. An important option is: Permalinks. These determine the directory structure of your blog. You probably want to change it from default to custom with structure of something like: “/%category%/%postname%/”. This will help your site rank in Google and other search engines. %category% will be the category you choose for your post. Warning: For SEO optimization give each post only one category. If you use multiple categories Google will find your post in multiple locations and may discard it as duplicate content. Your %postname% comes from the “Post slug” field on the post writing screen. It will default to your post title but you can change it to anything you want, just make sure that it’s something that will be valid as a url (no spaces or weird characters). For example if we categorized our post as “Awesome” and made a slug of “this-is-the-most-awesome-slug” it would show up on our blog at /awesome/this-is-the-most-awesome-slug/ which would rank well in Google for phrases like “awesome slug”.
5. Your theme is chosen under Presentation -> Theme
   

B. WordPress Themes

Almost everything about Wordpress can be customized through your theme. Themes are where WordPress really starts to shine. Here are a few example themes:



You can browse and download thousands of themes from:
http://themes.wordpress.net/

How do I install a new theme?
Your themes are located in a subdirectory of your WordPress installation: <your WordPress installation directory>/wp-content/themes/. Each theme has it’s own directory, which is the name of theme. You’ll always start out with a
theme called “default” which is the standard WordPress theme. To add a new theme download the zip file for the theme and unzip it into your /wp-content/themes/ directory. That’s it! You should now see the new theme under the Presentation -> Theme tab in the administration back end.

C. Structure Of A WordPress Theme

Theme Templates

There are a couple different types of pages in WordPress. Each type of page can have a customized look and feel. This customization is done by templates. Templates are how themes work. Each template is a seperate PHP file inside the theme’s directory. Here are the standard templates:

• 404 Template = 404.php – It’s handy to create a custom 404 page (Page Not Found) template. You can list common links and ways for users to find what they are looking for.
• Archive Template = archive.php
• Archive Index Page = archives.php
• Comments Template = comments.php – This template defines how comments look under individual posts on the “Post Template”.
• Footer Template = footer.php – HTML that is placed at the bottom of each page, saves you time and produces less duplicate HTML code in your templates.
• Header Template = header.php – HTML that is placed at the top of each page, usually has the <head> section in it.
• Links = links.php
• Main Template = index.php – Usually this page lists your most recent posts. This is the “home” page of your site.
• Page Template = page.php – Used for single pages, instead of blog posts. Your “About” page uses this template. This is the default page template, you can make your own custom page templates. I’ll cover this more in detail later.
• Popup Comments Template = comments-popup.php
• Post Template = single.php – This is where you customize pages that display single posts. Click on a post title (permalink) and you will be at it’s single post page using the post template.
• Search Form = searchform.php
• Search Template = search.php
• Sidebar Template = sidebar.php – Usually the right hand side bar of the page. Some themes have more than one side bar so you’ll see templates like left_sidebar.php.
• Stylesheet = style.css – Default place to put your CSS. It also contains the name and description of the theme. You must always have this file with the name and description of your theme. Many themes will have multiple CSS files that are linked to from the header.php file or the individual page templates to customize individual pages with different style rules.

D. Making Your New Theme

1. Find a theme you want to base your new theme off of. A good place to start is the default theme, but you may also want to just tweak another theme that’s closer to the look/feel you are going for.
2. Copy the existing theme to a new directory in your themes directory for example if I was making a theme called “webdesign_meetup” I might copy the “default” directory into a new directory called “webdesign_meetup”.
3. In your new theme directory edit the style.css file. You should see something
   like this in that file:
   /*
   Theme Name: WordPress Default
   Theme URI: http://wordpress.org/
   Description: The default WordPress theme based on the famous Kubrick.
   Version: 1.6
   Author: Michael Heilemann
   Author URI: http://binarybonsai.com/
   */
4. Edit the theme information. This is the information that will show up under Presentation -> Theme in the administrator.
5. Go into the WordPress administrator and change your current them to the new one you just created.
6. Now you can start customizing and see the affects in real time on your site!

E. Modifying The Header

The first thing you might want to do when customizing your theme is change the header. Most sites have a custom header image, usually a company logo or a picture that has to do with the theme of your site. To edit the header just go into your theme directory and edit the header.php file. The header HTML will usually be stored in this file. In some more rare cases theme authors may have placed header information in the individual page templates (if they did you’ll have to hunt around a bit more!). You’ll usually see a piece of HTML under the opening <body> tag that’s something like lt;div id=”header”>…header content…</div>. You can customize this content with your new header.

F. Blog / Post Templates

Maybe you want to display an ad at the bottom of each post, or perhaps you’d like to add or remove the author information under the post header? The place to do these things is in the single.php file. This file controls the layout of your individual post pages.

Let’s examine the components of this file for the default WordPress theme:

<?php get_header();
?>

<div id=”content”
class=”widecolumn”>



        <?php
if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”navigation”>

    <div
class=”alignleft”><?php previous_post_link(‘&laquo; %link’)
?></div>

    <div
class=”alignright”><?php next_post_link(‘%link &raquo;’)
?></div>

</div>

<div
class=”entry”>

    <?php the_content(‘<p
class=”serif”>Read the rest of this entry &raquo;</p>’);
?>

So how do I add some author information and maybe date of the post to this?
It’s easy! There’s a lot of information stored with each post that is accessible within “The Loop”. To see a list of all the functions you can use to get at this information visit this documentation page: http://codex.wordpress.org/Template_Tags. There you’ll see all the template functions that are available to you. So to get the author of the post we’d just call the_author();. Of course we’d want to put some HTML formating around it so we might do:

Now to put the date the post was written we could put:

<?php the_date(‘Y-m-d’,
‘<h2>Published On ‘, ‘</h2>’); ?>

There are tons of stuff you can do with posts so check out: http://codex.wordpress.org/Template_Tags and get started.

G. The Post Loop

So you want a custom loop? The loop is powered off of the current page query. The query is generated by WordPress, typically from your URL. So if your on your site and your at /category1/a-blog-post-with-id-12 the query to get blog post id 12 in category 1. The internal mechanics of how this happens are fairly complex, so we won’t go into them. It’s enough to know that each page has a query generated for it that will grab the correct content for that page. So if you want to customize your loop and grab something besides what WordPress would do by default you need to modify the query before you call your loop.

Let’s say you want to put just the 3 most recent blog posts on a page, maybe under some other content. On my site the home page has static content and then displays some recent blog posts. Here’s how you do it:

<?php query_posts(“showposts=3″);
?>

This does a new query to grab the 3 most recent posts to the blog. I can then display these posts in a normal loop:

<?php if (have_posts()) {
?>

    <h3>Recent
News</h3>

    <?php while (have_posts()) :
the_post(); ?>

        <div
class=”blog_post”>

       
    <?php the_content();
?>

       
</div>

    <?php endwhile;
?>

<?php } ?>

There are almost infinite ways you can write queries to get the posts you want for your loop. Visit these two pages for more information:

http://codex.wordpress.org/The_Loop
http://codex.wordpress.org/Function_Reference/WP_Query

H. Page Templates

Page templates are used to format specific pages. For example if you want your About page to have a specific template you can assign it a page template. Posts can not have templates, only pages (under Write -> Write Page). To start a new page create a new php file, for example we could call our new file about_us.php. In the file put this code at the top:
<?php

/*

Template Name: About
Us

*/

?>
WordPress will see this file as a page template and will display it in the list of page templates you choose from when you are editing a page. To create a page in the admin interface go to Write -> Write Page. Then on the right side bar you can pick a custom page template. Pick your new “About Us” template.

You probably want a number of standard template elements on your custom page template. Here’s a good framework to start you template with:

The loop on your page template will by default grab the content your write for your page in the admin interface.

I. Sidebars

Most templates have one or sidebars. Sidebars usually contain navigational links, but they can also include search boxes, lists of related pages, and other widgets (like mybloglog etc.). It’s really easy to edit your sidebars. Just find the sidebar.php file and open it your editor. You’ll see the HTML that creates the side bar and puts the content within it. There are a few template functions that are helpful within the sidebar like wp_get_archives(); which will display a list of time periods that you wrote blog posts (think August (8), September (2) which are links to those months posts). Most sidebar functions are meant to be placed within <ul></ul> tags because they format their output as lists. So in your side bar you might have this code:

This code would generate two lists, one of archive months, and one of categories you have posted under.

You can find more of these functions at:
http://codex.wordpress.org/Template_Tags

J. Meta Data / Custom Fields For Page Customization

Meta data can be added to any blog post or page. It’s located under the edit box on the Write Post and Write Page sections of the admin interface. Look for the section called “Custom Fields”, that’s your post meta data. Each piece of meta data has a key and a value. You can use meta data to store almost anything, and you can retrieve it within the page using some template functions/tags. Here some code I use so that each page can have a custom title, description, keywords, and style rules. This code is placed within my <head></head> tags in my header.php file:

The first section of the code loads the meta data. For example to get the title meta data I call $title = get_post_meta($wp_query->post->ID, “title”, true);. I can then use the $title variable within my code to display the title information I retrieved. The styles meta data I retrieve is a little
more complex because it is grabbing an array of styles. So if there are more than one meta data elements with the title “style” I will get all these styles within one array. The last parameter of get_post_meta determines if an array is to be returned or just single value. I loop through the array and display each style using this code: <?php foreach ($styles as $s) echo $s . “\n”; ?>.