Talk In Code

A tag cloud is a name for a collection of keywords that are displayed as a big block of text. Usually the most commonly occurring keyword is the largest, and the least commonly occurring keyword is the smallest. Tag clouds are a neat way of allowing your users to navigate your content in a different way, simply be letting them look over the cloud and linking each keyword to sections of your site that contain that word.

WordPress comes with this function built in and is already available as a widget. However, after adding a few hundred posts this tag cloud can get rather large and this widget can stretch your sidebar to stupid proportions. A way around this is to create a page that can be used to display this large tag cloud. The first step is to create a page template that will be used to run the correct WordPress function to display the tags. This is done by making a copy of your normal page template (call it tagpage.php) and adding the following code at the top.

<?php
/*
Template Name: Tags
*/
?>

When you go to create a page you will see a list of available templates to select from, one of these will be called Tags. Add in your title and some descriptive text and select this template.

Next, we need to add a call to the wp_tag_cloud() function, this basically prints out a small tag cloud. Add the following code into your page template so that is fits in with the rest of your design.

<?php wp_tag_cloud(); ?>

As with most WordPress functions, wp_tag_cloud() allows you to add lots of parameters to change the output of the function. There are lots of different options available, but the main ones that will be used are as follows:

• smallest – This designates the font size to be used for the least commonly occurring tag. The units are by default in 'pt' or points, but this can be changed via the unit parameter.
• largest – This designates the font size to be used for the most commonly occurring tag.
• unit – Unit of measure as pertains to the smallest and largest values. This can be any CSS length value, e.g. pt, px, em, %; default is pt (points).
• number – This tells the function how many tags to include in the tag cloud. The default is 45, but to print out all tags just use 0.

These parameters are given as an encoded string, for example, to change the number of tags printed from the default of 45 to 20 use the following code.

<?php wp_tag_cloud('number=20'); ?>

Multiple parameters are separated by the & character.

<?php wp_tag_cloud('number=20&largest=200'); ?>

Take a look at the WordPress manual for more information about the wp_tag_cloud() function

To demonstrate I have created a tag cloud page on Talk In Code, using the following code to create the cloud.

<?php wp_tag_cloud('smallest=7&largest=50&number=500'); ?>

Finally, there is also a function called wp_generate_tag_cloud() that has the same functionality as wp_tag_cloud() but will always return the HTML string that makes the tag cloud.

One neat thing about WordPress is the ability to add images to your posts in a quick and easy manner. You can also create thumbnails of larger images and link to them using a captioned image. The only problem is that when you have sorted out how your images look in your post in the admin section they just don’t appear the same in your template once you have published it.

This is because WordPress creates a set of styles that are used in the admin section and the default WordPress templates. However, these styles are usually left out of custom template stylesheets. If you want to use the same sort of formatting that the WordPress admin section has then open up your stylesheet file in your template and put the following stylesheet rules in at the bottom.

.alignleft {
float:left;
margin:20px 20px 20px 0pt;
}
 
.alignright {
float:right;
margin:20px 0pt 20px 20px;
}
 
.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
 
.wp-caption {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
background-color:#F3F3F3;
border:1px solid #DDDDDD;
margin:10px;
padding-top:4px;
text-align:center;
color:#000000;
}
 
.wp-caption img {
border:0pt none;
margin:0pt;
padding:0pt;
}
 
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0pt;
padding:0pt 4px 5px;
}

With this simple fix you will now have much better looking image styles.

One note for blog writers out there is that if you want to float an image left or right then you need to place it before the text you need to wrap it around. When you align things to the center the text will not wrap around it.

There is an easy way to create a custom page for a particular page using WordPress that doesn’t involve adding custom page ID checking code. This might be useful if you want to remove certain aspects of the theme (like a side menu) just for that page. The way this is done is by using the Template Name tag in the following manner.

<?php
/**
* Template Name: Page Template
*/
?>

Make a copy of your default page template in your theme directory and put this snippet of code at the top. You will now find that when you open the page to edit it there is a section called Page Template. This contains a drop down list of all of the templates available, including the default. You can create multiple page templates by just changing the value of the Template Name tag.

