1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

<!-- Panel -->
<div id="toppanel">
<?php
	global $user_identity, $user_ID;
	// If user is logged in or registered, show dashboard links in panel
	if (is_user_logged_in()) {
?>
<div id="panel">
  <div class="content clearfix">
    <div class="left border">
      <h1>Welcome back <?php echo $user_identity ?></h1>
      <h2>My Account</h2>
      <ul>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Go to Dashboard</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Edit My Profile</a></li>
        <?php if ( current_user_can('level_1') ) : ?>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/edit-comments.php">Comments</a></li>
        <?php endif ?>
        <li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>">
          <?php _e('Log out'); ?>
          </a></li>
      </ul>
    </div>
    <div class="left narrow">
      <?php if ( current_user_can('level_10') ) : ?>
      <h2>Appearance</h2>
      <ul>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/themes.php">Themes</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/widgets.php">Widgets</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/theme-editor.php">Theme Editor</a></li>
      </ul>
      <h2>Plugins</h2>
      <ul>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/plugins.php">Plugins</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-install.php">Install a Plugin</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-editor.php">Plugin Editor</a></li>
      </ul>
      <?php endif ?>
    </div>
    <?php if ( current_user_can('level_2') ) : ?>
    <div class="left narrow">
      <h2>Posts</h2>
      <ul>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Post</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/edit.php">Edit Posts</a></li>
        <?php if ( current_user_can('level_3') ) : ?>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/edit-tags.php">Tags</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/categories.php">Categories</a></li>
        <?php endif ?>
      </ul>
      <?php if ( current_user_can('level_3') ) : ?>
      <h2>Pages</h2>
      <ul>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Page</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/edit-pages.php">Edit Pages</a></li>
      </ul>
      <?php endif ?>
    </div>
    <?php endif ?>
    <?php if ( current_user_can('level_2') ) : ?>
    <div class="left narrow">
      <?php if ( current_user_can('level_3') ) : ?>
      <h2>Users</h2>
      <ul>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/users.php">Author &amp; Users</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/user-new.php">Add New</a></li>
      </ul>
      <?php endif ?>
      <h2>Library</h2>
      <ul>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/upload.php">Library</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/media-new.php">Add New</a></li>
      </ul>
    </div>
    <?php endif ?>
    <?php if ( current_user_can('level_10') ) : ?>
    <div class="left narrow">
      <h2>Settings</h2>
      <ul>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">General</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/options-writing.php">Writing</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/options-reading.php">Reading</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/options-discussion.php">Discussion</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/options-media.php">Media</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/options-privacy.php">Privacy</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/options-permalink.php">Permalinks</a></li>
        <li><a href="<?php bloginfo('url') ?>/wp-admin/options-misc.php">Miscellaneous</a></li>
      </ul>
    </div>
    <?php endif ?>
  </div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class="tab">
  <ul class="login">
    <li class="left"> </li>
    <!-- Logout -->
    <li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>">
      <?php _e('Log out'); ?>
      </a></li>
    <li class="sep">|</li>
    <li id="toggle"> <a id="open" class="open" href="#">Show Dashboard</a> <a id="close" style="display: none;" class="close" href="#">Close Panel</a> </li>
    <li class="right"> </li>
  </ul>
</div>
<!-- / top -->
<?php
	// Else if user is not logged in, show login and register forms
	} else {
?>
<div id="panel">
  <div class="content clearfix">
    <div class="left border">
      <h1>Put a Salutation Here</h1>
      <h2>You can put even more stuff here.</h2>
      <p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
    </div>
    <?php add_ajax_login_widget(); ?>
  </div>
  <!-- /login -->
  <!-- The tab on top -->
  <div class="tab">
    <ul class="login">
      <li class="left">&nbsp;</li>
      <!-- Login / Register -->
      <li id="toggle"> <a id="open" class="open" href="#">Log In | Register</a> <a id="close" style="display: none;" class="close" href="#">Close Panel</a> </li>
      <li class="right">&nbsp;</li>
    </ul>
  </div>
  <!-- / top -->
  <?php } ?>
