Blog

WordPress CMS Tips and Tricks – Part 3

May 19th, 2010PHP, Tutorials, Wordpress, WordPress Tutorials5 comments

As in the first two posts of this series, WordPress CMS Tips and WordPress CMS Tips – Part 2, I will be covering a variety of tips and tricks for transforming a regular WordPress installation into a full-blown content management system.

We will also be using some features only available to WordPress 3.0.

The following tricks will be geared towards theme developers and require at least a basic knowledge of coding, at least enough to manipulate a theme file.

Multiple Widgetized Sidebars

If you look around, you will find any number of posts about how to configure your theme for multiple widgetized sidebars, and all of them will give you something like this:

1
2
3
4
5

// Widgetized Sidebar
  if(function_exists('register_sidebar'))
  register_sidebar(array(
  'name' => 'Sidebar',
));

This will give you one configurable sidebar, and

1
2
3
4
5
6
7
8
9
10

// Widgetized Sidebar
  if(function_exists('register_sidebar'))
  register_sidebar(array(
  'name' => 'Sidebar',
));
// Widgetized Sidebar 2
  if(function_exists('register_sidebar'))
  register_sidebar(array(
  'name' => 'Second Sidebar',
));

will give you two.

That’s simple enough. For a real CMS solution the sort of result we will be looking for is one that provides half a dozen or so widgetized “areas” (sidebars). So we want one that acts as a true sidebar, to the right or left, one that resides above/below page content, one above/below post content, one at the top/bottom of the blog page, one in the footer, and one any where else that you need, perhaps the header.

So, to call any one of your custom sidebars, your code looks like this:

1
2
3
4
5

<div class="widget-area">
  <?php 	/* Widgetized sidebar, if you have the plugin installed. */
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Second Sidebar') ) : ?>
  <?php endif; ?>
</div>

The sidebar function is wrapped in a div for easier styling. We also may want to control the styling elements of each individual widget.

1
2
3
4
5
6

