Use WordPress as a CMS with Thematic Theme- Part1

This will be a two parts tutorial in which will use WordPress as a CMS with the Thematic WordPress Theme Framework.

Requirements:

  • WordPress
  • Thematic Theme framework
  • A ready made layout design
  • Coffee ( preferably hot with cream and no sugar)

We all know how powerful WordPress can be. A lot of people have done this before me, building static websites on WordPress, and using it as a CMS so there is a lot of information out there. (people have written about this here and here and probably countless other places ). What I tried to do is use the power of the Thematic WordPress Theme and simply create a nicely designed static website.

Before we start here is the project after this stage: Demo , and here are the things I wanted to implement:Demo

  • simple and easy CMS for the client to use (big points for WordPress in ease of use)
  • fast implementation of the web-site (since I’ll use a child theme based on Thematic that means I don’t have to create the theme from scratch, just part of the css)
  • a simple contact form (in part 2 of the tutorial)
  • a photo gallery (in part 2 of the tutorial)

1. Installing WordPress

This was the easy part. I’ve downloaded the latest version of WordPress and installed it in a folder on my test server (in this case cozmoslabs.com/projects/kraft2/).

If you don’t know how to install wordpress yet, it will only take a minute… literally. http://codex.wordpress.org/Installing_WordPress . The guys over at WordPress are a little modest and claim that it takes 5 minutes… but you can do it in one :) .

Once this is out of the way, and we are one minute into the project, we upload the Thematic theme to our server inside our theme directory and start the real work (for more information about installing a new theme have a look here).

2. Creating a child theme

We need to keep things simple for us. This is were Child Themes come into place. Not having to write the HTML for your theme speeds things up and keeps everything nicely organized.

To create a child theme we need to make a new folder with our theme name inside the theme directory (in our case “Demo).

Inside we will create the flowing files and folders:

  1. sytle.css – will contain all our css that will overwrite the basic css found in our theme framework
  2. functions.php – this will help us add extra HTML code, include some javascripts, and create the menu.
  3. home_banner.php – this holds a static piece of HTML that will be included inside functions.php, but I’ve kept it outside so I don’t have to much going on inside functions.php
  4. /images – this folder will hold all the images associated with our theme
  5. /js – this folder holds all the javascripts related to our theme. In this case it holds slideshow.js, a javascript that will enable me to create the slideshow banner that exists on the home page. We will also have to have the jQuery library in order for this to work, but that is already loaded with Thematic that uses it for the Slideing Down admin pannel. Please note that WordPress already comes with the jQuery library and is located inside the “wp-includes/js/jquery” folder.

Once we’ve created our files is time to link our theme to inherit Thematic. We do this adding the folowing code to the style.css file:
/*
Theme Name: kraft
Theme URI: http://cozmoslabs.com/
Description: Built on Thematic Theme</a>
Author: Cristi Antohe
Author URI: http://cozmoslabs.com/
Template: thematic
Version: 0.1
.
All Rights Reserved
.
*/
@import url('../thematic/style.css');

The most important part is “Template: thematic” as it tels WordPress from were to inherit every thing. Next we have to import the Thematic style.css in our theme. We do this by adding this line: “@import url('../thematic/style.css');” .

Now that we have created our child theme is time to activate it from our admin panel, under the Design tab. Verify if everything is in place by visiting your site. If it looks just like Thematic then it works!

(For a more comprehensive tutorial on how to create a child theme try this article over at op111.net)

3. Implementing our design

I won’t get into a lot of details regarding css and html since this is outside of the scope of this blog post, but I will try and give as much information as posible on certain problems that I encounterd developing the theme.

In order to add our css to the Thematic HTML we need to know what’s underneath. You can view the source HTML of your web-site in Firefox by clicking “View/Page Source” (or Ctrl + U). This way you can identify the different classes and id’s that are responsible for stilling the page.

Another way to do this is by useing the WebDeveloper plugin for FireFox. You can display the different elements information like class, id, width, children, ancestors, and much more.

The main id’s in Thematic that you will probably target with css are: wrapper (I’ve given it a fixed width for this project), header (holds the top part of the site, including the menu), branding (resides inside the header div and holds the blog title and description), access (holds the menu div), main (holds the information on the right and left side of the template).

4. CSS trick’s I’ve used

In order to get around some things that normally one shouldn’t worry about if you are developing your own HTML and CSS, I’ve used a few trick’s to make my life easier:

  • display:none; – I don’t need the blog description to show up in my theme, and since I can’t remove it from my theme I used this to hide that div and the description.
  • text-indent:-3000px; – I’ve used images for the Logo and menu, so I needed to either create the menu by hand using functions.php file or find some way to use the menu as it was and stile it with css. By using a negative text indent the text moves to the left by 3000px and it’s out of our field of view, and we can add background images to our menu and blog title.
  • Image roll over with css – I’ve targeted every menu element by it’s id and added background images to it. This in correlation with the negative indent resulted in the menu you see on the page.

Please note that the display:none and negative indent methods are categorized by some as Black SEO, and the misuse of them (hiding text from users just so one would rank higher in search engines) can lead to being penalized by search engines, be we shouldn’t have any problems since the text we are currently hiding is shown with images. This is a long debate so I just thought to let you know.

5. The functions.php file

