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. 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.
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 www.idesignstudios.com/category/portfolio/ – instead of getting a chronological listing of Portfolio posts, you would be redirected to 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!
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…
The post How to use WordPress as a Truly Customized CMS appeared first on iDesign Studios.