When I was taking my journalism classes in college, I haaaated AP Style.  For the record, I do not pretend to be a good writer at all.  In fact, I’m barely passable.

I wrote some pretty damn good stories in college but lost many grade points because of AP Style errors.  AP Style became the focus of my hatred for print media.  I enjoy reading print stories, but knew it would never be my profession.

Now that blogs, Twitter, and Facebook lead American news dissemination, how much does strict AP conformity really matter?

Not at all

There is an argument to be made that journalists should be taught both.  I can’t really disagree. However, that’s nearly impossible for many of us.

Most people have the capacity to learn one, maybe two writing styles, and actually be good at them.  Your first is the everyday email style of writing.  That’s really what I would consider most of my blogging; halfway decent streams of thought.

Second would be your more formal article style writing.  Straight forward and clear, but not worrying much about AP Style.

Then there is this third category of New York Times style.  The apex AP Style.  

Writing for SEO is an art just like AP Style

Assuming that the brain typically has the capacity to handle only a couple of writing styles, (casual and formal) where’s the room for AP and SEO?

If you are not the type to focus on things like SEO, let me just tell you that article writing for SEO is an art form that is just as hard to master as AP Style.  It takes a lot of time and effort to even become remotely successful at SEO.

SEO is far more important to learn today than AP.  SEO is what will help get you that first job, and earn you that first promotion because of all your ninja SEO skills.

If I had to cut classes due to a lack of patience and frustration, I would cut the AP Style course.  AP can be learned later in life.  There’s no learning curve or shelf life to worry about.  The AP Style hardly ever makes significant changes to their overall spec.

SEO strategies and best practices change multiple times a week.  Journalists must learn SEO today to stay on top of their game.

Choosing the better of the two evils

If you are registering for classes and only have room for one course, choose the SEO class with the geeks.  It will pay off sooner than the AP Style class full of media elitists.  And remember, you can always learn AP later.

Lastly, and most importantly, don’t forget to hire me when you see my resume cross your desk.

This year, I was asked to speak about the importance of web analytics platforms.  One of my sessions featured my Top 10 web analytics platforms that I believe everyone should know.

The Top 10 Web Analytics Platforms are in no particular order.  Also, it is important to note that I do not think that you should use all of them.  Instead, you should pick your favorites, and go with it.  But make sure you know a little about all of them.

#1 – Google Analytics

google.com/analytics

Shockingly obvious, yes.  However, the analytics beginner may not fully appreciate the power of this platform since it is ubiquitous to the industry.  This fall, we saw GA release realtime analytics (finally!).  Realtime analysis makes the platform more appealing to “newsroom” style publishers.

#2 – GetClicky

getclicky.com

Still my favorite all around analytics platform.  I’ve used it for years, and it has never let me down.  GetClicky has offered realtime analytics since virtually day one.  The platform has continued to evolve including rich extensions such as an app for iPhone and iPad.  For “newsroom” applications, they have released a big screen mode that basically takes over the full screen of your machine with realtime site traffic.  Also has a robust solution for advertising and marketing tracking with no-fuss reporting.  

#3 – Chartbeat

chartbeat.com

The undisputed leader in realtime traffic analytics.  Since its debut, Chartbeat showed the power of understanding how your content was being consumed at the very moment it is consumed.  With the release of Newsbeat (for newsrooms), Chartbeat positions itself squarely as the homepage of digital news directors everywhere.  No other platform will help you to make data driven changes to your group of lead stories like Chartbeat can.  A must for news, gossip, and “immediacy” focused content publishers.

#4 – Klout

klout.com

Today’s digital ninjas need to go beyond the data provided by their owned and operated domains.  Understanding you and your brands social influence is critical for successful digital professionals.  Klout will help you understand, track, and grow your digital influence in any number of categories.  Anyone with a Twitter, Facebook, LinkedIn, or Four Square account has a Klout Score.  At the time of this posting, mine is a healthy 48 (of 100). One of the most impressive social media products launched to date.

#5 – Quantcast

quantcast.com

