This will be a two parts tutorial in which will use WordPress as a CMS with the Thematic WordPress Theme Framework.
- 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.
- 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:
- sytle.css – will contain all our css that will overwrite the basic css found in our theme framework
- 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
- /images – this folder will hold all the images associated with our theme
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/
All Rights Reserved
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:
- The main banner on the home page
- Displaying the header title in the inner pages
- 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
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.
Subscribe to get early access
to new plugins, discounts and brief updates about what's new with Cozmoslabs!