101 Techniques for a Powerful CMS using WordPress

101 Techniques for a Powerful CMS using WordPress

    // <![CDATA[
    /*

    // <![CDATA[
    //

    This is the first article in the four-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.

    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.

    Wp-cms-1 in 101 Techniques for a Powerful CMS using WordPress

    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>
                 <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:

    Wp-cms-2 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms10 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms4 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms-3 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms5 in 101 Techniques for a Powerful CMS using WordPress

    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">',
     'after_widget' => '</li>',
     'before_title' => '<h2>',
     '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' );
    }
    ?>

    Wp-cms6 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms8 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms11 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms13 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms9 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms7 in 101 Techniques for a Powerful CMS using WordPress

    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.

    Wp-cms12 in 101 Techniques for a Powerful CMS using WordPress

    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.

    http://nhatnamjsc.com/

    Posted in Uncategorized | Leave a comment