</div>
<!--END panel -->

The nice thing about the way Jeeremie coded this, your WordPress Dashboard links are available to you by levels. For example, if you’re an Administrator of the site, then you will see all the links available that you would in the Dashboard. He separates them with some spiffy PHP based on user levels.

The code for the Ajax Login Widget++ is on line 119.

One more neat thing that another user, Jonathan, over at Web-kreation came up with is only showing the sliding panel to the admin. Here’s the code for that:

1
2
3
4
5
6

<?php if ( current_user_can('level_10') ) : ?>
<!-- Panel -->
<div id="toppanel">
... ALL THE CODE FROM ABOVE GOES HERE...
</div><!--END panel -->
<?php endif; ?>

Of course, if you’re going to show the sliding panel only to the Admin, then you won’t need all the user level codes in the original code.

In part 1, I covered the code necessary to provide my home page functionality. In this segment, I’ll cover how I created the functionality for the single.php page and the category pages. The code for the single.php page closely mirrors the code for the index.php page with the addition of the comment code. Again, the process for creating these pages closely followed that of the index page–I created a prototype sketch, I fleshed it out in Photoshop and then I opened my text editor and started coding.

First, I wanted the single page to have roughly the same appearance as the index.php minus the additional posts below the “featured” post. I wanted the image to carry over into the post and I wanted the text to be the main emphasis on the page because that’s what a blog is all about in my opinion. I’ve seen lots of designs I like that had asides to the left or right of the post but in this incarnation, I wanted the reader to focus solely on the text of the post when clicking through.

1. Single.php Code

1
2
3
4
5
6
7
8
9
10

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// THIS IS WHERE MY META AND OTHER POST CONTENT GOES
<?php endwhile; else: ?>
// THIS IS WHERE I PUT SOME SORT OF MESSAGE TELLING THE READER THEY'VE NOT FOUND WHAT THEY'RE LOOKING FOR
<?php endif; ?>
// SOME MORE OF MY OWN CSS LAYOUT CODE
<?php comments_template(); ?>
// I CLOSE UP ALL MY OPEN DIV'S
<?php get_footer(); ?>

As you can see, there are no custom loops or queries. The only “custom” code on this page is my CSS and the code I need to bring in the image from the custom field, which was covered in part 1. The real “exciting” stuff, actually takes place within the category pages so I’ll go over that in more detail next.

2. Category Pages and the Template Hierarchy

When visiting the WordPress Codex, I’ve often see the phrase “Template Hierarchy” but until this design, I’d never really read about it. What I learned was that if I wanted a different look or custom loops, I could use the hierarchy. The Template Hierarchy works like this; let’s say I have 5 categories and I want them each to have their own page. I can achieve this by creating a category page for each separate category and WordPress will look for a specific page for the category if I name the file the following way: category-5.php. The number in the file name is the actual number of the category so when a visitor clicks on, for example, Design and Design is category 5 in the database, WordPress will serve that page using category-5.php instead of just category.php or archives.php. It’s a simple way to create unique pages per category without the hassle of really having to creating template files.

3. Custom Loop for Category Pages

The first thing you’ll see on each category page is the heading for that page. For example, in the business category, you’ll see “Business Articles.” That is handled dynamically by using the following code:

<h2><?php single_cat_title(); ?> Articles</h2>

The PHP tells the database to spit out the category name or title.

The next thing you’ll see is the posts with excerpts. This is handled using a custom WordPress Query.

1
2
3
4
5
6
7

<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('showposts=16&cat=3,9'.'&paged='.$paged);
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

A very important part of this custom query is telling WordPress that this page will be…paged; meaning there is more than one page. In order to use a custom query, you must use that bit of PHP code or else your paging, whether you use a plugin or the built-in navigation of older or newer entries, won’t work.