In keeping with the natural evolution of digital data geeks everywhere, you want to know how your site ranks compared to its peers.  Quantcast acts as one of the Internet’s premier “freemium” ratings and ranking services.  All sites with statistically significant traffic find their way into the Quantcast database.  Proactive webmasters can place a free Quantcast script on their site to allow direct measurement.  In addition to tracking and publicly reporting your site’s overall reach, Quantcast breaks your traffic down demographically and geographically.  Publishers can quickly and easily see what mix of gender, race, incomes, and education levels visit their sites.  And so can potential advertisers.

#6 – Compete

Compete.com

At its core, Compete is similar to Quantcast in its tracking and audience aggregation methodology.  However, it focuses more on being a resource for advertisers to looking to target specific audiences with their ads.  Compete offers a suite of advertising planning tools to its customers that help evaluate overall campaign efficiency.  The focus is no surprise since it is owned by Kantar Media, the data geek nerve center for worldwide advertising conglomerate WPP.  Both Quantcast and Compete are important reference points for publishers because these are the tools that your advertisers (aka the ones keeping the lights on) use to evaluate your site.

#7 – Sitemeter

Sitemeter.com

Ahhh Sitemeter.  Ohh how those of us that have been in the industry since the dawn of blogging love you.  You were there for us when there was nothing else [free] available.  Sitemeter is one of the older free analytics services.  It offers a standard but thorough analytics dashboard that provides everything the startup publisher would ever need.  They also aggregate and rank publishers that use the service.  Your Sitemeter ranking used to be something that bloggers bragged about.  Those were the days…

#8 – Sprout Social

sproutsocial.com

As mentioned earlier, social media now finds its home in the wheelhouse of every serious publisher.  When publishing content, you must now understand how to market it in the social graph, and analyze what comes back.  In addition to providing a truly comprehensive suite of social publishing tools, Sprout Social also analyzes every aspect of every tweet and status update.  Keep track of every new follower, every retweet, and Facebook share with Sprout.  You’ll quickly be able to track what content you publish gets shared the most.  Before long, you’ll be a viral publishing machine.

#9 – SEO Moz

SEOMoz.org

Arguably the best one-stop-shop for every SEO tool you could ever need.  In addition to understanding visitor site traffic and social media, great publishers understand how the Google overlords view their content.  Publishing great content is the most important thing you will ever do in this game.  Sadly, that does not always bring the eyeballs.  SEO Moz will give you actionable advice on how to structure your site overall as well as analyze the Google-mojo of every content post.

#10 – comScore

comscore.com

It is with mixed emotions that we place comScore on this list.  For most publishers, comScore will never factor into their day-to-day activities directly.  However, it will be the bane of your career every time your advertising sales managers come down to your office to discuss this month’s comScore ranking.  comScore is the default advertising rating service that the vast majority of online marketers utilize.  With billions of dollars being spent advertising online, the industry needs a common set of benchmark evaluations.  comScore will rank your site’s traffic, reach, page views, and demographic makeup in order to provide a rating”.  Your site’s comScore profile will often mean the difference between gaining or losing advertisers.  Again, it will not factor into the day-to-day activities of publishing your content.  However, a positive comScore story can mean serious revenue wins.

That’s not all…

There are dozens of other great services that did not make this list.  By no means would I consider this list to mean anything other a grouping of services I have grown to respect, and in some cases, cannot live without.

If you feel I’ve made an egregious mistake by leaving a certain platform off of this list, please post it in the comments below.  Let’s start a discussion!

Eventually, they stop going because they are actually interested in the conference.  Instead they go for two things: validation and socializing.  That’s it.

We could skip the conference and business part and just get to the giant “prom” of geeky bloggers.

In the early days when people start getting into web publishing, they attend conferences to truly learn things and network with others.  Typically, I would go to learn more about a specific subject like layout, organic traffic, and advertising.

After a while though, you really have learned all you’ll ever learn at these conferences and trade shows (doesn’t take long!). But for whatever reason, you just keep going every year.

