How to use WordPress as a Truly Customized CMS (Multiple Headers, Footers, Sidebars and more!)
I love WordPress… ok scratch that… I ADORE WordPress! I have used it for several of my own personal blogs, as well as to develop blogs and web sites for clients.
However the more I use it - especially for my own projects where I have full creative reign - I am constantly amazed by just how much it is capable of.
Not Just For Blogging - A Live Case Study
WordPress is incredibly versatile, in that although it is primarily known as a blogging platform, it can be used to run a non-blog web site as well.
I had been intrigued by the varied uses of WordPress, and knew that it was time to upgrade my own business web site to use the platform. Web designers / developers are often most critical of their own work and I was very specific as to how I wanted my own site to function.
I’ve finally given WordPress’ capabilities a full and through test by converting my own site from static HTML to WordPress.
This Is What They Call “WordPress as a CMS”
It is WordPress’ administrative area that turns it into a CMS or Content Management System. The WordPress admin area provides a WYSIWYG (What You See Is What You Get) editor - similar to a mini-version of Microsoft Word.
This allows virtually anyone to add and edit content themselves - all through their web browser - and without knowledge of HTML.
Of course, for more advanced users, there is a “code view” option where you can edit HTML code in a page, post or article, but it is not necessary for creating simple content.
Initial Settings - Permalinks and Comments
The WordPress installation process is a fairly simple one, assuming you have the right web hosting (which must be capable of supporting the PHP programming language, and running MySQL databases).
Once installed, there are several settings to update. Some of the essentials being to update the Permalink structure, and in the case of a web site vs blog, I wanted to remove the comment features, as well.
Permalinks - also known as “pretty URL’s” - change your post URL’s from something like “/index.php?p=364″ to “/web-design/wordpress-as-cms/”
Typically with a blog, posts are setup with date based permalinks. In the case of the main site, however, I wanted to go with a more traditional format of “/category/postname/”- which help give the illusion that all areas of the site are Pages, as opposed to a combination of Pages and Posts.
I also turned off Comments and Trackbacks (links from other sites back to your own) throughout the site. Comments are an essential part of a blog, but not something I wanted on the main web site.
The comment settings are updated through the WordPress admin area, however I took this a step further by also removing the comment loop from my template files - basically just because I didn’t want a notice that “Comments are closed” on every page of the site, as well.
How to Resource Link…
Using Permalinks
Using a Static Front Page
Once the main site settings were complete, it was time to begin on the content pages. To begin with, I wanted the site to use a static page for the home page (not the typical format of displaying the most recent posts).
This is a very simple setting in the WordPress admin area, which lets you specify either using the latest posts or a static page as the front page of the site.
How to Resource Link…
Creating a Static Front Page in WordPress
Individual Page Templates
Using the Page Template option (and with some extra PHP files), you can indicate separate templates to be applied to individual pages.
By creating a home.php file,* the pre-defined front page of the site can use a different page template than the rest of the site, as well. In my case, I wanted the home page to use a specific header and footer, but NOT use a sidebar.
* It’s important to note that the home page file MUST be titled home.php - anything else, even page_home.php as I had tried to use, will not fully work.
On the interior pages, I wanted to have unique headers on each page - each one having a different slogan under the “Hello! Welcome to iDesign Studios” text at the top of each page, depending on which section a visitor is on.
There is also a difference on the header and footer of the site, depending on if you are in a main site section - take the Portfolio page, for example - vs the more personal About Me section (which includes my bio and resume, etc.)
How to Resource Link…
Creating Your Own Page Templates
Individual Templates For Categories and Posts, Too!
While there is a readily available Page Template option when creating Pages - there is no similar option when creating Posts. I admit I had to do a bit of digging around on Google to find a solution to this problem, but I’m glad to say that I found it!
This one involves a bit of PHP scripting (explained very well at the link below) - but basically, by knowing your category ID’s, you can specify posts contained in different categories to use specific page templates.
This means that I was able to keep the header and sidebar from my Portfolio page along with my individual Portfolio posts, as well. Take for example the main portfolio page vs an individual portfolio post. By clicking through on the site, you’d really have no idea if you were viewing a Page or a Post, which was what I had hoped for.
How to Resource Link…
How to Set Up Custom WordPress Category Templates
Multiple Dynamic (Widgetized) Sidebars
Even more important than having individual headers and footers, I wanted to have separate sidebars, as well.
For example, on the main About the company page, I wanted to highlight one of my client testimonials, as well as link to additional information about myself (bio, etc.). On the Testimonials page, I wanted to include a PHP code that would automatically list all of the Testimonial posts so you can easily navigate from one to the next, etc.
Although I could just as easily have hard-coded the content of each of the sidebars in PHP, you have to admit that using widgets are easier. I could make updates anywhere as long as I have a web browser (without having to download/upload updated PHP files, etc.)
On each of the page templates, I’d link to the individual sidebar files. Where the real work comes in, though (which enables all of my sidebars to be widget ready and editable in the WP admin area) is to make some updates to the functions.php file.
How to Resource Link…
How to Create Multiple Dynamic Sidebars for WordPress
Seamless Pages and Posts
Then comes the integration of WordPress pages and posts. On most blogs it’s quite obvious which is which. However, in this case I didn’t want to highlight content as being specific posts or pages - I wanted it all pretty much hidden.
With careful organization of my page and category structures (as well as the help of the Redirection Plugin) you’d never know the difference.
For example, if you tried going to http://www.idesignstudios.com/category/portfolio/ - instead of getting a chronological listing of Portfolio posts, you would be redirected to http://www.idesignstudios.com/portfolio/ which is the page I have setup with a general introduction to the portfolio, as well as a specific order of my work samples, etc.
Two additional plugins that proved to be essential for this project are Exec-PHP and Deactivate Visual Editor. Both plugins combined enabled me to add PHP code to my pages and posts from within the WordPress admin area. You can see this in action in the FAQ page, for example, where the questions are automatically inserted onto the page, just by including the “get_post” tags as demonstrated in the link below.
How to Resource Link…
Template Tags - Get Posts
Putting It All Together
There were so many individual elements involved, but combined, the new site takes “WordPress as a CMS” to a new level.
With some of the automated features - such as the PHP code mentioned above to automatically list Testimonials and FAQ’s - all I have to do is add a new post whenever I have a new client recommendation, for example, and it’s automatically added to the main Testimonial page and sidebar.
I haven’t made use of the Feed options for the site yet, but by using posts for some of the more frequently updated content (especially the Portfolio section), this will be a great way to keep clients and prospects updated about company news and updates.
This was a truly great project that I learned quite a bit from. Nothing like really being able to spend time working on your own projects, where you can learn new techniques that you can later utilize for client projects, as well.
This is yet another demonstration of exactly why I love web design and development so much! It’s a never-ending learning experience, and it just gets better every time!
From the Experts - Complete Resource Lists
For the developers out there, here are some of the resources that I found to be invaluable while re-developing my site with WordPress.
These guys explain the techniques better than I could - and they helped me tremendously - so I figure a little bit of link love is in order!
- WordPress Codex Template Tags
- Creating a Static Front Page in WordPress
- Creating Your Own Page Templates
- Template Tags - Get Posts
- How to Set Up Custom WordPress Category Templates in Four Easy Steps
- How to Create Multiple Dynamic Sidebars for WordPress
Then come the plugins! Since WordPress is Open Source, there is a big community supporting the software. Many talented developers create plugins that extend the software’s functionality.
With several thousand plugins currently available, the possibilities are seemingly endless! You can do so much with plugins but for this particular project, there are a few that were essential.
Big thanks to everyone involved in creating the posts and plugins listed here - without you, my site wouldn’t have been possible as I had envisioned!
If You’re Not a Developer and This Is All Greek To You…
Yes, it’s time for the obligatory shameless plug!
With the resources above, web developers reading (especially those versed in WordPress) should have no problem putting together a similar site.
But, you’re not all tech types (I don’t think…) So, if you need a web site of your own, or realize it’s finally time for an upgrade, but have no idea where to start…
I hope you’ll keep me in mind!
FREE Web Design Proposal and 10% OFF!
I’m offering a 10% discount on all web site design and development services until September 30, 2008.
Please check the Services page on the main site for details. I’ll be happy to put together a FREE detailed proposal with several options to choose from - just fill out the Quote Request Form or send me a quick message on the Contact page.
I look forward to hearing from you!
By the way, I offer “Design Only” and “Development Only” services that are great for other web designers / web developers who prefer to focus only on one or the other, and outsource the rest…
Del.icio.us . Digg . Float . Bump . Mixx . Reddit . Stumble . Twitter . Vot.eti.me
Related Posts
- It’s Breast Cancer Awareness Month - Go Pink for October
- New Portfolio Section of Blog
- Just Three Things - November 2008
Tags
case study, cms, content management system, featured, wordpressSponsor
August 27th, 2008
Hi there,
As promised, I read your post. After reading through the post, I double confirmed that my thought on using WordPress for a non blogging project, is positive. I am a newbie in web design industry, and working hard to be a successful one. So, thanks a million for the post, think it really helps a lot.
Dan
August 27th, 2008
Great post. I’m about to take on a similar project for a friend and this will be VERY helpful!
dees last blog post..10 Reasons I Love Weekends
August 27th, 2008
Great post! I always wondered about this, and your set of links will be very helpful to me while I learn to implement my own wordpress website.
August 27th, 2008
Great article! I’d begun constructing a site for my web-label, HPL Laboratories of Pennsylvania, using WP a few weeks ago, and the project was going on just fine, but thanks to your article, I’ve learned some new tricks to try that have made certain design and operational elements much easier to implement. Werd to ya mutha.
Derek C. F. Pegritzs last blog post..DISQUSting! Multi-threaded comments are go.
August 27th, 2008
Great posts about using WordPress as a CMS.
August 27th, 2008
Hi, just a quick word of critique:
I would think that you as a ‘professional webdesigner’ would know that white on black text is fairly difficult to read, let alone grey text. Same goes for the green links.
Kev
August 27th, 2008
I think I love you.
(and not in some kind of weird stalker-guy way, either)
August 27th, 2008
Great, This will help me as i code my wordpress themes, thanks
Max | Design Shard
August 27th, 2008
Thanks for your post. I can learn something new even though I have many experience in using WordPress as CMS. WordPress is great. In the past two years, I used it to build several websites that collect and aggregate Hong Kong location-based information. I am proud that I picked up the right tool. You might be interested to see how WordPress can be used in such a way.
August 27th, 2008
Great post! As a developer who makes use of WP on a regular basis I firmly agree that it can usually bend to whatever desire you need.
I have developed a plugin that you / others may find useful called Idealien Category Enhancements (ICE) - idealienstudios.com/code/ICE/index.html - which brings the selection of category and post templates into the admin module like page templates are. No longer must you use category-192.php and dozens of other templates. Set one via the manage > categories page and it will be used in whichever categories you assign it to via manage > categories. Same goes for posts in the template. Lots of inheritance / sub-category / post configuration options too!
August 28th, 2008
comprehensive tutorial - but im not sure why you would go to so much trouble customizing wordpress for a static site when you could just use a simple cms like cushycms
August 28th, 2008
@franky j: maybe she doesn’t want a hosted solution
August 28th, 2008
Hi there, helpful article!! Yeah, I also use Wordpress as CMS too, but it’s just a simple one, never deep into further more for example the multiple widget sidebar and so on.
So thanks ya! Delicious this post!
August 28th, 2008
Wordpress Rocks the world!
Rahuls last blog post..Pushpa Kamal Dahal, first Prime Minister of Republic of Nepal
August 28th, 2008
nice - any suggestions about how to integrate a picture gallery into a wordpress site? want to do a portfolio for a friend’s site
August 28th, 2008
Great content for web design
August 28th, 2008
Great post and a nice addition to the ‘Wordpress as CMS’ idea to have separate sidebars without having to create new template files. I use WP almost exclusively now for my own sites and for clients - and like you Iove it!
I would also suggest anyone using Wordpress as a CMS use a fwe extra plugins - SImply Exclude allows you to excluse individual pages or posts from your blog front page, search results, archives etc. which is often useful for short term news. SEO Title Tag does pretty much what it says on the tin, and allows you to specify the titles explicitly, and Feedburner Feedsmith reroutes all feeds via a single Feedburner account for easier tracking.
Bill
Bill - Online Business Logics last blog post..Commission Blueprint Review
August 28th, 2008
anyone care to package this up as an installable wordpress config?
mark rushs last blog post..Link Bait Ideas – Making Best Use of Wikipedia.
August 28th, 2008
I’ve been building websites on WordPress for a few months now but I haven’t implemented multiple sidebars because I haven’t been sure how or if it was worth the effort. The widgets always seemed like a great idea, but I’ve just coded the PHP into the regular sidebar. I had just decided to look into creating a more integrated and adjustable site when I came across this post. Thanks for the resource. It came just when I needed it! I’m not a designer, just an obsessed hobbyist.
August 28th, 2008
In my experience, even out of larger agencies there’s a surprising number of them using WP as a CMS. Most of them have pretty hacked up custom installs and plugins in use.
Nice article. WP is a bit of a mystery (and mess) for people starting out with it.
Cheers
August 28th, 2008
well our PartyTrail blog section will need loads of your help… thanks for sharing this information… great job…
August 28th, 2008
Wonderful post! This will help a lot particularly in projects where we will use a silo structure in WordPress blogs (because the SEO gurus say that’s the way to go).
I’m intrigued by your approach of redirecting Category pages to written Pages. I don’t see too many WP bloggers doing that. I like it because it’s also a good way to address the “duplicate content” issue.
Manuel Vilorias last blog post..Commission Blueprint PDFs and Videos
August 28th, 2008
Well written and beautifully timed!
I’d left WP a years back (when it got spammed constantly) in favour of Textpattern but TP just isn’t any good for clients to use if I’m honest.
With the 2.5+ versions out I’ve come back to the fold and was literally talking about the feasibility of WP as a CMS yesterday with peeps.
Your article has addressed my main concerns and though I don’t speak PHP (didnt know html when I started using that though either) I know I can offer this as a good and not just workable solution.
August 28th, 2008
Truly. I use a similar structure for my blog on Twiek.net (http://www.twiek.net/). I think that WordPress is a great CMS for all issues. So cool!
Juan Manuel Lemuss last blog post..Anuncio Clasificado
August 28th, 2008
Is there a version of this post in a more reader friendly contrast? Grey on black is one of the hardest combinations to read web text on.
August 28th, 2008
wow! complete and amazing, its very helpful like a reference in future and now.
nice blog cheers!
August 28th, 2008
Great article. Amazing idea. Surprised it hasn’t been done before now…
Anyway I am almost done building a site in which users (who are for the most part web illiterate) can register, author and post online articles (usability is a huge consideration). It also has an e-commerce section.
Do you think I could retrofit what I have done (simple 2 column CSS layout with header and footer) with your CMS idea for WP? The online WYSIWYG editor and CMS functionality are obvious pluses. This would be SO much better. Any issues that may prevent something like that from being done with WP? Don’t want to postpone the launch date and start down a road that I find out later I can not use due to some unforeseen limitation.
Thanks again for a great article. You are sparking many ideas.
August 30th, 2008
@everyone - I have to thank you ALL so much for such great comments on this article! I had really hoped it would not only point out some of the benefits of using WordPress to run a non-blog site, but for the developers help point you in the right direction with some of the techniques I used.
I myself got stuck several times trying to figure out how to accomplish a few of the things I wanted to do, so hopefully this post helps save some frustrations when you are developing your own sites, too!
Anyway, thank you all for the love on this post - I got a lot of social votes and bookmarks from this one (even more than my previous “popular” post “6 Phases of the Web Design / Development Process”
@Kevin - Sorry you feel that way about the light / dark. I am aware of the issues of reverse text. But with this being my own personal site, I decided to take a calculated risk - something I can’t usually do with client web sites (unless it’s something they want to do, as well).
The number of people who take issue with the lighter text is very low in comparison to the number of people who don’t mind it, so so far, so good… Most of my previous personal site designs were dark text on a lighter background. This time around I wanted something much more edgy. Black is great for portfolio sites, too…
Also I went with light grey text as opposed to white text because it was much less jarring on the eye. I started with white text, but felt the contrast was too much on the eyes for this amount of text, so light grey won out… I don’t think the green links are hard to read, but it’s all personal opinion.
@Jonny K - I literally LOL’d at your comment. Thank you (for not loving me in a weird stalker-guy way!) ha ha
@JamieO - Thank you for posting your plugin link! If only I had known, it would have saved me quite a bit of time, lol.
@franky j - I haven’t used cushycms (though have heard of it). WordPress is used so widely that I wanted to continue to utilize it. I already use it for this blog, but decided that as I’m now focusing more on offering WordPress custom theme design and development to clients, that I would convert my static html web site to utilize the same platform, as well. Since this was for my own site, I was able to spend as much time as I wanted to learn some new techniques (putting it on my own dime, so to speak…) - you don’t always have that luxury with client projects. I’d call it a self-learning educational project so to speak…
@wasser - You mention that cushycms is a hosted solution - then yes, I wouldn’t have wanted to switch my web hosting to another company either. Too much hassle when I have several databases setup here, etc. (I’m happy with my web host, lol).
@ornob - There are several plugins that do a great job of integrating photos for a portfolio (or other) type of image gallery. On my own Portfolio I use the Slimbox Plugin. Another great (and even better) gallery plugin is NexGEN Gallery which I use on another personal blog. That one is the most comprehensive that I’ve used and will likely integrate it into my portfolio at some point, as well. If you have a Flickr account, Flickr Photo Gallery plugin is a good one too (you can see that one in action on my recent vacation post displaying photos of the US Virgin Islands
@Bill - thanks for the plugin recommendations! I use Feedburner Feedsmith (very helpful to track all of your subscriptions!). The Simply Exclude sounds great, too - I use a variation of that (which is probably more complex?) as I have the Google XML Sitemap plugin, however you have to manually enter in post/page ID numbers in order to exclude it from the sitemap. I’ve also installed All In One SEO Pack which handles all of your meta tags (I admit it’s a recent installation for me, though, so I still have to actually start using it to it’s full potential!
A note on the plugins… I’ve got a massive list of plugins and other tweaks, etc. that I will be writing about soon (I’ve been promising this one to people for months - lets see if I can’t finally get it published within the next couple of weeks, LOL)
@Manuel Viloria - The redirecting of the categories just came from me being anal retentive and overly controling, I guess, LOL. Even if I don’t list a link to the categories, I’m sure those versed in WP can easily type in the url and get a dis-organized list of posts, etc. I went with the redirection to help control it a bit, and send them to the page I want them to see (where posts are in the order I setup). The SEO “duplicate content” issue is an added bonus!
@Gesnok - Apologies for the grey on black text - that’s one of the “controversial” issues about my site. Most don’t seem to mind, but every once in a while… Anyway, I don’t currently have another version (though would like to work on a theme selection option, where users can select the default light on dark, or a modified dark on light theme…). What I can suggest is that you subscribe to the feed, because through your feed reader you’ll be able to read the post with your feed reader’s default design (which is likely black text on a white background). And just pointing out that I’m not saying that to get more subscribers, LOL - you can unsubscribe if you want, it’s just a way to be able to view the text differently. Also, until publish another post, you should just be able to read this post on the feedburner page without actually subscribing. Just a thought…
@Dragon - I don’t see why you can’t use your existing WP theme with some of the techniques above. There will be a little bit more work, just that you’ll have to create some new php files. But they can certainly be based on your existing files, with whatever changes you wish to implement for each of the individual page/category templates. Good luck if you decide to give it a try! I hope you’re able to get it out by your launch date!
August 31st, 2008
Thanks for responding. I have decided to take the plunge.
Where would you suggest I go for a quick tutorial on editing static content in WP like the header or footer PHP includes? Or even changing the layout of the page to accommodate my existing design (which is not in WP)?
September 1st, 2008
Thanks for this great post. I use Wordpress as a CMS for most of my projects. The multiple dynamic sidebars comes very handy as my current customer is asking for a different sidebar content on each page. I know to do it directly in the code by adding some PHP functions, but I actually didn’t know the “Multiple Dynamic (Widgetized) Sidebars” trick. Thanks a lot.
Jeeremies last blog post..CushyCMS - a Free and Truly simple CMS
September 3rd, 2008
This article rocks! Great job! I wish I’d had it when I was working on my site a month ago!
Roses last blog post..This Week in Review 7/19 - 7/25
September 4th, 2008
Hi Thx a Lot
It’s a killer compilation
Dzineblogs last blog post..10 Creative Designers of the Month August
September 7th, 2008
Great article - wish I had found it several months ago. The two eye opening moments in using wordpress as a CMS were the dynamic sidebars and the use of page templates. Still not as friendly as some CMS systems but it is nice not to be forced into the everything is a box design of a lot of CMS systems.
Nice work on the category page templates that was new to me.
September 22nd, 2008
After customizing my new layout, I decided using Wordpress as a CMS is a great solution. I like designing websites, but for some, it’s faster to not re-invent the wheel, so to speak, and design this way. Plus you get the added bonus of having the blog. I am bookmarking this article for future use in a few upcoming projects. Thanks for the great info!
Kristis last blog post..Rubber Band
September 25th, 2008
Nice article. So much in WP! It’s a Wow factor!!
September 29th, 2008
Thank you all for the continued feedback on this post! I’m so glad it has helped many of you!
@Dragon - I don’t know of a specific tutorial offhand, but I’m sure a google search will give you some great ones (it’s a matter of weeding out the good vs not so good ones, lol).
To start with, though - I’d suggest going straight to the source with the WordPress codex site. A few helpful links on their site…
- WordPress Template Tags
- WordPress Lessons
- Designing WordPress Headers
- Stepping Into WordPress Templates
Just a few, but those might help get you started…
October 15th, 2008
thank you for taking efforts and writing this great article.
thanks a lot !
October 15th, 2008
This is a great article. I’ve been thinking of using Wordpress as a CMS just because I know Wordpress so it’s easy for me to use. This article helps.
Nicholis last blog post..How to Donate to Charities Without Spending More Money
October 26th, 2008
This is a great post!
I found several nuggets in here that I have not seen anywhere else.
I have written a few blog posts on using WordPress as a CMS which expand on some of your ideas.
I’d love it if you’d take a look and let me know what you think.
Thanks,
Josh
http://www.nooozeguy.com/using-wordpress-as-a-content-management-system-cms/
http://www.nooozeguy.com/migrating-website-wordpress-guide/
October 30th, 2008
Continued thanks for the positive feedback on the post!
@Josh - thanks for providing your links! Your articles both seem to be good resources with additional detailed information - thanks for sharing!
October 31st, 2008
Graet post mate. Keep them coming….
November 5th, 2008
Impressa:) or as a Portuguese, vpechatlilso!
November 10th, 2008
Hi. I have used WP for a very basic CMS for static pages. Is it possible to create dynamic pages, such as news, besides blog post, without knowing PHP? Let’s say we need a special promotion text message box on the sidebar. Can a client, who doesn’t know html, change the text without getting into template design change?
I’ve been googling on how to do that with WP, but I’ve got no luck.
Thanks
November 10th, 2008
It is absolutely possible to create dynamically generated news pages in WordPress.
You would need to know PHP to do this however, because you would need to alter page templates.
Regarding changing promos on a sidebar, you can definitely do this without knowing HTML– the key is making sure that a certain plugin is installed.
In terms of good WordPress resources, here are two I recommend (these are from a post on my site):
* Joost de Valk has written what he calls, “The Definitive Guide To High Rankings For Your Blog”.
* Ian Stewart has an excellent guide: “Use WordPress As a CMS: Plugins, The Bare Minimum“.
(There’s also a link to an article I wrote in an earlier comment on this post).
Hope that helps!
-Josh
Josh Fialkoffs last blog post..A How-to Guide to Migrating a Website to WordPress
November 12th, 2008
Looks very impressive
You’ve made a well-done post!
My congratulations!