The next important part of this query is indicating how many posts per page should be displayed and what categories to display. Since I have sub-categories set-up under the main categories, I want to make sure those show up as well.

Styling My Category Pages

An important part of the next piece of custom code was styling the most recent post differently (do you notice a trend?). I wanted that post to stand out from all the others for two reasons. It gives the reader a point of reference as to what’s important on the page and it helps break up the design a little.

I decided when planning my redesign that I didn’t want the typical archives. I wanted to display past articles in a different way starting with making the most recent article be prominent on the category page. I did this with a simple bit of code that I discovered through the WordPress forums with the help of pshero. He too was looking for a way to style the most recent post differently than the rest and came up with the PHP code that would do the trick. Here is what I used to make the most recent post stand out on the category page.

8
9
10
11
12

<?php if (is_paged()) : ?>
<?php $postclass = ('archivelist'); ?>
<?php else : ?>
<?php $postclass = ($post == $posts[0]) ? 'archivelist-featured' : 'archivelist'; ?>
<?php endif; ?>

Then the above is applied to your div class the following way:

13

<div class="<?php echo $postclass; ?>">

Basically, what this piece of code does is create a way to assign two classes to the posts on the page dynamically. If it’s the most recent post, then it is assigend “archivelist-featured” and any subsequent post is then tagged with “archivelist.” If you click on the link above, it will take you to the thread and explain in more detail different usage.

4. Crossing the Finish Line

After I make things pretty, we need to add some of the basic WordPress code to show the date, post title and the excerpt.

14
15
16
17
18

<h3 class="meta"><?php the_date('m-d-y'); ?> &#8249;&#8250; <?php the_category(', ') ?></h3>
  <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
  <?php the_excerpt(''); ?>   
   </div><!-- // END ARCHIVE LIST -->    
   <?php endwhile; ?>

We’re getting there. The last thing you may notice on the page, other than the footer, is the paged navigation. In order for that to work properly, you have to code it the following way:

19
20
21
22

<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>  
</div><!-- // END NAVIGATION -->
<?php $wp_query = null; $wp_query = $temp;?>

You’ll notice that we close the custom WordPress query after we call for the paged navigation. If you don’t do that, you’ll have your pagination showing up on every page, most likely not showing a correct page count.

The End is Nigh

In this post I covered using PHP to dynamically pass CSS classes to differentiate posts, I covered template hierarchy and its purpose and I covered paging and custom queries. I hope this is useful to folks and expanding on your WordPress coding foundation.

In part three, a much shorter article by far, I’ll cover what plug-in’s I’m using and why and the benefits of automated content.

When I thought about the redesign of my blog, I wanted something that had a magazine feel to it but not the full functionality of a magazine theme. I didn’t need to display sections for different categories because I still wanted to run a blog and not a magazine–though in the future I could see myself actually adding that sort of functionality and turn my blog into a magazine.

I looked at all the available magazine layout themes, both paid and free, to get a feel for what it is that I like about them. The recurring theme that I liked about magazine layouts is the grid system. So I put pencil to paper and began sketching box after box attempting to get a simple grid layout that would satisfy my desire to have a magazine-esque layout. After a prototype or ten I had my creative juices flowing pretty well. I fired up Photoshop and played with color and layout until I came close to the design you see now. Just a side note, when it comes to my own sites, I often deviate from my Photoshop concepts after I start coding. For example, in my design concept, my footer was part of the five regular posts (limiting my posts to 4 on the front page). After playing about a bit with widths and other CSS styles, I decided to actually create a footer and use that space for additional posts.

After getting a close approximation of what I wanted it to look like, I started to think about how it would function. I wasn’t wild about the idea of having to create a “featured” category just to have a featured post. If I had a featured category, did I want to link to it and if I didn’t, what was the point of having a featured category to begin with. After deciding that a featured category was not an option, I looked for plugin’s but I didn’t want to use theme to achieve that option either. I decided not to allow my limited PHP knowledge hold me back from what I knew WordPress can do.