The shows become this weird annual reunion of otherwise strangers.  No one has any intention of actually working the show floor.  Maybe just to visit an old rep or seek out that hot new vendor.  If you’re smart, you know which vendors are having private parties or have drink tickets, and you become friends with them.  For free drinks, most will swim through the soup of trade show nerds.

None of the veterans have any plans of attending the conference sessions to see speakers other than those led by their blogger buddies.

The rest is just a giant get together.  People compare notes, bitch about Google/SEO, compare how big theirs is [traffic that is], etc.

For a lot of guys, these events are their only social outlets for the year.  It is only among these people that they feel important.

If you’ve read this far, I’m sorry.  I didn’t really have a point other than to make note of my observation.  Really, I’ve just noticed the quality of the events and quality of attendees really drop of in the last couple of years.  I believe this is why.

Photo credit.

If you’re a regular at BlogCraving, you know that we are huge WordPress fans. Guilty as charged.

However, we are constantly reminded why it is a superior publishing platform.

For example, 15% of the top 1 million sites on the web are powered by the WordPress platform.  At first glance, that sounds like a big fluffy number.  Stop for a second and take a look at the caliber of publishers using the platform, and you will see it is not all fluff.

Publishers using WordPress: NBC Sports, CNN, TED, TechCrunch (AOL), Time, Wall Street Journal, CBS Radio, CBS Local, and the LA Times…just to name a few.

Recently, WordPress also announced its Partners program for companies that want to build WordPress ready versions of their products into the WP platform.  The WordPress team then certifies these vendors as “partners” basically saying that the code is compliant with the WP core.

The fact that other digital and web companies are building specific instances of their products for the WordPress community says something about the scale and quality of WP.

Getting to Partner status with WordPress is no joke either.  Their developers run through every single line of code to make sure that there is nothing being committed that could endanger the health of a WP site.

WordPress FTW.

Source: Facebook.com

You officially have 29 days to prep your business’ Facebook page for the conversion to Timeline.  That’s right, Facebook has officially announced that current Pages will be converted to “Timeline” mode on March 30th.  No, the change is not optional.

Timeline has been controversial.  Ironically, there is a Facebook Page called “Facebook Timeline Sucks.”  Little do they know how goofy that will look in 4 weeks.

If you have a Facebook page for your blog, you have until the end of the month to preview, prepare, end edit your page for Timeline deployment.  If you are ready to go, you can even push it live ahead of time.  However, after March 30th, it will automatically switch to Timeline mode forever.

Love it or hate it, Timeline does offer Page owners some handy new features.

You will now be able to take advantage of the large “Cover Photo” across the top of the page that you see in personal profiles using Timeline today.

Messaging is finally coming to Pages.  In the current (old) version of Pages, users were unable to send the brand a private message like you can to real people.  Now, users will be able to communicate directly and privately with the Page/Brand.

In the new version, you will also be able to “Pin” things to the top of your page such as maps, events, calendars, etc. giving your page admin some more control over the organization of content.  Pinned posts will also appear a bit larger than the regular status update.

There will also be an enhancement made to the admin dashboard that shows additional usage statistics such as likes, unanswered comments, and other performance indicators all from one page.

Log into your Pages today and see how your brand Page will look in preview mode.  Then get to work!

A copy of the invitation sent by Apple to industry journalists teasing the release of the iPad 3.

Can you even stand the excitement?  I know while you found out about this at work, you wanted to run up and down the streets screaming with joy.  Well my friend, next week can’t come soon enough.  It is finally here.  The iPad 3 is officially on its way.

[sarcasm end]

After an especially lenghty round or rumor manufacturing, the buzz finally reached full speed today as Apple sent out invitations to join them in San Francisco on March 7th. Looking at the invitation, it looks like we can expect to see a hot new iPad for sure.

Also, the line in the invitation might double as 2012′s pickup line of the year.

We have something you really have to see.  And touch.

Apple’s will be new CEO Tim Cook’s first major product release since the passing of Steve Jobs.  The pressure will be high for Cook as everyone will naturally begin comparing his performance to the legendary Jobs.

