Customizing WordPress Templates

8 Comments
19 Dec

I’ve been doing a bunch of work with WordPress lately, mostly customizing templates and writing plugins to make it work more like a “real” content management system (CMS), rather than just a simple blogging platform.

Rather than try to explain all the technical details of what I did (I hate doing documentation), I thought I’d just show some examples from two sites that I recently worked on, GraceDC and Langham Partnership International. In this post, I’ll focus on some of the design and template related modifications I made to WordPress’ templating system to make the sites look and behave like the way they do.

General Design: The first thing you’ll notice when you load those two sites is that it doesn’t look like a WordPress blog at all, or for that matter, anything like each other. Each design and template is customized specifically for the organization. While there is some minor code reuse between the two sites, the HTML and CSS code for each site is basically unique.

Homepage: The homepage for each site is unique and entirely different from secondary drill down pages. GraceDC is probably the most complex of the two, since its homepage pulls in content from multiple sources. In general, everything on the homepage is editable from within the standard WordPress admin with the WYSIWYG, no special template modifications is required to make routine updates.

Navigation: The primary navigation is built automatically from WordPress’ page system and can support drop down menus with a custom Javascript library I wrote. GraceDC has drop down menus, Langham does not. Note that the proper navigation element also says highlighted when you browse into a particular “channel”.

Secondary Navigation: Just a simple widget which prints out all the pages in a particular channel. On Langham, this appears as a left column in the drill down secondary pages. On GraceDC secondary navigation is available from either drop down menus across the top or in the sidebar to the right.

Breadcrumb: Somewhat related to the navigation is the breadcrumb, which WordPress does not support out of the box. This basically prints out the hierarchy for the current page you’re in. It’s a minor element, but something I think that really adds to the usability of the overall site.

Sidebar: Each page has it’s own independant and customizable “sidebar” area to the right of the primary content area. For a simple blog, it’s not really necessary to have a custom sidebar on a per-page basis. But for more complicated sites with lots of content, it is definately required. The sidebar is also editable through the standard WordPress admin.

Archives: For GraceDC, the site features both sermon podcasts and announcement posts. This posed a slight problem, since sermon posts is really the primary content and should be featured above announcements. So with this in mind, the archives have been customized to separate out posts based on which category they belong in. Also, you notice that the breadcrumb for a sermon post is different than that of a general announcement.

Ok, that’s it for now. As you can see, with just a couple tweaks, WordPress can be customized into something that can work quite well for content heavy “non-blog” sites. In the next WordPress related post (whenever that might be ;), I’ll talk more about some of the plugins I wrote to add complex functionality and integrate third party solutions into the sites.


This post is cross-posted to the Silas Partners blog, which is where I work.

Posted on Tuesday, Dec 19th 2006 at 8:49 pm

8 comments

  1. Pingback: Customizing WordPress Templates : Silas Notes
  2. # Alister Cameron, Blog Consultant Dec 20, 2006

    Joe,

    You impress me no end, mate. You’re the kind of guy I always wanted to partner with in business. Me doing the marketing and pretty pictures, you doing all the fun tech stuff!!

    Anyway, what I really would LOVE to see is a series of templates, along perhaps with some grouped-together plugins, for a very non-blog kind of Wordpress install.

    I am getting more and more people wanting sites that include a blog, but otherwise look like a more commercial site.

    Finally, I’d love to see a really tight integration of the above with bbPress.

    Well, that’s a wishlist! It comes from the frustration of seeing a million templates out there that are really much of a muchness, whereas very few that really make major changes to the look of WP, making it more like a CMS for non-blog sites.

    So, you’re totally on the right track, as far as I can see!!

    Have a blessed Christmas!

    - Alister

  3. Pingback: Uncommon Knowledge: free alternative business and technology knowledge to save you time and money. » Wordpress as a learning tool.
  4. # rene Dec 30, 2006

    Really like the look of the GraceDC site. Only problem is the lack of non-javascript navigation. Probably a really small problem indeed. Awesome work you do.

  5. # ReeV Mar 09, 2007

    NIce Job !!!

  6. # Matt Jun 15, 2007

    “I’ll talk more about some of the plugins I wrote to add complex functionality and integrate third party solutions into the sites.”

    I’ve been waiting for more on this since I read this post in December… ;-)

    Great work!!!

  7. Pingback: Using Wordpress to Power Your Website - Adirondack Base Camp - Travel, Tourism, Outdoors, News and Information for the Adirondack Region of New York
  8. # Tim Oct 04, 2007

    This is great stuff.

    I’m just starting my wordpress site. I’m very interested in creating unique sidebars for each page, but I’m not familiar or comfortable configuring the code. Could you tell me how you did it?

Leave a comment