I set about researching my options and custom loops, finally figuring out a way to mix CSS and PHP to get what I wanted on the front page. I know there are probably ways that accomplish this with less code or more complex functions but I’m working within my abilities of PHP coding and learning as I go.

Without further ado, here’s how I accomplished my front page layout.

1. Featured Post Custom Loop Code

1
2
3
4
5
6
7
8

<?php get_header(); ?>
<?php
	$featured = new WP_Query();
	$featured->query('posts_per_page=1');
	while($featured->have_posts()) : $featured->the_post();
?>
// THIS IS WHERE MY META AND OTHER POST CONTENT GOES
<?php endwhile; ?>

The third line of code starts the loop. It tells WordPress that there’s a new database query about to happen. The fourth line of code tells the database to give us one post and the most recent one at that. The fifth line tells the database that the loop begins now if there is a post. The area of greatest interest for my needs is posts_per_page. Since my newest post was going to be “featured” I only wanted to show one and stop. Once I had that working, I went on the implement the second custom loop to display the additional posts on the front page.

2. Regular Posts Custom Loop Code

9
10
11
12
13
14
15

<?php
	$asides = new WP_Query();
	$asides->query('posts_per_page=5&offset=1');
	while($asides->have_posts()) : $asides->the_post();
?>
// THIS IS WHERE I PUT MY CODE FOR THE ADDITIONAL POST TITLES AND EXCERPTS
<?php endwhile; ?>

On line #11 I have similar code as the original query but I go a bit further in telling the database what I’m looking for. I want to display 5 posts now but I don’t want to show the “featured” or first post, so I tell the database to retrieve 5 posts but to ignore the first or newest one, which is what offset=1 does. If I were displaying 3 featured posts, I would set the offset at offset=3.

Another bit of custom coding I did was to use custom fields to display an image in my featured post. The nice part of this code, is that if I don’t want to attach an image to the post, I don’t end up getting any errors because of a missing image. First, I went into the Add New Post screen and created a custom field called featuredImage. Then I put the following code in my index.php and category.php templates.

3. Custom Fields for Featured Images

1
2
3
4
5
6
7
8

<?php
$values = get_post_custom_values("featuredImage");
	if (isset($values[0])) {
?>
<div class="featured-img">
<img src="<?php $values = get_post_custom_values("featuredImage"); echo $values[0]; ?>" alt="<?php the_title(); ?> Image" />
</div>
<?php } ?>

The second line of code is the variable that the third line of code works with to see if there is a value to display. If the value isn’t null, then my div class gets printed. If the value is null, then nothing gets printed at all, i.e., if you look at the source code, there is no image because I didn’t specify one in my post.

Wrapping Up Part 1

If you’re reading this article, you know the power of WordPress and are probably trying to harness that power to customize your site. What I’ve posted is how I handled having a “featured” post and not having to have a “featured” category in order to have a different style for my first post. I hope this post helps some folks because I wasn’t able to find a tutorial (or code) that showed how to accomplish this.

In the next part of this three part series, I’ll talk about how I accomplished the layout of my category pages–and in my case my archives as well, since they serve the same purpose. After coding my index.php page, I discovered another way that is much cleaner code to achieve having the first post having a different look than the rest. I used that method on the category pages so stay tuned to part two to learn how to use a custom loop and PHP to call specific CSS for your first post.

Just place the following code where you would normally place your custom field code:

1
2
3
4
5
6
7
8

<? php
$values = get_post_custom_values("Your-Custom-Field-Value");
if (isset($values[0])) {
?>
 
<img src="<?php bloginfo('site_url'); ?>/wp-content/uploads/>?php $values = get_post_custom_values("Your-Custom-Field-Value"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
 
<? php } ?>

