Wordpress:
Step By Step

A step-by-step guide for transforming your HTML into a Wordpress Theme.

Setup


Get Ready!

Setup HTML

Style.CSS

Look at your HTML files. Make a file named "style.css" in the root of your project.

Setup HTML

The top of your "style.css" file must include the following commented information:

					/*
					Theme Name: Blog Name
					Description: A simple photo blog
					Version: 1.0
					Author: Chris Castiglione
					Author URI: http://yourwebsite.com
					*/
					

So that should look like this in your file...

Setup HTML

This is what registers your theme in WP.

ScreenShot

You'll need a screenshot.png of exactly 300x225 in the root of your project.

screenshot

Feel free to use this one.

Change ".html" files to ".php"

"index.html" must be changed to "index.php"

Theme

Activate the Theme

Upload all of that in your themes folder on your server.

Theme

And then go to your admin panel: www.yourdomain.com/wp-admin

In Appearance->themes you should see your theme.

"Activate" it. If there's a problem and you don't see your theme, you haven't followed the steps above correctly, so review and try again.

Theme

wp_head();

Put wp_head(); right before the closing </head> tag. Like this:

<?php wp_head(); ?>
</head>

This tag is used by many plug-ins to insert code into your head

wp_footer();

Put wp_footer(); right before the closing </body> tag. Like this:

<?php wp_footer(); ?>
</body>

This tag is used by many plug-ins to insert code into your head

MORE: Don't like the new admin bar that appears with this step?

Add this to your functions.php

add_filter('show_admin_bar', '__return_false');

body_class();

Add the body_class(); on the open <body> tag. Like this:

<body <?php body_class(); ?>>

This will be helpful, as it generates lots of class helper classes for CSS styling later on

bloginfo()

Replace Content with appropriate bloginfo() tags

For example, all of your CSS needs to be prepended with:

<?php bloginfo('template_directory');?>

...like this:



<link href="<?php bloginfo('template_directory'); ?>/css/main.css" rel="stylesheet">

Replace your 'name' and 'description' too! Need help with that? Time to start reading the Wordpress Codex

header.php / footer.php

Divide your index.php into header.php and footer.php

Header.php / Footer.php

Here's what you'll do. Take the code from your index.php and refactor it into 3 sections:

Header.php / Footer.php

Check out the code. Some of it is hidden, but you get the idea:

Header.php / Footer.php

In index.php use this include tag at the top

get_header();

And this one at the bottom

get_footer();

sidebar.php

Simliar to header.php & footer.php you want to remove your HTML sidebar code, and put it in a file named sidebar.php

Then call the sidebar.php file using the snippet:

<?php get_sidebar(); ?>

Note: if your site doesn't have a sidebar, you don't need to do this


The Loop


Install The Loop

Put your content inside "The Loop". This is where the magic happens.

This goes before the area you want to loop:

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

And this goes after:

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Check it out in action:

The Loop Wordpress

Loop Specific Template Tags

Some tags are only work inside the loop. For sure you'll want things like:

<?php the_title(); ?>
<?php the_content();?>
<?php the_excerpt();?>
<?php the_category(' ');?>
<?php the_author(' ');?>
<?php the_time('l, F jS, Y')?>

This is a great one for adding a quick edit button (only seen by logged in users):

<?php edit_post_link(__('Edit This Post'));?>

More info on the date function is here

CSS Hacking At Your Theme

A finished example of where you're at may look something like this:

The Loop Wordpress

You'll want these tags:

<?php the_ID()?>
<?php post_class()?>

...to be in your opening "div" classes and IDs. So that the full line reads:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

See the image above if you're confused with WHERE to put this.


WHY? did we do this....

Because it changes the output of our "div" from the static...

Post ID Wordpress

To the dynamic IDs and classes

Post ID Wordpress

Which means (get excited) that you can target each individual post now with CSS/JS. A super basic CSS example might read:

#category-cat-photos { background: yellow; }

And now every post you put in the "cat-photos" category will have a yellow background.

I'm keeping the example simple, but this shows the level of CSS/JS customization you have over every element.

Check your web inspector to make sure you can see this worked correctly!

Permalinks

Use the_permalink(); to link to other pages in your site

The tag looks like this:

<php the_permalink();?>

An example use case would be every blog heading's "href":

			 			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			 		

Categories

At any point you can view a page with just posts in a particular category.

For example, if you have a category "cat-photos" you can go to:

www.yourdomain.com/category/cat-photos/

And if you'd like, go ahead and add that to your navigation. Just go back in the dashboard and look at: APPEARANCE->MENUS


Themeing


Template Hierarchy

At this point. Maybe you want to make a PAGE that is different from a POST?

Or you want ONE SPECIFIC PAGE look different than all the rest?

We can customize that! Lets give it a try...

MAKE a duplicate of "index.php" and rename it "single.php"


This is called Template Hierarchy... and it allows us to build our own template pages.

For example:

index.php - is the overall default single.php - the default "single" post template page.php - the default page template page-about-us.php - the default for a "page" with a slug of "about-us"

On a normal small site you may only need page.php

Page.php

Then, if you need more functionality, you can add as many templates as you want. Targeting each "slug"

Page-slug.php

Comments

Want comments? Add this line to single.php where ever you'd like to see comments appear. (Note: This goes outside of The Loop)