Luckily, Apple has started to make a few moves to put a tiny bit of comfortable distance between that era of Apple and the future.  For example, Apple’s recent “Text Book” announcement happened in New York City instead of the greater Palo Alto area.

This very announcement was rumored to also occur in NYC (but will be in San Francisco).

Cook has proven that he has no problem handling the pressure, but it must be something to know that you are always going to be compared to the greatest pitchman technology has ever seen.

Today’s departure of Editor in Chief, Erick Schonfeld has been just one of a stream of top talent.

Earlier this week, popular blogger and TechCrunch TV host Jason Kincaid also announced his departure.

Paul Carr openly threatened to quit at one point. And then he did so in a blog post on TechCrunch. Erick then accepted his resignation in a followup blog post.

TechCrunch CEO, Heather Harde bailed out in December.

And then there was this big guy. Michael Arrington’s infamous public exit saga.

There are still a handful of talented, interesting bloggers at TechCrunch. However, the herd is much thinner now. I would expect it only to get thinner as the remaining crew is tempted with outside offers.

I think most would agree that the idea of an old school company like AOL buying a wildly independent site like TechCrunch was a mistake. They have no business owning a property like that. Consequently, the reasons why have shown themselves in the continued exodus.

Designing a theme for WordPress in Photoshop is straightforward. In our example today, we will create a simple two column fixed width theme. Before we start, we need to decide what the width of our theme will be. I chose a 980-pixel sixe because it will fit on most screens without the need to scroll form side to side, as most screens today are at least 1024 pixels wide.

To get started create a rectangle that is 1024px x 768px. This will serve as our background for the theme. You can color your backgrounds or even add an image. For our tutorial, we will color the background blue.

Next, we will layout the theme container. Later this will be defined in the web pages we create, but now let’s add a white rectangle 980pxx768px. This represents the themes overall width and the container that will hold our theme.

Now that we have the basic layout done let’s look at the different sections we will be creating. Our theme will have four basic sections:

• Header
• Content
• Sidebar
• Foote

We will add each section to our theme layout starting with the header. For this tutorial, I have decided to create a header that is 175px tall and I will add 13px above the header also. To do this I will create a box that is 188px x 980px aligned with the top of the page.

I now have the basic header shape in place. Remember I added 13px for a border at the top so I want to represent that in my design. If you have an image for your header, you can now format it to the right dimensions and paste it into the PSD like this.

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.

That is it, we have a design we can now transfer to a theme. Before we start coding, let’s look at some of the basics of a WordPress theme.

Section 2 – WordPress Themes Overview

Before we convert our WordPress theme design into a usable WordPress theme, it is important to understand the various parts of a theme and how they work together.

A WordPress theme is made up of a collection of:

• web pages,
• Style sheets, and
• Images.

These elements comprise the theme and are located in a folder within the WordPress installation directories. All themes are located in subfolders within the wp-content/themes/ folder.

The elements that make up a WordPress theme consist of three types in addition to the images. The style sheets or CSS files control the presentation or look of the theme. They define the colors used and how the data is displayed visually. The web pages are divided into two different types the template files and the optional functions.php files. The functions.php file is used for many things, but if you are going to create a widget ready theme, you will put the code to do this in the functions.php file. The template files generate the data or content that is displayed as a webpage.

Every WordPress theme must have at least two files:

• index.php and
• style.css.

Other optional pages include:

• home.php,
• functions.php,
• single.php,
• page.php,
• archive.php,
• category.php,
• search.php,
• 404.php,
• comments.php,
• comments-popup.php,
• author.php, and
• date.php.

Each of these pages performs a different function and we will cover these later. Let’s look at each of the page types in more detail.

CSS pages- The Theme Style Sheet

As we discovered earlier, the CSS page or style.css controls the presentation or the look of our theme. It also does much more. The style.css also provides the details about the theme in the form of comments. WordPress does not allow any two themes to have the same details in their comments. They do this because two themes with the same details would cause problems in the theme selection pages.