If you write a post that doesn’t have an image, you won’t get any of those pesky errors. Thanks goes to authors on the WordPress forums for their efforts in helping folks who aren’t as well-versed in PHP coding as we’d like to be.

Then I came across this very old post and it seems to have solved my woes and the gray boxes are now a thing of the past (finger’s crossed). Here’s the technique:

In your WordPress theme folder–wp-content/themes/–upload the following two files (from the link above)–blank.gif and pngbehavior.htc

Then add the following code to your stylesheet:

/* Fix for PNG alpha channel display in IE6 */
img {
 behavior: url("/wp-content/themes/pngbehavior.htc");
}

Download the plugin here.

The following PHP code should be placed between your title tags in the header.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

if (is_home()) {
	echo 'News - Pop Stalin Design: Web Design With Standards'; wp_title('');
} elseif (is_404()) {
	echo '404 Not Found'; echo ' - '; echo bloginfo('name');
} elseif (is_category()) {
	echo 'Categories - '; echo wp_title(''); echo ' - '; echo bloginfo('name');
} elseif (is_search()) {
	echo 'Search Results'; echo ' - '; echo bloginfo('name');
} elseif ( is_day() || is_month() || is_year() ) {
	echo 'Archives - '; wp_title('');
} else {
	echo wp_title(''); echo ' - '; echo bloginfo('name');
}
?>

This code seems overly verbose to me but until I can figure out something more concise, this is what I’ll be using.

WordPress MU Features

• Everything WordPress does
• Scaling to tens of millions of pageviews per day.
• Unlimited users and blogs.
• Different permissions on different blogs.

What do you think? Pros, cons; is this a viable solution? I’m not super familiar with the admin side of MU, although I do know that it’s basically WordPress with MU wrapped around it for administration.

Code for Page Template File

The only necessity for using a Page Template is the below code. Just place it at the top of the page template you are creating. A good point of reference to see how a Page Template is handled is by looking at the file ‘archives.php’ in your theme. It’s usually the second ‘Archives’ link in the theme editor for the default WordPress theme.

1
2
3
4
5

< ?php
/*
Template Name: Custom Category
*/
?>

Code to Call Unique Templates

The below code should be placed at the top of ‘category.php’.

6
7
8
9
10
11
12
13
14

< ?php
$post = $wp_query- >post;
if ( in_category('3') ) {
	include(TEMPLATEPATH . '/cat3.php’);
} elseif ( in_category('4') ) {
	include(TEMPLATEPATH . '/cat4.php');
} else {
	include(TEMPLATEPATH . '/cat.php');
} ? >

As always you can find out more about creating themes and template tags at the WordPress codex.

At ZDNet we use WordPress for blogs, but in previous positions I’ve almost always had some custom built creation that usually stinks. Sure, these CMS systems may have started out as standard, but sooner or later they turn into this Frankenstein creation. And lookout below if the guy that cooked up the code ever leaves. If there’s an open source option that has rich features why would you spend time building the same thing?

Of course I have an opinion on why so many in-house developers are against using open source software. I think part of the reason is that the developers may not be too familiar with PHP. Most of these folks are Microsoft certified so most of the stuff is going to be written in ASP… to date you don’t see a lot of open source ASP software out there on the net. I actually had one Microsoft certified developer tell me PHP would be dead within a year—that was 2-3 years ago now and he was fired before the year was up anyway.

I think it also comes from a fear of losing one’s worth in the marketplace. If a company has all these highly-paid Microsoft certified developers on staff and suddenly you bring in open source, why do you need them? I think open source software is a perfect compliment for small to medium sized businesses and particularly non-profits. Instead of spending large chunks of money for people to reinvent the wheel, they could go with available solutions that wouldn’t cost them a dime.

But of course, not everyone is web or business savvy and may not know there are options available to them in the first place. Which is why as web designer’s we must go forth and plant the open source seed. Now I’m sounding like Johnny ‘Web Designer’ Appleseed.