if(function_exists('register_sidebar'))
register_sidebar(array(
'name' => 'Right Sidebar',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

This will place H3 tags around the widget title. For further options visit the wordpress Function Reference.

The (rough) diagram below illustrates the widgetized sidebar layout that my be desirable for CMS solution.

User Configurable Social Networking Links

Social networking links are extremely important for any site that wishes to keep its users updated, and there are dozens of plugins out there that provide lots of nice, configurable options for the site owner to display his or her networking links. But as a theme developer, integrating configurable social networking links is very important for a high quality wordpress theme.

There are numerous ways one could approach this, and my method is by no means the most definitive, or best, answer. But it works nicely.

The first thing we need to do is create a basic theme options page, however, I am not going to go over that here. I suggest following Rohan Metha’s tutorial over on Net Tuts.

So, assuming you have followed the above tutorial, or created a similar theme options page, we’ll move on.

The first thing we need to do is define all the options, which are each of the different social networking sites we wish to support.

In the theme options page section of your functions.php file, each option will look like this:

1
2
3
4
5

array( "name" => "Twitter name",
"desc" => "Put your Twitter name here. If the url to your Twitter account is http://twitter.com/yourname, you would put <strong>yourname</strong> here",
"id" => $shortname."_twitter",
"type" => "text",
"std" => "http://twitter.com/username"),

This will provide an option that looks something like this (assuming you already have a theme options page setup):

twitter screenshot

We also want to allow users to decide which networking info they want to display, so we add another option:

1
2
3
4
5

array( "name" => __('Display Twitter info'),
"desc" => __("Show your twitter name?"),
"id" => $shortname."_twitter_display",
"std" => "false",
"type" => "checkbox"),

This will place a check box above or below the account information that allows the user to “check” or “uncheck” the account info.

Now we need to display the account info somewhere in one of your template files, such as footer.php.

1

<?php if ("true" == get_option('sg_twitter_display')) { ?><?php echo strip_tags(stripslashes(get_option('sg_twitter'))); ?>"><?php } ?>

Important! Don’t forget to replace sg with your own theme’s shortname, defined at the top of your theme options page in functions.php

First we have to check whether “Display Twitter Info” is selected, and if it is, we display the user name. lLet’s take it a step further. Rather than just displaying the account info as a regular text link, let’s make it into a linked image, such as a nice Twitter icon.

1

<?php if ("true" == get_option('sg_twitter_display')) { ?><a href="<?php echo strip_tags(stripslashes(get_option('sg_twitter'))); ?>" class="thumb"><span><img src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter_thumb.jpg" alt="twitter" title="twitter"/></span></a><?php } ?>

That’s it, you’re done. All you need to do now is replicate the above steps for each social network.

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

array( "name" => __('Display Twitter info'),
	"desc" => __("Show your twitter name?"),
	"id" => $shortname."_twitter_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "Twitter name",
	"desc" => "Put your Twitter name here. If the url to your Twitter account is http://twitter.com/yourname, you would put <strong>yourname</strong> here",
	"id" => $shortname."_twitter",
	"type" => "text",
	"std" => "http://twitter.com/username"),
 
array( "name" => __('Display Facebook info'),
	"desc" => __("Show your Facebook name?"),
	"id" => $shortname."_fb_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "Facebook URL",
	"desc" => "Put the URL to your Facebook account here",
	"id" => $shortname."_facebook",
	"type" => "text",
	"std" => "http://facebook.com/username"),
 
array( "name" => __('Vimeo Account Info'),
	"desc" => __("Show Vimeo info?"),
	"id" => $shortname."_vimeo_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "Vimeo URL",
	"desc" => "Put the URL to your Vimeo account here",
	"id" => $shortname."_vimeo",
	"type" => "text",
	"std" => "http://vimeo.com/username"),
 
array( "name" => __('YouTube Account Info'),
	"desc" => __("Show YouTube info?"),
	"id" => $shortname."_yt_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "YouTube URL",
	"desc" => "Put the URL to your YouTube account here",
	"id" => $shortname."_yt",
	"type" => "text",
	"std" => "http://youtube.com/username"),
 
array( "name" => __('LinkedIn Account Info'),
	"desc" => __("Show LinkedIn info?"),
	"id" => $shortname."_linkedin_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "LinkedIn URL",
	"desc" => "Put the URL to your public LinkedIn profile here",
	"id" => $shortname."_linkedin",
	"type" => "text",
	"std" => "http://linkedin.com/"),
 
array( "name" => __('Stumble Upon Account Info'),
	"desc" => __("Show Stumble Upon info?"),
	"id" => $shortname."_su_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "Stumble Upon URL",
	"desc" => "Put the URL to your Stumble Upon account here",
	"id" => $shortname."_su",
	"type" => "text",
	"std" => "http://www.stumbleupon.com/stumbler/username/"),
 
array( "name" => __('Behance Account Info'),
	"desc" => __("Show Behance info?"),
	"id" => $shortname."_behance_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "Behance Profile URL",
	"desc" => "Put the URL to your Behance account here",
	"id" => $shortname."_behance",
	"type" => "text",
	"std" => "http://www.behance.net/username"),
 
array( "name" => __('Google Buzz Account Info'),
	"desc" => __("Show Buzz info?"),
	"id" => $shortname."_buzz_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "Google Buzz URL",
	"desc" => "Put the URL to your Buzz account here",
	"id" => $shortname."_buzz",
	"type" => "text",
	"std" => "http://www.google.com/buzz/username"),
 
array( "name" => __('Deviant Art Account Info'),
	"desc" => __("Show Deviant Art info?"),
	"id" => $shortname."_deviant_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "Deviant Art Profile URL",
	"desc" => "Put the URL to your Deviant Art account here",
	"id" => $shortname."_deviant",
	"type" => "text",
	"std" => "http://username.deviantart.com/"),
 
array( "name" => __('Flickr Account Info'),
	"desc" => __("Show Flickr info?"),
	"id" => $shortname."_flickr_display",
	"std" => "false",
	"type" => "checkbox"),
array( "name" => "Flickr Profile URL",
	"desc" => "Put the URL to your Flickr account here",
	"id" => $shortname."_flickr",
	"type" => "text",
	"std" => "http://flickr.com/username"),

Custom Post Types

The below tip is for WordPress 3.0+ only

With WordPress 3.0 on the fringe of being released, theme developers have some really powerful new tools in their tool chest. One of my favorites is the ability to create custom post types. At first this may not seem like such a great improvement, so lets take a moment to discuss it.

Up until WordPress 3.0, anyone wishing to use WordPress as a Content Management System, had several options when it came to deciding how to organize content.

  • Use categories to organize content throughout the site by displaying only certain categories on particular sections of the site
  • Use plugins, such as PODS
  • Use page templates
  • Use Custom Fields
  • Use a combination of all the above

These methods have worked quite well. I have used them on many different sites using WordPress as a CMS. But all together, they have one major drawback. They’re not intuitive for an end user whom is not familiar with WordPress. Using Categories is definitely the simplest method, and works great for magazine type websites, whose content shares a common theme: news, but what about sites that have many different kinds of content that is in no way connected to other content on the site; content which does not share a common theme.

There is no reason an end user should intuitively know that in order to add content to a particular section of their site, they need to write a new post and place it in a particular category.

The user should be able to simply know by looking at their dashboard how to create new content for various sections of their site.

So that’s what we are going to do, by utilizing custom post types in wordpress 3.0+.

The first thing we need to do is create a new post type, i.e. content type. Each post type will correspond to a section of the website. So, for example, we have a site that has three different sections: About, Services, Products, therefor we are going to create three different post types.

In your functions.php paste the following code:

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

//custom post types for 3.0 installs
 
$args = array(
    'label' => __('About Section'),
    'singular_label' => __('about'),
    'public' => true,
    'show_ui' => true,
	'menu_position' => 5,
    'capability_type' => 'post',
    'hierarchical' => false,
    'rewrite' => true,
    'query_var' => 'about',
);
register_post_type( 'about' , $args );
 
$args = array(
    'label' => __('Services Section'),
    'singular_label' => __('Services'),
    'public' => true,
    'show_ui' => true,
	'menu_position' => 5,
    'capability_type' => 'post',
    'hierarchical' => false,
    'rewrite' => true,
    'query_var' => 'services',
);
register_post_type( 'services' , $args );
 
$args = array(
    'label' => __('Products Section'),
    'singular_label' => __('Products'),
    'public' => true,
    'show_ui' => true,
	'menu_position' => 5,
    'capability_type' => 'post',
    'hierarchical' => false,
    'rewrite' => true,
    'query_var' => 'products',
);
register_post_type( 'products' , $args );

This will define the three different post types we need, and in your dashboard, it should look like the image on the right. Each of these act exactly like regular wordpress posts, except that they are entirely separate. In other words, posts created in any of these areas will not show up in any regular wordpress post query.

In order to show the posts from any of these sections, we need to make a custom query, and it looks like this:

1

$wp_query = new WP_Query("post_type=about&post_status=publish");

Use this query in each place you wish to display the custom post types, and be sure to change the post_type variable to the correct post type.

The WordPress Function Reference has more detailed information about register_post_type, including further options. I highly suggest reading it.

For CMS solutions provided to clients, it may also be useful to hide pre-existing buttons, such as Posts, and Pages.

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

function remove_menus()
{
	global $menu;
	$restricted = array( __('Posts'),__('Pages'));
	end ($menu);
	while (prev($menu))
	{
		$value = explode(' ',$menu[key($menu)][0]);
		if(in_array($value[0] != NULL?$value[0]:"" , $restricted))
		{
			unset($menu[key($menu)]);
		}
	}
}
add_action('admin_menu', 'remove_menus');

We have covered a lot of ground, so we’ll end here. Enjoy!

5 Comments
  1. Aafrin says:
    July 17, 2010 at 11:38 pm

    great tutorial, helps me a lot. thank you for it

  3. Nils says:
    October 21, 2010 at 12:24 pm

    I can create new posts and everything works, but I can’t show the posts on the page.

    In my functions.php there is


    $args = array(
    'label' => __('Home Content'),
    'singular_label' => __('home'),
    'public' => true,
    'show_ui' => true,
    'menu_position' => 5,
    'capability_type' => 'post',
    'hierarchical' => false,
    'rewrite' => true,
    'query_var' => 'home',
    );
    register_post_type( 'home' , $args );

    and when I type

    nothing is shown on the website :-/

    Any suggestions?

    One more thing: Do you have an idea about how it is possible to show only one specific post from all “Home Content” posts?

    Thanks in advance.

  4. Nils says:
    October 21, 2010 at 12:26 pm

    I wanted to say:

    and when I type

    nothing is shown on the website :-/

  5. Pippin Williamson says:
    October 24, 2010 at 6:13 pm

    I sent you an email about this.

Leave a Reply

logo

Copyright 2011 Pippin Williamson