At the top of every style sheet are the details about the theme. These are used in the theme selection page. The style sheet comments are organized as follows:

Theme Name:  Your theme’s name

Theme URI:  The theme’s home page

Description:  The theme’s description

Author:  The author’s name

Author URI:  The author’s web page

Template:  This optional field defines a parent theme if one is used

Version:  The theme’s version number

If you are using a parent theme you will need use the name of the directory of the style in the Template field.

The Theme Functions.php File

To add more advanced functions to a theme you can use the optional functions.php file. The functions.php file acts like a plug-in if it is present in your theme. Some of the typical uses for this file include:

• Create the code for a widget ready theme
• Define functions used in the template files of your theme
• Create an admin screen for your theme that gives users the ability to choose options for colors, styles, and other aspects of your theme

If you want to see a sample of a functions file that sets up an admin, look at the default WordPress theme. This theme contains a functions.php file that defines functions and an admin screen. If you want to see a list of what is possible wit this file, look at Function Reference list available on www.wordpress.com.

The Theme Template Files

As we discovered earlier, WordPress uses web pages or PHP files for templates to generate the pages requested by your site’s visitors. We already saw a list of all the possible templates, so let’s examine the key ones in more detail.

While it is not necessary to use every possible template, it is important to note that WordPress chooses templates based on the template hierarchy, which is available at www.wordpress.com and is not important for the purposes of this book. As the theme designer, you can choose the level of customization you want by designing or not designing the various templates.

As we said earlier, you can create a WordPress theme with just two files:

• style.css
• index.php

When we designed our theme, we included several areas including:

• A header
• A footer
• A sidebar
• A content area

All of these areas can be defined in the index.php template file or can each be their own template file in which case the index.php file will define how and where they are used. Note that if you do not create templates for the various template possibilities, WordPress use the built-in default files. The default templates may not match your Theme and you may want to create your own to maintain consistency across the theme.

In our example, we designed a theme that will require the following templates:

• index.php
• sidebar.php
• header.php
• footer.php

To do this we will create an index.php that will call each of the other templates. To do this we will use WordPress tags within the index.php template. The tags we need to use are as follows:

• get_header() will call the header.php template
• get_sidebar()will call the sidebar.php template
• get_footer()will call the footer.php template

We will examine this in detail in Section 3 of this book.

Section 3 – Putting It All Together

Now that we have designed our theme and learned the basics of building a WordPress theme, it is time to build our theme. To do this let’s start by creating a folder in our WordPress installation. We will name our folder “World” and place it in the wp-content/themes/ folder.



Also create an images folder in the same folder. This will hold our images for the theme.

Now that we have our folder, let’s create the files we need in the folder. We will create the following files:

• index.php
• sidebar.php
• header.php
• footer.php
• style.css
• functions.php

Now that we have our folders and files created, let’s slice up our psd file to create the necessary images.

Slicing up Your PSD File

For this theme, we only need to create one image – the header image. To do this we will select the layer in our psd file that is our header image. You should also hide any layers that are above the header layer to prevent them from being copied.

Now we simply copy this layer and paste it into a new image.

Review the dimensions to ensure they are correct and if they are then save the file as headerbg.jpg. You are now ready to start creating your theme.

CSS Layout

The layout of a theme is done using CSS divs. The divs define the various sections and how and where they are placed. Additionally our style.css will further define the look based on these divs.

Our theme will be laid out as follows.

Furthermore, we will encase the entire page in two wrapper divs called wrapper and wrapper 2. Let’s start laying out the theme by starting on the template files.

Template Pages

Our layout for our divs will be as follows:

<div id="wrapper">

<div id=”wrapper2″>

<div id=”superheader”></div>

<div id=”header”></div>

<div id=”tabs”></div>

<div id=”content”></div>

<div id=”sidebar”></div>

<div id=”footer”></div>

</div></div>

There will be other divs in the theme, but these are the major ones and translate directly from our design. Let’s get started at the top with the header template.

Header.php