This is the reason it is possible to have a child theme, since just CSS would not suffice under any circumstances to create a complex theme without modifying the source files. In my case I used this file for the flowing things:

  1. The main banner on the home page
  2. Displaying the header title in the inner pages
  3. And to include the slideshow.js file for the home banner

There are a lot more things one can do with the functions.php file but all I needed were these three. Here is how it looks:

function secondary_header()
{
if (is_front_page())
{
include('home_banner.php');
}
else
{
?>
<div class="sInnerBanner"><h1>
<?php wp_title(''); ?>
</h1></div>
<?php
}
}
 
function childtheme_extrajs() { ?>
 
<script type="text/javascript" src="http://www.cozmoslabs.com/projects/kraft2/wp-content/themes/kraft/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="http://www.cozmoslabs.com/projects/kraft2/wp-content/themes/kraft/js/slideshow.js"></script>
<?php
 
add_action('wp_head', 'childtheme_extrajs');
add_action('thematic_belowheader','secondary_header');

As you can see I’ve used some wordpress functions from it’s API to check if it’s the front page, in which case I include the home_banner.php file that contains all the HTML for my home banner, and if that’s not the case I’ve used wp_title() function to print the current page on which I’m on.

TIP: when using wp_title() function make sure you add as parameter nothing… well I mean this: wp_title(‘”). Otherwise there will appear arrows (») in front of the title.

The add_action() function binds my code to different parts of the site, depending of your needs and the Theme you are using for your child theme. In the case of Thematic there are a lot of custom hooks and filters that you can use to create just the look you are after.

6. Setting up wordpress and adding pages

The hard part is out of the way, and now we can start adding content to our pages. But first we need to create them.

Create all the pages you need by going to Write/Pages.

I won’t use the blog part of WordPress for my site so no need to use it. Go over to Settings/Reading/Front page displays and select “A static page (select below)“. Select Home for your home page and underneath where it says “Posts page:” leave that unchanged.

If every thing works out you should now be able to see your web-site with everything working fine.

As you can see there isn’t much to do in order to use WordPress as a CMS… and the only thing that is time consuming is developing your child theme.

Coming up in part 2

I will try and finish the web-site in part 2, use some plugins for a contact form and a photo gallery, and maybe talk a bit about copywriting for clients.

If you read this article, start developing your theme and have questions or comments don’t hesitate to ask them. I’ll try my best to answer them.

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

34 thoughts on “Use WordPress as a CMS with Thematic Theme- Part1

  1. @John the Pirate -Arrr! :) … The header I designed my self. If you’re interested in a custom one for you send me a message through the Contact page ;) Arrgg…

  2. Wonderful overview! This has helped me through my first child theme using Thematic. I have one problem I hope you can help with. I am trying to use the custom header API in WordPress to allow users to upload their own header image, but when I paste the code from

    http://wpmututorials.com/themes/giving-your-users-changeable-custom-headers/

    into the child functions.php file it breaks the theme. Would you know how to code the functions.php file to take advantage of this API?

  3. Thanks, Cristi. Yes, I have seen that code on the forum and I can get a header image to appear. What I am trying to do is implement the custom header API so users can upload their own header image in the backend. I am getting close. I have the upload and crop page appearing in the admin options for the theme. I just can’t get the image to appear. I’ll take a look at that code on the forum again and see if I can combine things. If I get it to work I will report back!

  4. Pingback: Quickly add a Category DropDown to Thematic 0.9 | Cozmoslabs

  5. Pingback: Add a search box to the thematic menu | Cozmoslabs

  6. Pingback: Add a header image to Thematic - the easy way | Cozmoslabs

  7. Pingback: Enlaces en mi del.icio.us, 15 06 2009 | Vectoralia

  8. Pingback: Enlaces en mi del.icio.us, junio 2009 | Vectoralia

  9. Pingback: Add "Featured Posts" to your Thematic child theme | Cozmoslabs

  10. This is a GREAT article! I’m going to be moving to WordPress for CMS.

    One thing (sorry) you have:
    sytle.css – will contain… The might confuse the nubes (like me :)

    Regards,

    Shawn

  11. I’d love to know exactly how you “targeted every menu element by it’s id and added background images to it”. How do you add images to a list of items if it isn’t hard-coded in the header using CSS? I don’t know enough about php yet obviously! :) But yours is the closest article I’ve found that even comes close to explaining this concept.

  12. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design

  13. Pingback: links for 2009-11-28

  14. Pingback: Use Wordpress as a CMS with Thematic Theme- Part1 | WordPress News

  15. “display:none; – I don’t need the blog description to show up in my theme, and since I can’t remove it from my theme I used this to hide that div and the description.”

    actually using the power of thematics’ hooks and filters you can remove the blog description (or anything else for that matter)
    consider this in your functions.php

    /*remove blog description-----------------------------------------------*/
    function remove_descript() {
    remove_action('thematic_header','thematic_blogdescription',5);
    }
    add_action('wp', 'remove_descript');

    the dom model located here has helped me immensely when figuring out what to target.

  16. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework ‹ Wordpress Expert – Just another WordPress Expert

  17. It was extremely interesting for me to read this blog. Thanks for it. I like such themes and everything that is connected to this matter. I definitely want to read more soon.

    Mary Stepman
    ukescorts

  18. Pingback: Thematic Theme for WordPress | She Draws In Bytes

  19. Pingback: Use Wordpress as a CMS with Thematic Theme- Part1

Leave a Reply

Your email address will not be published. Required fields are marked *


2 + = four

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>