///WordPress Customization

WordPress Customization

Introduction To WordPress

Wordpress Default Theme

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.
    Write A Post In HTML
  3. General options for your blog are under: Options -> General.
    General WordPress Blog Options
  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
    Choose WordPress Theme

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:
Bluedog Theme Screenshot
ismart Theme Screenshot
Newstart Theme Screenshot
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.

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.

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!

Modifying The Header

Wordpress Header Example

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.

Blog / Post Templates

Single Post Example

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();
?>

This just calls your header.php
template. It’s nice to use your header.php file to display all the
common header HTML code for all your pages. That way you can avoid
writing the same <head>…</head> and beginning <body>…
content over and over.

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




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

Here is where we start “The Loop”. In
WordPress each page normally has a “loop” on it that cycles through the
content that should be displayed on that page. In our single.php
template there would normally just be one “post”, which means the loop
would just execute once to display that one post. The if (have_posts()) code first checks to see if we have a post to display, then the while (have_posts()) loops through each of the posts, the_post(); simply
prepares the post for display. Most pages will have this same loop code
on them. WordPress takes care of deciding what posts should go on which
pages in most instances. Occasionally you’ll want to customize what
posts are displayed within the loop, but we’ll cover that in a second.


<div class=”navigation”>

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


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


</div>

Here the template is laying out some
basic navigation that allows the user to move between blog posts. The
previous_post_link() function places a <a href=”..”> tag that if
clicked will navigate the user to the previous post in the blog. The
next_post_link() is very similar.

<div
class=”entry”>


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

This code displays the actual post content (the content that you created under the “Writing” tab in the admin interface). The the_content(); function
displays the HTML for the current “post” within “The Loop”. The
argument within the function “…Read the rest of this entry…” is text
that will be displayed in a <a href></a> tag at the end of
the content if the content spans more than one page.

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:


<p>This post was written by <?php
the_author(); ?></p>

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.

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 } ?>

Loop Example 3 Posts

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

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.

Choose Page 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:

Page Template Code

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

Sidebars

Wordpress Sidebar Example

 

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:

Sidebar 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

Meta Data / Custom Fields For Page Customization

Edit Meta Data

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:

Meta Customization Code

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”; ?>.

2010-05-25T22:45:05+00:00 January 9th, 2008|WordPress|0 Comments

About the Author:

Justin is the chief software architect for MerchantOS, a company that provides web based point of sale and inventory control to small retailers.

Leave A Comment