The header.php template contains our logo, site name, slogan, and in this case the menus. Open your header.php file and let’s get started.

You should have a blank page when you open the file. WordPress templates all work together like the pieces of a puzzle to build a complete webpage. Because of this, certain tags live in different templates. Every web page requires certain tags to render in the browser. These tags are:

• html
• head
• body

The header.php file will have the opening html tag, the head tags, and the opening body tag as well. We will close the html and body tags in a different template.

The first thing we should do is set up our tags and CSS divs as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title> </title>

</head>

<body>

<div id=”wrapper”><div id=”wrapper2″>

<div id=”superheader”></div>

<div id=”header”></div>

<div id=”tabs”>

<ul></ul>

</div>

We have now created our basic header and inserted our HTML tags and CSS tags. Note that we did not close the Wrapper tags, as we will do this in the footer.php template. We have now lain out or page, but we have not put any WordPress specific data in yet. There are several items we need to add to the page including:

• page title code
• blog description code
• blog title code
• menu code
• the css link

We need to add the following lines of code  to our page:

• <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
• <?php wp_title(‘&laquo;’, true, ‘right’); ?> <?php bloginfo(‘name’); ?>
• <a href=”<?php bloginfo(‘url’); ?>/”><?php bloginfo(‘name’); ?></a>
• <?php bloginfo(‘description’); ?>
• <a href=”<?php bloginfo(‘url’); ?>”>Home</a>  <?php wp_list_pages(‘title_li=&depth=1′); ?>           </ul>

We add it in the following manner:

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

This creates the title text in the top of our browsers and links the CSS sheet to the page. To set the blog title and description to display in the header we add:

<div>

<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1><br>

<?php bloginfo(‘description’); ?> 

<ul>

Finally, we add the menu items as follows:

<ul>

<li><a href=”<?php bloginfo(‘siteurl’); ?>/”>Home</a></li>

<?php wp_list_pages(‘title_li=&sort_column=menu_order&depth=1′); ?> 

</ul>

The first item creates a Home link and the second lists the pages within the WordPress database.

Finally, we are left with the following header.php template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>

<head profile=”http://gmpg.org/xfn/11″>

<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

<title><?php bloginfo(‘name’); ?>  <?php wp_title(); ?></title>

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/style.css” type=”text/css” media=”screen” />

</head>

<body>

<div id=”wrapper”><div id=”wrapper2″>

<div id=”superheader”></div>

<div id=”header”>

