Categories

Section off the content of the website into different categories. For example, if you are developing a theme for a magazine-style website, you may have categories such as:

• Local
• US
• Global
• Entertainment
• Sports
• Business
• Humorous
• etc, etc

The website’s posts (articles) are then filed into these different categories to allow for easy browsing by readers. Use your website’s categories as the site’s main navigation. They can be listed with the Wordpress template tag <?php wp_list_categories(); ?>. Use the site’s pages as secondary navigation.

Page Templates

Create a variety of page templates so that the site owner can easily choose between multiple page structures. For example, create a template for the homepage that displays one or more featured posts, latest news items, latest photos, etc. Then also create a template for a full width page, a gallery page, and any others you wish.

Include this at the top template_name.php in order to create a page template:

1
2
3
4
5
6
7
8
9
10
11

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
 
 /*
Template Name: Home Page
*/
 
get_header(); ?>

Easy Linkability

One of my clients once said to me “wow, that is scary powerful” when I showed him how easy it is to create a link within a post or page to another post or page on the site. While this may not be something that developers think about often because we’re no use to creating links with

<a href=". . .">Link</a>

but it really is one of those little things that help to please the client.

I like to use the Link to Post plugin. It’s very minimal and makes creating links even easier than the default Wordpress method.

Image Editing

Making it easier for your client to manage their website’s images is key for a good CMS. Scissors is one of my all-time favorite wordpress plugins that I include with every site I develop, whether it be a blog, e-commerce solution, or personal portfolio.

Contact Forms

Give your client the ability to create and modify contact forms. Several really good plugins for this include: C-Forms and Contact Form 7.

It’s important to remember to include css styling for contact forms in your theme, even if you are not immediately using any forms.

Permalinks

Ensuring that people are able to get to various parts of the site by typing in the direct url is very important, so use a good permalink structure. I personally like

/%category%/%postname%/

the most.

Posts – Dos and Don’ts

Obviously posts will be used for creating articles, tutorials, blog posts, etc, but they can also be used for other sections of the website. For example, as seen in the header of PestaRoo.com (the skinny orange box), posts can be used for “announcements”. To do this, create a category called something like “announcements” and write the post. That post can then be displayed wherever you wish by using the following code in one or more of your template files, such as header.php:

1
2
3
4
5
6
7
8

<?php $cat_posts = get_posts('numberposts=1&cat=#'); ?>
<!--replace "#" with your category id-->
<?php foreach($cat_posts as $post) { 
	setup_postdata($post);
?>
	<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
	<small><?php the_date('m-d-Y'); ?></small>
<?php } ?>

It is also best to then hide this “announcement” post from showing up on any category pages. To do this, simple exclude the “announcement” category id # from the navigation, and also from the post query. This can be done in a couple of different ways.

To exclude from navigation:

<?php wp_list_categories('exclude=#'); ?>

To exclude from the post query inside of the loop:

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

<?php
	query_posts('cat=-#');
	global $more;
	// set $more to 0 in order to only get the first part of the post
$more = 0; ?>
 
	<?php if (have_posts()) : ?>	
 
		<?php while (have_posts()) : the_post(); ?>
                  . . . 
		<?php endwhile; ?>
 
	<?php endif; ?>

If you’d prefer not to exclude the category from inside the template file, there are also a variety of plugins that perform the same task quite nicely. I usually use Category Visibility.

Do make use of posts for things like announcements (unless you’d prefer to code in a custom write panel to fulfill the same idea).

Do not go crazy with this. If you begin creating dozens of posts like the example above, you will create a maze of posts that quickly become difficult to navigate through when you wish to make an update.

Do create dedicated categories for these sort of posts, for example, “announcement”.

I will continue to add to this list, so watch for Wordpress CMS Tips – Part 2.

Dilate Media

Graph Force

Eagle Bend Apostolic Church

Simple Station

Zefxis

Crafted Pixelz

Velox Media

By default, Wordpress assigns a class of “even” or “odd” to each comment in the list; the first is odd, the second even, the third odd, etc, etc.

So, to achieve the desired effect, put this in your style.css:

li.even	{
	list-style: none;
	background: #FFFF;
}
li.odd	{
	list-style: none;
	background: #F9F9F9;
}

Add in a few other styling elements, such as borders and clever margins, and you can get some really slick results.

After writing a dozen plus custom themes and starting from scratch each time, I finally got smart and wrote a base template that lays out all of the basic structures and styles, shavings hours off of every project.

Building Blocks includes:

• Widget ready sidebar
• Template file for sidebar-enabled pages
• Template file for pages with no sidebar
• Clean coding with comments for easy modification
• Basic styling for most elements, including forms

View Demo

Hope this helps!

A few weeks ago I ran into a problem while styling some elements in a wordpress plugin. The source of problem was that the plugin author had used inline styles to control the elements. This prevented my user-defined styles from applying. Rather than manually going into the plugin source and removing the styles (any modifications would be over ridden if I ever updated the plugin), I found a solution posted by Natale Jost.

It’s really simple.

Your original style looks something like:

div  {
   color: #666;
   border: 1px solid red;
}

But, thanks to the inline styles, the above don’t actually appear. By adding [style] to the end of div, the nasty inline styles will be over written.

div[style]  {
   color: #666;
   border: 1px solid red;
}

This trick works in all browsers except IE 6 (no surprise).

Why use them?

• They aide in creating simpler themes with fewer template / style files
• Make your wordpress run faster as they can cut down on the number of files accessed
• Create an easy way to manage dynamic style elements

