How To: Customize Your Wordpress Site

This post assumes that you are already a web designer
and know basic HTML and CSS.

In This Post:

Getting Started

Grab a domain and hosting. I recommend this* web hosting (their name is actually “this*”).
Download the latest release of Wordpress and upload it to your hosting server.
Note: If your host uses cpanel, you probably have access to Fantastico or Simple Scripts which allows you to easily install Wordpress. Check for this first because it will be much faster to install this way.

Free Wordpress Themes

I highly recommend finding a free theme that is similar in layout to your ideal design. That way you don’t have to completely learn how to code a Wordpress site, but rather modify the design to your liking. If nothing else, viewing the free theme galleries may inspire you to consider a theme function that you hadn’t thought about before.

The two themes I combined for my site were:

Satorii - the main base structure for my site
OmegaX 1.0.3 – the base structure for footer sidebar and copyright area

The mother of all design resources, Smashing Magazine, has compiled several lists of free and amazing Wordpress themes. Some of them are:

Installing a Theme

To install your chosen theme, upload the ENTIRE theme folder to this path on your web server: wp-content/themes

Create a Custom Index Page

Especially if you are using Wordpress for a website where blogging is a secondary function, you should customize the index page.

You can design and create a plain HTML and CSS document just as you would for any other website. However, once that is done, you will need to break it up into the header, main index, and footer php files.

Nick La at Web Designer Wall has a great article showing how this is done. Find it here.

If you have not set up a testing server, such as Mr. La describes in this post, you will be editing those pieces from the Editor on your online Wordpress home. This is done by going to Appearance>Editor, and then clicking on the files and copying/pasting the parts you want to replace. Be careful not to delete the <php> scripts!

Correct Image Linking

If you are doing your editing online, then the images you have included in your header/index/footer files will need to have their file paths updated. Here’s how:

Upload your “images” folder into the main theme folder.

For each image used, correct the file path as follows:

<img src="<?php bloginfo('template_directory')?>/images/logo.png" />

If this is not working, double-check that you have the backslash after the php code – “/images”

The Wordpress Loop

The Wordpress Loop is the essence of Wordpress blogs. It is the php script set that actually displays the posts. The HTML and PHP designated within the loop will be used for each post. To really understand the loop, here is the documentation page on the Wordpress Codex.

There can be multiple loops per page. This is necessary when you want to retrieve different types of posts or post information.

<?php if (have_posts()) : ?>
     <?php while (have_posts()) : the_post(); ?>
               <!-- do stuff ... -->
               <?php endwhile; ?>
<?php endif; ?>

The “do stuff” area is where you place any HTML or PHP you want to be shown for each post.

You can limit the query of the posts to a specific category or custom field name, as explained next.

Custom Fields

Custom fields allow even greater, well, customization of each post. You can add things like thumbnails, meta data, or even CSS stylesheets. These are designated when you write a new post and only apply to that post.

ThinkDoBeCreate uses custom fields on the home page to pull the latest blog post and link to the client spotlight. The benefit of using custom fields is that these areas are updated immediately without having to manually edit those links every time I have a new post.

This post from Perishable Press was a great help when I set out to learn about custom fields.

The custom fields have to be used inside the loop. I will show you the code for my blog link on the home, then we’ll break it down.

<div id="blog">
<?php query_posts('showposts=1&cat=4'); ?>
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>"><img src="<?php echo get_post_meta($post->ID, 'blog', true); ?>" alt="<?php the_title(); ?>" /></a>
<?php endwhile; endif; ?>
</div>

The <div> is of course just the designated area where this post should show up.
The second line,
```
<?php query_posts('showposts=1&cat=4'); ?>
```
means to limit the loop’s display of posts to showing one post in category 4
The third line begins the basic loop.
The fourth line is where we bring in our custom field. In this instance, I am using the custom field designation to pull a thumbnail. I want this thumbnail to be linked the corresponding post. So,
```
<a href="<?php the_permalink() ?>">
```
provides the link to the appropriate post. Then, for the img src,
```
<img src="<?php echo get_post_meta($post->ID, 'blog', true); ?>"
```
means that it should come from the custom field ‘blog’.
The fifth and sixth line close the loop and the div.