<h3><a href=”<?php bloginfo(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h3>

<h2><?php bloginfo(‘description’); ?></h2></div>

<div id=”tabs”>

<ul>

<li><a href=”<?php bloginfo(‘siteurl’); ?>/”>Home</a></li>

<?php

wp_list_pages(‘title_li=&sort_column=menu_order&depth=1′); ?>

</ul>

</div>

Now that we have our header.php file lets create our footer.php file.

Footer.php

The footer.php file contains the information for the footer and is used to clean up tags for other templates. In our case we have an open div tag from the page div in the header and the body and html tags that need to be closed. As usual, we will create a div and then add our content.

Our footer.php will look like this:

<div id="footer">

<p>

<?php bloginfo(‘name’); ?> is proudly powered by

<a href=”http://wordpress.org/”>WordPress</a>

<br /><a href=”<?php bloginfo(‘rss2_url’); ?>”>Entries (RSS)</a>

and <a href=”<?php bloginfo(‘comments_rss2_url’); ?>”>Comments (RSS)</a>.

</p>

</div></div>

</body></html>

Let’s examine each piece of this. The <div id=”footer”>starts the div for the footer. The <p> creates a paragraph break in the top of the footer and the </p> tag closes that tag. The next tag (<?php bloginfo(‘name’); ?> )should look familiar,  it displays the title of the blog. After the link to WordPress you will see two links that allow visitors to subscribe to rss feeds of the blog. Finally, you see our closing tags, one for the footer div, one for the page div and then the html and body tags.

Now let’s look at the sidebar.php template.

Sidebar.php

The sidebar.php template controls the items in our sidebar. When designing a sidebar, you can either create a static bar that you put the WordPress items into such as categories, calendar, etc, or you can build a widget ready sidebar that lets you set the items in the admin panel.

The sidebar is an unordered list of items contained in a CSS div. The first thing we want to do is add the div to the page so open your sidebar.php and insert the following code:

<div class=”sidebar”>

</div>

If you want a widget ready sidebar, add the following code to the sidebar between the div tags:

<ul>

<?php /* Widgetized sidebar, if you have the plugin installed. */

if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<?php endif; ?></ul>

If you do not want to add any static items then you are done. However, for those that want a static sidebar you can add a list of blog categories by adding the following code:

<ul>

<li><h2><?php _e(’Categories’); ?> </h2>

<ul> <?php wp_list_cats(); ?>

</ul></li></ul>

There are many other items available, check the WordPress site for more info. Our final sidebar should look like:

<div class=”sidebar”>

<ul>

<?php /* Widgetized sidebar, if you have the plugin installed. */

if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<?php endif; ?> </ul> </div>

That is it; of course, you can put anything you want in here. Let’s look at our last template, index.php that will pull together all these templates.

Index.php

The index.php pulls the other templates together to create the basic page. To begin we will create the calls to our other pages as follows:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

This calls the header.php, sidebar.php, and footer.php page. If you just loaded this, you would get a page with no content, so we need to add the content and necessary divs.

Let’s start by adding the content and main divs right below <?php get_header(); ?> as follows:

<?php get_header(); ?>

<div id=”content”>

<div id=”main”>

</div></div>

Now that we have our divs setup we can begin adding the code to get the data from the database.  You will most likely want to list your posts on the main page. To do this we add code that will retrieve the posts and lists them as follows:

<div id="main">

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

<?php endwhile; ?>

<?php endif; ?>

</div>

Your theme is now ready to display the posts. We are only left with one template, the functions.php template.

Functions.php

The functions.php file can be used in many ways. In our case, we will use it to control the look of our widgets in our sidebar. Open your functions.php file and let’s get started.  Enter the following code into your functions.php template:

<?php

if ( function_exists(‘register_sidebar’) )

register_sidebar(array(

‘before_widget’ => ‘<li>’,

‘after_widget’ => ‘</li>’,

‘before_title’ => ”,

‘after_title’ => ”,

));

?>

As you can see this checks to see if there is a widget in the sidebar and then inserts code before and after the widget to control the look of the widget.

We now have a set of templates that will produce a theme. To set the look of the theme we need to create a style.css file.

Style.css

The style.css file contains information about our theme and defines the look of our theme.  We start by opening our style.css file and entering the information about our theme at the top. We need to enclose our information in comment tags. CSS comment tags look like this:

• /*  (open comment)
• */  (Close Comment)

We need to include all the required info. We built our details as follows:

/*

Theme Name: World

Theme URI: http://www.Yoursite.com

Description: My first theme

Version: 1.0

Author: You

Author URL: http://www.yoursite.com

*/

Now that we completed the comments, we need to create classes for each of the divs we defined in addition to the body div. We will create the following classes.

• body
• wrapper
• wrapper2
• superheader
• header
• content
• sidebar
• footer

Let’s look at each one individually and what they do. We will keep it simple and just define the body portion of our pages. The body styles affect the entire page. We will define several elements including:

• The background color
• The font used by our pages
• The font size

To do this we will enter the following into our style.css page.

body {

margin: 0;

padding: 0;

color: #333;

text-align:center;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100.1%;

background:#0099FF;

}

Let’s examine each item separately.

• body{ – This opens the style class and defines which tags are effected in the pages.
• Margin: -  Defines the margins around the page. A 0 margin will have no margin.
• padding: – Padding is like a margin and setting it to 0 will remove it completely. 
• color: – This tag defines the color of the font.
• font-family:  – This defines the font used for the  class. Not every font can be used and web pages use specific fonts. Refer to CSS standards for a complete list. In this case, we chose the Verdana, Arial, Helvetica, sans-serif font.
• font-size:  – This sets the size of the basic font.
• background: – sets the color of the background on the webpage.  We used 0099FF which is the hex representation of our color. To get the hex color you can use photoshop.

You might have noticed a semicolon at the end of each value. This is used to end the line and is required.

We now can define our two wrapper classes as follows.

#wrapper{

width: 980px;

margin: 0px auto;

padding: 0px;

text-align:left;

font-size: 78%;

line-height:18px;

background: #fff;

border-left: 2px solid #fff;

border-right: 2px solid #fff;

}

#wrapper2{

background: #fff;

}