Where to use them

• index.php
• page.php
• header.php
• anything.php

How to use them

Probably the simplest and most common usage of conditional tags is for controlling whether a certain element (for example, a div tag) appears. As is often the case when I am building a website, I want something like an announcement box (for headline news, etc) to appear in the header area when a visitor is viewing the homepage, but to disappear when on any other page.

To accomplish this sort of task, structure your index.php, page.php, or anything.php like this:

1
2
3
4
5

<?php if (is_front_page()); { ?>
  <div class="announcement">
    Big News!
  </div>
<?php } ?>

The above code will create a div that only shows up when a visitor is on the front (home) page of your website.

If, perhaps, you’d rather the announcement div showed up on your contact page, which we will for the sake of this tutorial assume has a page ID # of 5, then use this code:

1
2
3
4
5

<?php if (is_page('5')); { ?>
  <div class="announcement">
    Big News!
  </div>
<?php } ?>

Controlling Style Sheets

Maybe you’d like to have a blue color scheme on the homepage, but a red theme on everything else. And then you’d also like to have a default style sheet for all other pages. Simply put the following code in your header.php.

1
2
3
4
5

<?php if (is_front_page()); { ?>
  <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style-blue.css" type="text/css" media="screen" />
<?php } else { ?>
  <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />
<?php } ?>

This is just a quick intro to wordpress conditional tags. Watch out for Conditional Tags – Part 2.

1 – Get the Gallery

The Pikachoose gallery can be downloaded from the plugin’s homepage http://pikachoose.com/. Get the latest version and extract the archive to your theme’s directory.

The image above shows the folder structure we are looking for.

2 – Edit Header.php

Place the following code into your theme’s header.php file. This will call the gallery’s style sheet and the necessary jquery and javascript files. Be sure that you paste it after <?php wp_head(); ?> and before </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<link type="text/css" href="<?php echo bloginfo('stylesheet_directory') ?>/pikachoose/styles.css" rel="stylesheet" />
 
<script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/pikachoose/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/pikachoose/js/pikachoose-min.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();
});
 
$(document).ready(
function (){
$("#pikame_user").PikaChoose({user_thumbs:true, show_prev_next:false});
});
 
$(document).ready(
function (){
$("#pikame_compact").PikaChoose({user_thumbs:true, show_prev_next:false});
});
-->
</script>

3 – Edit Functions.php file

Because we are using individual wordpress posts as the source for gallery thumbnails, we need a way for the gallery to pull the image urls from the posts.

Paste the code below into your theme’s functions.php file, or create a file by that name if it doesn’t exist. This will get the URL of the first image attached to a wordpress post. The code is based on WPRecipe’s orginal post here and republished by Fikri Rasyid.

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

<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;  
 
$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
 
}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>

4 – The Gallery Code

Insert the following code into your index.php, single.php, page.php or any of your other template files. This will set up the structure for the gallery that we will style later.

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

<div class="pikachoose">
<ul id="pikame">
 
<?php
global $post;
$postslist = get_posts('category=#&numberposts=0');
foreach ($postslist as $post) :
setup_postdata($post);
?>
 
<li><img src="<?php getImage('1'); ?>"/></li>
 
<?php endforeach; ?>
 
</ul>
</div>

This code will set up the gallery to display the first image from every post in category ID #. It can be placed in or outside of the wordpress loop.

5 – Link each image to its post

In the case that you would like to provide a link at the base of the main image that links to original wordpress post, simply modify your code slightly.

1
2
3

<li><img src="<?php getImage('1'); ?>"/>
<span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></span>
</li>

This will provide a clickable title in the caption area that is linked to the post.

6 – Write posts with images

Create a category (and insert its ID # into the code in step 4) and fill it with posts that each contain an image. If more than one image is included in a post, only the first will be displayed as a thumbnail.

Once all is said and done, your result look something like this:

In the above example, I have modified the original CSS that is included with the download slightly. To replicate mine exactly, use this CSS:

.pikachoose{width:505px;margin:10px auto 20px auto;}
/* This is the ul you have all your images in */
.pikachoose ul{padding-left:0;width:505px;margin:0;overflow:hidden;}
.pikachoose ul li{float: left;border:1px solid #ccc;padding:2px;;margin:0 6px 4px 0;position:relative;overflow:hidden;}
.pikachoose ul li div img{position:relative;cursor:pointer;}
 
/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main{width:500px;height:317px;display:block; position:relative;}
/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img{position:absolute;top:0px;left:0px; margin: 10px;}
.pika_back_img{position:relative;top:0px;}
.pika_subdiv{position:relative;border:1px solid #CCC; background: #F0F0F0; padding:10px;}
.pika_subdiv img, .pika_subdiv a img{  border: 1px solid #666;}
.pika_caption{width:498px;height:16px; margin-top: 10px; padding: 4px 0 4px 0;text-align:center;background: #F0F0F0; border: 1px solid #CCC;}
.pika_caption a{color:#666;}
 
.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('play.png') top center no-repeat;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('pause.png') top center no-repeat;}
 
.pika_navigation a{font-size: 12px; text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline; }
.pika_navigation{padding-top:10px;clear:both;text-align:center;}
 
/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:456px;width:100px;background:url('rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:456px;width:100px;background:url('fastf.png') top right no-repeat;}

Enjoy!

Cats Who Code

Design Informer

Ecoki

Sherier Designs

Simple Bits

Soh Tanaka

The Pixel

Think Design

Tutorial 9

Viget / Extend

Work Awesome