If you are setting up a WordPress blog the chances are that you will be looking into modifying the default theme to be something a little more customised to your site. Theme development can be as complicated or as simple as you want, or are capable of doing.

WordPress themes are stored in the folder wp-content/themes/, each theme being stored in it’s own directory.

The basic theme must contain two basic files, the main control is done from a file called index.php and a file called styles.css, which is also needed to allow you to display the theme within the admin section of WordPress. If you don’t want to use the styles.css file then this is fine, but it should be present and contain the following lines.

/**
* Theme Name: Your theme name
* Theme URI: www.talkincode.com
* Description: A theme designed by the guys at talkincode.com
* Author: Tech
* Author URI: talkincode.com
* Version: 1.0
*  
* General comments can go in this space.
*/


This is all integrated into your WordPress administration section under themes. If you want a screenshot to appear as well as the description then create a file called screenshot.png, make it 300 pixels wide by 225 pixels high and put it in the same folder as the rest of the files.

There is also a file called functions.php in which you can define custom functions that can be used in your template. This includes, but is certainly not limited to, adding a widget definition. The functions file is loaded right at the start of the template and is looked at when viewing the administration section of your site. Any code kept in the functions.php file is called rather like a plugin and so it is possible to write plugin-like code in this file and have it act accordingly.

Other files can be included very easily.

The header file will contain the HTML at the top of the page (including styles and meta tags) and will get included via the get_header() function like this.
<?php get_header(); ?>

The footer file will contain the HTML at the bottom of the page (including copyright and site tags) and will be included via the get_footer() function like this.
<?php get_footer(); ?>

The sidebar of the site can be included using the get_sidebar() function. This can contain a widget call or
<?php get_sidebar(); ?>

If anything else is to be included from the template folder then the TEMPLATEPATH constant can be used in conjunction with a include() function call.
<?php include(TEMPLATEPATH . '/searchform.php'); ?>

WordPress will automatically recognise certain files depending on what action is being taken. For example, when looking at a single post or page the single.php file is used instead of the index.php file to load the template. If this file doesn’t exist then it uses the standard index.php file.

Also, if the user clicks on a link for a category, WordPress will load the category.php file. If this is not present then WordPress tries to load a file called archive.php. If both of these files are not present then WordPress load the main index.php file instead.

A files called 404.php is also used when a 404 response is needed. This file is called automatically during a 404 response and does not require any .htaccess modifications.

A lot of default tags are available for you to use if you don’t want to hard code things into your template. For example, to include the name of your blog in your template you can use the following code.

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

In addition to the name tag the tags description, url, admin_email and version are also available.

The Loop is used by WordPress to display each post in turn. The loop takes the following format.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// the contents of the post can be displayed here
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

There are a number of different tags that can be placed within the loop to print out different information. For example, to print out the content you just need to call the the_content() function.

<?php the_content(); ?>

The best way to get acquainted with WordPress templates is to simply make a copy of the default template that comes with WordPress and edit it to suit your needs. In this way you can figure out how things work, why the template is set up as it is and what files do what.

The following links go to specific pages within the WordPress documentation and should also help out.

codex.wordpress.org/Stepping_Into_Templates: The WordPress documentation on getting started on templates.

codex.wordpress.org/Stepping_Into_Template_Tags: A list of the different tags available for both the bloginfo() function and within the loop.

codex.wordpress.org/Template_Hierarchy: This page looks at the files available for a theme and when they are called.

codex.wordpress.org/Theme_Development: The WordPress documentation on developing themes.

codex.wordpress.org/Site_Architecture_1.5: The different files available for templating. Although this document was written with version 1.5 the content seems valid.

codex.wordpress.org/Function_Reference: A reference document for all of the functions available in WordPress. Although some don’t matter for template development this is still a good resource for template functions.

codex.wordpress.org/The_Loop: Help on The Loop.

codex.wordpress.org/Using_Themes: Help on using themes.