Setup

Get Ready!

You installed Wordpress
You have an HTML/CSS/JS template ready to go.
If you don't have a template, feel free to use the demo and follow along

Style.CSS

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

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...

This is what registers your theme in WP.

ScreenShot

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

Feel free to use this one.

Change ".html" files to ".php"

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

Activate the Theme

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

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.

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

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

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

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:

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:

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...

To the dynamic IDs and classes

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>

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

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

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

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

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:

Either, edit our style.css to match the WP theme output
OR edit our WP/HTML output to match the CSS we already wrote
...or a combination of the two!

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

And then our output changes!

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.

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.

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:

NO posts from the category "cat-photos" would ever show and...
ONLY one post will show at a time

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...

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:

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".

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.

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

Akismet - avoid comment spam
W3 Total Cache - cache, so that your site runs quicker
DB Manager - backup your DB
VaultPress ($15) - advanced backups

Wordpress:
Step By Step

Setup

Get Ready!

Style.CSS

ScreenShot

Change ".html" files to ".php"

Activate the Theme

wp_head();

wp_footer();

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

body_class();

bloginfo()

header.php / footer.php

sidebar.php

The Loop

Install The Loop

Loop Specific Template Tags

CSS Hacking At Your Theme

Permalinks

Categories

Themeing

Template Hierarchy

Comments

functions.php

Sidebar Widgets

Sidebar Themeing!

Multiple Sidebars

Navigation Menu

Advanced

Customizing The Loop: WP_QUERY

Categories & Beyond

Custom Post Types

Custom Fields

Plug-ins You'll Want

Leave A Comment

Wordpress:Step By Step

Setup

Get Ready!

Style.CSS

ScreenShot

Change ".html" files to ".php"

Activate the Theme

wp_head();

wp_footer();

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

body_class();

bloginfo()

header.php / footer.php

sidebar.php

The Loop

Install The Loop

Loop Specific Template Tags

CSS Hacking At Your Theme

Permalinks

Categories

Themeing

Template Hierarchy

Comments

functions.php

Sidebar Widgets

Sidebar Themeing!

Multiple Sidebars

Navigation Menu

Advanced

Customizing The Loop: WP_QUERY

Categories & Beyond

Custom Post Types

Custom Fields

Plug-ins You'll Want

Leave A Comment

Wordpress:
Step By Step