The Comprehensive Guide for a Powerful CMS using WordPress – Part one: 101 Techniques for a Powerful CMS using WordPress
- By Editorial
- Posted in WORDPRESS
- 150 comments
This is the first article in the three-part series, “The Comprehensive Guide for a Powerful CMS using WordPress”. Throughout this article, we’ll be focus on many WordPress Theme hacks, ideas, tips and useful tutorials you need to have ready in hand when developing WordPress websites.
The Comprehensive Guide for a Powerful CMS using WordPress – Part 2
The Comprehensive Guide for a Powerful CMS using WordPress – Part 3
There are some technical stuff we have to get out of the way first. Let’s take a look at useful, yet rather unknown techniques for a powerful CMS using WordPress. Each section of the article presents a suggestion and provides you with an explanation of the solution for each suggestion.
WordPress CMS Hacks and Tricks
1. Create a static home page
By default, a WordPress home page shows chronological blog post entries — with the most recent post at the top. If your goal is to have a WP-created Page with static information, WordPress will allow you to select a different page as your home page so that you can display more traditional content like information about yourself or your business.
How To »
In your admin area, just go to Setting » Reading. Here you can decide if your home page will display your blog posts or a static page, if you choose a static page you can also choose which page to be your home page from the select box.
Points to take care »
- First problem you may run into when you make a static page your home page is that the link to that page now appears in the main site navigation. Usually the page called “Home” in the main site navigation. This tutorial shows how to remove one of those links from your site navigation so that visitors to your site are not confused by the duplicate link.
- The second problem is you will see that link again in the sidebar widget, the fix is pretty simple. The WordPress Pages navigation widget now allows you to exclude any page from its links by inserting the Page IDs of pages you want to exclude into the “Exclude” box in the Pages widget.
2. Customized Navigation bar
Adding too many pages to a WordPress blog that has a navigation bar in the header can really make your WordPress blog a mess. There are options to control what pages are shown in the navigation bar and even a way to add external links.
How To »
The Template Tag, wp_list_pages(), displays a list of WordPress Pages as links. It is often used to customize the Sidebar or Header. You can simply edit the header.php file and exclude any page id you want, you can also include the pages you want. So now the code of the top nav bar will look like this:
<ul id="pagenav">
<li class="<?php if ( is_home() ) { echo 'current_page_item'; } ?>">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">Home</a>
</li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&exclude=17,38' ); ?>
</ul>
Creating Two-Tiered Conditional Navigation in WordPress »
A common navigational scheme, parent pages on top and child pages (if they exist) on bottom:
How To »
Darren Hoyt goes through a nice solution to help us: 1) query the page, 2) determine if there are child pages, and 3) properly highlight both the .current_page_parent and .current_page_item links.
<ul id="nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>
And then he show us how to use CSS to make sure the :active and :hover states display correctly whether or not subpages exist — if they do, the primary nav uses current_page_parent, if they don’t, it resorts to simply current_page_item.
Use breadcrumbs
Breadcrumbs are great for so many reasons: usability, SEO, etc. In terms of plugins, there are many options, my favorite is Yoast’s Breadcrumbs, because it’s easy to implement. Another breadcrumbs plugin, gives you a new template tag called breadcrumb_trail() that you can place anywhere in your theme. Once that’s done, it’ll display a hierarchical menu of where the current visitor is on your site. It’s quite useful if you have more than a few pages or posts.
3. Making Your Content Unbreakable
There is one big drawback to using WordPress as a CMS: the lack of custom content types/groups, an area where developers put restrictions on how clients insert content. This is fairly easy to do with some knowledge of custom fields, but can be a little complicated if your client is new to WordPress. Developers must create workarounds to keep the content clean, portable and relatively unbreakable. Darren Hoyt discussed some solutions for this issue, probably not the best solution out there but could get the job done.
How To »
Luckily, WordPress has a solution for us. Liam is using a little something called add_meta_box. This is a detailed and quite useful tutorial on creating custom write panels for the WordPress Write Post page. Custom write panels are most useful for customized installations of WordPress and could be used to add many different types of information into a post both easily and quickly.
This is is a great example of how useful and flexible Custom Fields can be in developing a full CMS with WordPress.
How to preset text in the WordPress post editor »
There are built-in actions and filter hooks that allow us to change things. Justin Tadlock is showing us how to use a simple filter to preset text in the WordPress post/page editor. This technique will work with both the visual and HTML editor. This technique might be very useful for clients who want to create a new page and not sure how to start, you can just create a demo text for them and they will just modify using your template post.
All you have to do is open functions.php in your favorite text editor and input this PHP code:
<?php
add_filter( 'default_content', 'my_editor_content' );
function my_editor_content( $content ) {
$content = "<h3>Title of the first paragraph</h3>
<p>description</p><p class='img'><img src="" alt=""/></p>";
return $content;
}
?>
It’s as simple as that. Just a few lines of code. I added here some XHTML code so the client won’t need to do this himself.
4. How to widgetize your theme
WordPress Widgets are also known as “sidebar accessories” which are WordPress Plugins or add-ons to your WordPress blog sidebar. This could come in handy for your client, WordPress Widgets allow the easy addition of design elements, gadgets, content, images, and more to your WordPress sidebar to personalize the blog without knowing HTML, PHP, or any code.
How to Widgetize Your WordPress Footer »
Many themes have a widgetized sidebar or even two. But what about widgetizing your WordPress footer. Sometimes it’s a good to have widgets at the bottom of the blog for links to other posts and maybe some details about yourself. In this simple tutorial you will learn how to create 3 footer widget areas which can be edited from the admin area of your WordPress installation.
Simply open your functions.php file in your current theme folder, and replace the current sidebar widget code with the one below:
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array('name'=>'subfooterleft'));
register_sidebar(array('name'=>'subfootercenter'));
register_sidebar(array('name'=>'subfooterright'));
What this does is registers 3 sidebars called subfooterleft, subfootercenter and subfooterright which will correspond to the left, center and right widgets in the subfooter. A detailed tutorial would be great for you to guide you through the steps of styling the footer widgets, adding the markup and finally adding the widgets through the Admin area » Widgets
How to widgetize your page menu in WordPress »
We all feel the pain of having to customize our page menus for pretty much any WordPress theme. There are several methods that people have been trying to overcome this one frustrating thing with WordPress, but the method Justin Tadlock is describing here is easy and requires little coding. Your theme needs to use the wp_page_menu() function to add its page menu so you can completely widgetize your menu.
Open your theme’s functions.php file and add the code below:
<?php
register_sidebar( array(
'name' => 'Page Menu',
'id' => 'page-menu',
'before_widget' => '<div id="page-nav">',
'after_widget' => '</div>',
'before_title' => false,
'after_title' => false
) );
add_filter( 'wp_page_menu', 'my_page_menu' );
function my_page_menu( $menu ) {
dynamic_sidebar( 'page-menu' );
}
?>
Now, head over to the Widgets page in your WordPress admin. Select the Page Menu widget area and create your menu there using the different methods described in this great tutorial.
5. Custom post and page templates
Page templates let you change the design and/or functionality of particular pages by using a certain template. This new Page Template will then override the default page.php Page Template included with your Theme. If you want to use another page template, simply open your Write Page admin panel » Attributes and select the template you want for that page. More details can be found here.
Set Up Custom WordPress post Templates »
You can use a specific post template for single posts that you want to function differently. In a recent project i worked on, i didn’t want the posts in the news category to look or behave like the rest of the posts, i thought it would be better to have another template for the posts in the “news” category. I found a smart solution, you will need to put only the code below in your single.php file in your current theme folder:
<?php
$post = $wp_query->post;
if ( in_category('13') ) {
include(TEMPLATEPATH . '/single13.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>
Here we are telling WordPress: If the post is in category ID number 13, display single13.php. If not in category ID number 13, display single1.php. Now you just create 2 new files “single13.php” & “single1.php”, and do whatever you want to do. From this, you can make as many single post page looks as you want, as long as they are styled by their category.
WordPress Single Post Templates- this post goes through a simple technique to have post templates like page templates. Austin recommends using a filter in your functions.php. Here’s the code to add to your theme’s functions.php file. (be sure you paste this code between tags):
add_filter('single_template', create_function('$t', 'foreach( (array) get_the_category() as $cat )
{ if ( file_exists(TEMPLATEPATH . "/single-{$cat->term_id}.php") )
return TEMPLATEPATH . "/single-{$cat->term_id}.php"; } return $t;' ));
This technique solve the multiple categories issue (a post is included in more than one category) since it cycles through all the categories in the array and checks to see which one of them has an associated post template. When it finds one, it uses the post template file, but if it doesn’t, then it falls back on the default single.php template.
6. Permalink Structure
Permalinks are the permanent URLs to your individual weblog posts, as well as categories and other lists of weblog postings. We won’t go through the usual techniques to how to beautify your links and get rid of the post id at the end of the url, display date, etc…
Advanced Customization of WordPress Permalink Structure »
Here is an advanced tutorial for customizing your permalink structure of WP’s pages system.
How to remove the “category” suffix in the category permalinks
Today we want to check out “>how to make your category url don’t look like they are blog categories, so instead of:
http://yoursite.com/blog/category/category-title/
We have:
http://yoursite.com/category-title/
How to remove Category Base from WordPress Permalinks
Some bloggers do not want to have any category base in their Permalinks structure. WordPress does not allows you to do it. Here is how you can get it done.
7. Create a sitemap for the whole website
Google XML Sitemaps- This plugin will create a Google sitemaps compliant XML-Sitemap of your WordPress blog. It supports all of the WordPress generated pages as well as custom ones. Everytime you edit or create a post, your sitemap is updated and all major search engines that support the sitemap protocol, like ASK.com, Google, MSN Search and YAHOO, are notified about the update.
8. Disable Comments and Trackbacks
Now you want to disable comments on your blog, go to Discussion Settings » Default article settings to disable the comments on your blog. You can also edit your single.php file and delete the code that calls the comments.php file.
9. Use PHP in your pages and posts
Conventional ways of creating advanced pages in WordPress was to create all your XHTML/PHP/CSS in a template file and then create a page and link the two, this works, but you end up with loads of template files and editing them is a pain and not very manageable.
Using one of these 2 plugins will allow you to easily add any code such as XHTML, CSS, PHP, JavaScript directly inside of the post box for your posts and will be executed as it should be.
Exec-PHP or runPHP plugins to executes PHP code in posts, pages and text widgets.
10. Creating Custom Content Type with Flutter
Flutter is made precisely for CMS-making, allows you to create custom Write Panel (Posts, Pages, and Theme Options). This, basically, is a custom content type in which you can add your own fields. So, if a WordPress installation gives you two different content types (Post and Page), Flutter enables you to add more Write Panels to your likings. You can create any type of field (File Uploads, Audio, Video, Checkboxes, Dropdowns) to make as simple as possible for your client or yourself to enter content.
Things To Consider When Using WordPress as a CMS
There are the certain points we need to think about before choosing and designing a website where WordPress will be used as the CMS. Devlounge has shared “Things To Consider When Using WordPress as a CMS“, this is a must read post for anyone thinking about using WordPress as CMS. Below you will find just few of the points, you need to check out this article to get a better understanding.
- Is WordPress the correct CMS? Will it fit the needs? Is the translations available for the WordPress backend good enough? How will it be upgraded?
- Will I need to extend WordPress using plugins? Are any hacks to the core necessary, because if they are, how will I make sure that these won’t break when the core is upgraded?
- What types of content will there be, and what should be deemed static (i.e. use Pages), and what is flowing updates (i.e. Posts)? How will I present this, and what is the main type of content?
- How will the permalink structure be? Should it really say “category”, why not “view” or “updates” or something else?
WordPress CMS Theme Implementation Tutorials
- WordPress CMS Part 2: Theme Implementation- A very detailed tutorial taking you through the steps to create your CMS featured theme.
- WordPress CMS Part 2: Theme Implementation- A very detailed tutorial taking you through the steps to create your CMS featured theme.
- How to Use WordPress for a Portfolio Site – Part 1 & Part 2- Using WP for a portfolio site (primarily graphics and design-based).
- How to use WordPress to run a magazine, news website
Must Read Posts
Five Ways to Familiarize Clients with WordPress- What developers have tried to make their clients more comfortable with WordPress. Here’s a wrap-up of the best and most common suggestions.
Don’t mess with my Toot Toot- This is a tutorial about a plugin the author created to add a very simple new and different type of post.
Using WordPress as CMS- A series of posts on Using WordPress as a CMS – from the more theoretical to the more practical (sub)topics.
WordPress as a CMS- In this screencast, Chris Coyier shows off a number of WordPress features that make WordPress very “CMS-like”.
Please share your experience and what was the best techniques you found to be very useful when developing WordPress as a true CMS platform.
ceviri, 28 August 2010
thats good
cevirmen, 28 August 2010
thankk you zafgan
Kasun Kapuwatta, 19 September 2010
Thankyou
lars, 26 September 2010
Awesome post. I think WordPress is ready for much more than just simple blogs.
rüya tabiri, 26 September 2010
awesome , aww thats cool
çeviri, 26 September 2010
at the point of start the eard
Benk Oke @Wordpress Hostgator, 03 October 2010
i very like with wordpress, valid HTML..
inblues, 18 October 2010
thanks for the info. WordPress really a very powerful piece of work.
Lox, 15 November 2010
There is a nice plugin that makes using nav menus easier in wordpress 3.0, Gecka Submenu.
It can also be used to add any menu, or portions of menu in any page witch eases users navigation when using wordpress as a CMS.
Check it out:
- plugin page
- video demo
Ida Susin Weblog, 22 November 2010
Wow awesome!:)
lindsay, 04 December 2010
I need to design several websites for different clients. I am trying to use WordPress because it appears to be the easiest for clients to utilize when wanting to make updates to their website. However, I can’t figure out how to create different websites using WordPress. Once it is downloaded it will only allow me access to the first website I am designing. So… how do I create other websites? Any help would be much appreciated.
Thanks,
Lindsay
Luis, 14 January 2011
Awesome post. I think WordPress is ready for much more than just simple blogs.
projeksiyon, 25 January 2011
thank you thats awesome article
projeksiyon, 27 January 2011
thank you sooo much
Elroy Corte, 01 March 2011
My business is really enjoying reading your well written read. It seems like spent many time and energy in your weblog. I’ve bookmarked it i am longing for reading new article. Sustain the great work!
Tianjin Guide, 03 March 2011
it is really a helpful article,thanks
Ryan @ Creating a Website, 14 March 2011
Nice list of basics. This would’ve been helpful when I started learning wordpress.org a few years back.
News Blog, 14 March 2011
I don’t have wordpress site but after read this article I will try to make it
AmilaJ, 22 March 2011
Im getting in to word press and this is awesome stuff, Im going to kick some A**es yei finally got something to read which is exactly what i wanted
Annmarie Ploetz, 23 March 2011
Wonderful post! GA is also my biggest earning. Nevertheless, it?€?s not a much.
Alex, 21 April 2011
Good matrix for self-development, a lot of interesting things
Jaki Levy, 05 May 2011
These are great WordPress resources – I actually just started digging into a really really solid book on WordPress 3.0. It’s got some really nice code samples, and is written by a few pro WordPress developers (including some from Envato). I’m actually giving away 2 copies of the e-book on my site – check out the details about the e-book and the giveaway here – I think you’ll dig it : http://bit.ly/lq20Ff
Calvin Murrill, 19 May 2011
Hey would you mind stating which blog platform you’re using? I’m planning to start my own blog in the near future but I’m having a tough time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something unique. P.S Apologies for getting off-topic but I had to ask!
Brunzino, 25 May 2011
Thanks for the great article, very helpful!
I’ve been looking for a tool like Flutter, which is very great, but now abandoned. The project has been picked up, however by “Magic Fields” and is being maintained much better.
Thanks again!
Patricia Cossin, 20 June 2011
Thanks for the recommendation WiseStamp
Manish, 28 June 2011
Awesome article and Awesome WP.
Wordpress gives us huge flexibility to build anything.
Spend time hack wordpress and their plugins and write your own and you’ll have the site what you want. You can refer my site. I belive that I’ve managed to make optimum use of WP. lolz :D.
Please let me know some other sites if you think that are great. There is so much to learn while seeing the sites build on WP.
As they say “Doing is Learning”
tory burch uk, 04 August 2011
I read your post and I want to say that it is very good and informative. I like it and I appreciate you for your effort.Thanks.
Petter Thowsen, 14 September 2011
Great post! :)
Asif Ali, 24 October 2011
Thank very much for such a great helpful material.
I have set up a static page for my client. He already has a theme called Diy thesis. Now the client wants me to make the static page cms friendly. She wants to change the color of the headline and also change the thumbnails. Is that possible on a static page? Thanks again.
Really great stuff and effort!
rae, 05 November 2011
it was useful.
brad, 09 November 2011
Awesome