<?comments_template( '', true );;?>

I'm not going to lie, comments can sometimes be a pain to style. Sometimes you may need to do some serious CSS work to make them look better.

functions.php

Create a blank "functions.php" file (or use a previous "functions.php" if you have one from another project)

Functions.php

Functions.php - this file loads everytime you load a page on your site. It's like a helper brain that Wordpress consults.

By default you don't need it. And in that case Wordpress just goes about its business. But if we'd like to add some commands we can highly customize Wordpress.

For beginners without much PHP experience, the functions.php file will be very confusing, as we can only write PHP code in here.

Therefore, I've tried to explain best I can how to do the basic necessary customizations. Beyond this, I'd suggest learning more about PHP Functions and Wordpress

For now, create it, but keep it blank if you don't know what to do.

Sidebar Widgets

Familiarize yourself with the sidebar: Customizing Your Sidebar

The FIRST thing is to Register Your Sidebar by adding this line somewhere in your functions.php file:

register_sidebars();

And then SECOND put this code in sidebar.php to print out your sidebar

<?php if ( ! dynamic_sidebar() ) : ?>

<?php endif; ?>

Sidebar Themeing!

If you want to customize sidebars we'll need our code to look like this:

Sidebars Multiple

Notice how the "li" in functions.php is responsible for the output of the "li" in sidebar.php (see below). Cool!

Register Sidebar

Now...the thing is, the CSS we have in our HTML theme (from before Step #1) might not match the WP output. Ewww.

We have two options:

Change the the "li" tags to "div", change the "h1" tags to "h3"

Register Sidebar

And then our output changes!

Register Sidebar

That's Wordpress themeing! Tweaking your CSS, tweaking your WP output. This extends to navigation, plug-ins, and all other customizations.

Btw, here's that added snippet of code:

<?php if ( ! dynamic_sidebar( 'Sidebar Cat Blog 1' ) ) : ?>

<?php endif; ?>

Multiple Sidebars

If you want multiple sidebars, just copy the code like this.

Register Sidebar

Make sure to give the "name" and "id" a unique name.

If you feel like you're just hacking away and you don't really understand why this is working? It's probably time to check in and read the sidebar documentation. Raise your hand AFTER you've actually read this, and played around.

If you're stuck I'll come explain.

Navigation Menu

The navigation setup is similar to the sidebar. First we need to register the menu in functions.php

register_nav_menu('main', 'Main navigation menu');

That setups the menu in your Wordpress admin panel

Navigation

And second we print out the navigation in our template where ever you'd like to place your navigation

<?php wp_nav_menu( $args );?>

If you wanted to customize this more?

Let's say, wrap this in a "nav" container...

<?php wp_nav_menu(array('container' => 'nav') );?>

Or just leave it blank to remove the container...

<?php wp_nav_menu(array('container' => '') );?>

Advanced


Customizing The Loop: WP_QUERY

There are a few different ways to customize the output of The Loop. One of the most powerful ways is with WP_QUERY.

Let's Say... that you wanted to customize the homepage so that:

Simple. We just replace the standard Loop with WP_QUERY. So instead it starts with...

<?php
$custom_query = new WP_Query('cat=-5&showposts=1&paged='.$paged);
while($custom_query->have_posts()) : $custom_query->the_post();
?>

And ends with

<?php
endwhile;
next_posts_link('&laquo; Older Entries');
previous_posts_link('Newer Entries &raquo;');
wp_reset_postdata(); // reset the query
?>

Yes, you delete the other loop all together (just on the page you want to affect) and replace it with WP_QUERY. Check out what it looks like in action...

Wordpress IDs are everywhere

In this scenario "cat=-5" means don't show cateogry ID5, and show only 1 post on this page

It's time to read the Codex for WP_QUERY to find out more. This thing is very powerful for customization.

Categories & Beyond

It's important to understand that EVERYTING has an ID and a SLUG. Posts, pages, tags, categories, EVERYTHING. This is just extra meta-data about the thing. Sometimes it can be tricky to find. See here how I found the category ID:

Wordpress IDs are everywhere

Being able to locate these IDs (and/or slugs), you'll have a lot of extra themeing control.

Remember the page we looked at here:

www.yourdomain.com/category/cat-photos/

How would we customize only this page?

Simple, by duplicating "index.php" and renaming it "category-cat-photos.php"you have complete control of the code that appears

Custom Post Types

Let's say you need more functionality beyond POSTS and PAGES.

You're building a CMS and (for example) you want a PRODUCTS page. This would be considered a "custom post type".

Wordpress IDs are everywhere

We can create Custom Post Types manually in the functions.php

But to be honest, the Custom Post Type UI plug-in kicks ass and might just save you a ton of time! Give it a try.

Custom Fields

...AND THEN, you realize you want more fields than the typical Title/Content/Date setup.

For example, you want to include a field for only an IMAGE, PRICE and Purchase URL.

Advanced Custom Themes by Elliot Condon

These are custom fields

Just use the Advanced Custom Fields plug-in. It's my favorite WP plug-in in the world. I love it.


Btw.. if you're curious how the "Ingredients" tagging works in the image above? That's called a custom taxonomy which can be done easily with the Custom Post Type UI (seen above already).

Plug-ins You'll Want


Download a completed example demo



Leave A Comment