Here we have used the width tag to create the width of our theme and it matches our design width. The text-align tag sets the text alignment in the div, and finally we create a border around the div. with the border-right and border-left tags. The wrapper two class only sets the background color to white which is what we use for our sidebar and content.

Now that we have the global tags set, let’s address our header. Our header section will control the look of the items in our header and will include several items such as:

• the header image,
• header text, and
• the menu text.

We will do this in the following manner and step through this one class at a time.

#superheader{

padding: 0;

margin: 0;

height: 13px;

background-color:#0569ac;

}

#header{

padding: 0  0 0px 0;

height: 175px;

margin: 0 0 0px 0;

border-bottom:2px solid #fff;

background:#fff;

background-image:url(images/headerbg.jpg);

}

The superheader class is used to create that band at the top of the page.  We simply set the margins, height, and color.

The header class defines the overall style of the header div. In this case, we are setting the background image, borders, margins, and height. You can see we used the sliced header image we created earlier.

The menu is controlled by the tab class and controls how the menu looks and functions. Because a WordPress menu functions as an unordered list, we set the list tags for the menu tags as well. An unordered list in html will use the tags ul and li, with ul defining a list and li a list item. Let’s start by looking at the menu class.

#tabs{

padding: 0;

background:black;

}

First, we define the background color of the menu and set the padding to 0. Next, we define the look of the ul tags.

#tabs ul{

margin: 0;

padding:3px 0;

list-style-type:none;

}

Finally, we  set the li tags.

#tabs ul li{

margin: 10px 0 3px 15px;

padding: 6px 15px 6px 0px;

display:inline;

border-right: 2px solid #fff;

font-size: 90%;

font-family: Tahoma, Arial, sans-serif;

} 

Display:inline makes the list display in a horizontal line as opposed to a vertical line.  Next we define how the links look in our menu. Since each item will be a link we will want to change the look form the default link style. Here we set the font color to white.

#tabs ul li a{

color: white;

}

The last step is to define the behavior of the text when we hover the mouse over it. Here we simply change the color.

#tabs ul li a:hover{

color:#A1E7FD;

 text-decoration:none;

}

Next, we can create the style for our footer. We will define our footer style as follows.

#footer {

clear: both;

margin: 0;

padding: 10px 16px 0 16px;

text-align: center;

font-size: 85%;

background: #fff;

}

This class defines the footer class and sets the margins, padding, text alignment, font size, and background color for the class.

Now that we have the footer, let’s define the sidebar styles as follows.

#sidebar {

padding: 0;

margin: 0px 0px 0px 540px;

}

That is it for the sidebar for now. Next, we will set the style for the main content of the pages as follows.

#content{

clear:both;

padding: 0;

margin: 15px 10px;

}

This will define the content container’s style. We set the margins and padding for the class. 

#main {

width: 530px; 

float:left;

margin: 0;

padding: 0 0 10px 0px;

overflow:hidden;

}

Here we set the main div’s class by setting the width, placement, margins, padding, and the overflow properties.

That is it, we are ready to upload the theme and test it.

Putting it all together

If you upload this to your server and browse to the blog you should see something like this.

Conclusion

We have created a simple WordPress theme. There are many other things you can do with WordPress themes and there are many great tutorials available to help you. There is no limit to what you can do with a WordPress theme as long as you follow the basic principles contained within this document. If you want to do more advanced theme building check out the WordPress developer site at www.wordpress.com.