Themes in the Work

The last two months have been really productive. So I thought I’d share with you two of the works in progress. While still far from ready to be released, they are ready to be shown.

Both will be child themes, but with a twist. This is as much as I can tell you at this point, but I’ll post more details by the end of the month.

Charisma Teaser

TypeLog Teaser

Related posts:

1. Early Morning Child Theme
2. Street WordPress Theme
3. Cozy Child Theme

This theme doesn’t scream at you, instead it takes a step back and lets the user read. Please don’t spoil it by putting ads on it!

Early Morning - A refreshing child theme for Thematic

You also have some nifty options:

• You can upload your own logo
• It comes with it’s own custom designed Twitter widget, so your visitors can see what you’re doing from your blog
• If green isn’t your style, it comes with 5 background options that you can select from the Early Morning Theme Options (Green, Turquoise, Brick Red, Gray and Black)
• Has a one column page template and archive template
• It’s been tested and works on Firefox 3.5, Safari 4, Opera 9, Chrome, IE7, IE8

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (Early Morning and Thematic) to your server in the themes folder AND THEN ACTIVATE the Early Morning Theme.

Related posts:

1. All Child Themes got updated
2. Cozy Child Theme
3. Byty the Free Child Theme – Built on Thematic

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: Kraft Auto , and here are the things I wanted to implement:

• 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 “cozmoslabs.com/projects/kraft2/wp-content/themes/kraft”).

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.

Related posts:

1. 10 design tips for your custom wordpress theme built with thematic
2. Byty the Free Child Theme – Built on Thematic
3. Before I go on vacation, more Thematic madness!

I’ve mentioned in my previous post about Thematic that I want to implement a static web-page using WordPress and Thematic as a CMS, so here’s a sneak  peek: www.cozmoslabs.com/projects/kraft2 . It doesn’t have a lot of content yet, I still have to install a form builder, a photo gallery, create some more pages and perhaps a video with the clients Auto Shop, but the main template is done. And again it was so easy to implement.

I have to say this is not a child theme, because I made small changes to the header file of the Thematic theme . Other then that, the needed changes for the thematic_belowheader ( for the slide show ) hook were done through functions.php file.

I have to say I can’t wait for WordPress 2.7 to implement full theme inheritance. Things will really take of then.

Away on vacation!

Finally some well deserved time off. It’s been a really interesting year for me and things appear to become even more interesting.

I’ll be away until the first of September so expect a full blog post in the first week after my vacantion on how I’ve used and implemented WordPress and Thematic as a CMS for KraftAuto .

Until next time, have fun!

Related posts:

1. Use WordPress as a CMS with Thematic Theme- Part1
2. 10 design tips for your custom wordpress theme built with thematic
3. Byty the Free Child Theme – Built on Thematic

Photo by *nomi* & malcolm

I’m quite happy with the way my custom weblog theme design turned out. There is still room for improvement but for now things will stay like this. I didn’t make huge changes from the base Thematic Theme, but it dose look different and somewhat close to my personality, and this was basically my goal for this project.

It was quite a nice and easy road from installing the Thematic Theme to customizing my own. So I’ve put together a list with the things I’ve learned during development and share them with you:

1. It’s easier then you might think. I’ve delayed launching my own blog for quite some time now. The main reason was the fact that I really wanted a custom theme and was just terrified about the prospect, considering that the previous theme I’ve implemented really stressed me out big time. Trying to get pull my self from this endless circle (need custom theme -> really hard -> don’t do it) I’ve decided to go ahead and just install any old theme and go from there regardless on how the blog would look. And I did just that. Luckily for me as I was searching the net for worpress themes and Thematic popped out of no ware ( what I mean to say is that I forgot where I found it firs … I think it was on SmashingMagazine but just can’t find the link). Now that I found Thematic so easy to use I’m actually considering to implement another custom blog design using it in the next month or so.

2. Use child themes. This is how things really take off! Child themes in my opinion are the future. A Child Theme inherits all the template files of the Parent Theme — except for style.css and functions.php, which take precedence over the original. From what I’ve head from WordPress version 2.7 it will be possible to overwrite all the template files with your own, making the update of your blog and customization so much easier. (For more informations about child themes visit here and here)

3. You don’t need to write any XHTML. Because I used a child theme, I didn’t have to create my own XHTML based on the layout design of my blog. Thematic was built with this in mind. Don’t need to write XHTML, CSS will suffice. This shortens the development of a blog theme by a couple of hours… Not bad at all.

However, if you need custom HTML in your theme, Thematic makes it easy for you with clear declarations.

4. Overwrite only the CSS you want to modify. A lot of the CSS styling of the Thematic theme is quite good. It was initially built using the 960 grid system, Blueprint and Tripoli . To get your design where you want it to be, open the source code of your blog (“CTRL+u” in Firefox for Windows) and see what id’s and classes need styling to fit your needs.

5. Inheritance. Please be careful. Because you will be overwriting a lot of css from the original theme, chances are you will mis something. Watch out for inherited css from the original theme. Also certain widths for div’s are at 100%, and you might have to overwrite that with a fixed pixels width.

6. If you are stuck there is help online. The forums over at themeshaper.com can save you a lot of frustration.

7. Ready for Subscribe to Comments, WP-PageNavi and Comment License. This means you get out of the box CSS for those plugins. Another interesting thing about this is that if you go over to the forums you can post a bug report if a particular plugin doesn’t work with thematic. Chances are in the next version of thematic (or in the truck version) that particular plugin will have it’s functionality fixed. This is the great thing about communities, everyone shares shares a little bit but gains all the little bits of the rest of the people involved in the project. I know I’ve gained a lot.

8. More power for the user: Custom WordPress Hooks and Filters. “Almost anything you can think of can now be loaded into the theme, just below the header and just above the footer, by taking advantage of your Child Theme functions.php.” I didn’t use this in my theme but it is a great addition for the power user. For more information check this post over to themeshaper.com.

9. Add a home button on your menu. You just have to add a home button or a link on your logo. Otherwise your readers will be utterly frustrated because the only way to get back to your homepage is the back button (useless if you go from post to post) or editing the url (really not accessibility heaven if you ask me) . To do this I needed to write my only html and php code. By this I mean 10 lines of code + html inside the “functions.php” file. I found how to do this in this post.

10. There is a lot of info online. For a wordpress theme there is really a lot of information about it online. Ian Stewart’s is the creator of the Thematic and blog’s about it a lot. There is an entire community around it, and you can always ask around.

This is a next step towards easier to use and better implemented blogs. Having fun with thematic is not over for me. I’ve already planed to create another custom blog design on thematic, and even try and implement a static web-site and use wordpress and thematic as a CMS.

The only thing I didn’t find about thematic is it’s license. On it’s website says: “Only now, it’s a completely free and open source project, ready to help you take control of your WordPress blog.” This means it’s free as in beer. What Ian Stewart meant by “Only now” I don’t know, but I know for now it’s free and cooler then beer.

Related posts:

1. Byty the Free Child Theme – Built on Thematic
2. Use WordPress as a CMS with Thematic Theme- Part1
3. WP Greet Box, my Design and Thematic – The Good, the Bad and the Ugly