Designate Custom Field Within A Post

When you are writing a new post, the area “Custom Fields” below the writing WYSIWYG area is where you need to go. For the example above, you would type “blog” for the name, and put the URL of the uploaded image file for the value.

Done!

Create Unique Page & Category Templates

Now that you understand creating a custom index page, and how to use the loop, you may want to present more customized page and category templates.

Page Templates

These are useful for applying unique CSS to specific pages, or to display distinct features such as a slideshow.

First, you need to copy the theme file “page.php” and rename it to your desired template name, such as “portfolio.php”. At the very top of your new file, put the following code:

<?php
/*
Template Name: Portfolio
*/
?>

You can then modify other areas inside the loop to make this page unique. To use this template for your page, you will have the option to select it when you add a new page. This are appears to the right of the WYSIWYG writing area in a drop-down menu.

Category Templates

My theme makes heavy use of category templates. There is one for my blog posts, one for clients, and one for my overall portfolio. Within the portfolio category is a breakdown into identity, illustration, interactive, and print.

While categories will display on a unique page by default, you may want to futher customize how posts in a specific category appear. For instance, I do not want the date published with my portfolio pieces, but I do want it on my blog posts. I also added the custom field of “Client” to my portfolio pieces, but obviously don’t want it on my blog posts.

First, find the category number. To do this, go to Posts>Categories, and then hover your cursor over the name of the category you want to work with. The category number will be displayed at the end of the URL which will display in your browser’s status bar at the bottom of the window.
Then, resave the file category.php as “category-3.php” where “3″ corresponds to the category page you are customizing. Just saving it this way automatically tells Wordpress to use this template when the category 3 page is viewed without you having to designate it anywhere else.
Now you can edit the category-3.php page any way you like.

Links to social sites, such as facebook and twitter, are almost a necessity these days. Luckily, it’s really easy to insert your own set of custom icons with the appropriate linking syntax in your posts so your guests can easily share your awesomeness with all their friends!

Places to Find Icons

Icon Finder – icon search engine
Smashing Magazine – all posts SM has tagged “icon”
Web Design Ledger – several free social media icon sets

Insert Icons For Every Individual Post

Download or create your desired icons and upload to your theme’s “images” folder.
Go to: Appearance>Editor and open single.php, which is the default template for displaying a single post.
Create a div to hold your icons. You will likely want to place it either directly before or directly after the line:
```
<?php the_content() ?>
```

Each sharing site has a slightly different way to direct sharing links. Here is an example for my Twitter sharing icon:

<a title="Click to Tweet This!" href="http://twitter.com/home?status=Enjoyed:
&lt;?php the_permalink(); ?&gt;" target="_blank">
<img src="&lt;?php bloginfo('template_directory')?&gt;/images/ticon.png" alt="" /></a>

This code means that when your designated Twitter icon is clicked, it will open a new window/tab to twitter.com and input “Enjoyed: http://yoursite.com/blog-post-title” into the status field.
To customize this code, you can change “Enjoyed:” to a different phrase. You would also change the image name to your own image name.
For more sharing codes, visit this great article by anidan.design. Note: Her article is for text links, not image links.

Recommended Plugins

Plugins are the lifeblood of Wordpress sites. They are third-party scripts that add amazing extra functionality. They are easy to implement, and usually require little extra work on your part to activate them.

Contact Form 7 – definitely one of the best contact form plugin around. Allows for great customization of the look and feel of the form. Form fields are handled in the backend of the plugin and are inserted into posts via a shortcode customized to each form. Great documentation for total customization can be found on the main plugin site.
WP Post Thumbnail - lets you pre-define 3 thumbnail sizes which you then upload via the interface located below the WYSIWYG area of each post and then crop to the correct size. The thumbnail is then attached to a custom field which can be called anywhere in your theme. I use this plugin to easily grab and crop my thumbnails for use in my featured slider, blog, and client spotlight areas on my home page.
WP-Table Reloaded – also called using a shortcode and managed in the plugin backend. Easily customize via CSS. Supports row highlighting. Great documentation included on the plugin homepage. I use this plugin for the table on my services page.