Do You Want to See How Easy Building a Complete Website on Thesis is?

A common (and annoying) myth is that Thesis makes building a blog more complicated.

Not only is that completely false, there are a lot of things Thesis does to make building an optimized and lightweight website simpler. A lot simpler, actually.

Over my years of developing for WordPress, Thesis has been the easiest solution for me. That’s why I’ve stuck with it.

It only took me a short period of time to learn how to develop a full website with Thesis too.

Many don’t like using hooks to customize Thesis, but hooks are the way WordPress themes should be developed anyway.

Not only that, there are a ton of Thesis tutorials out there that make learning it a breeze.

Proof That Building an Entire Site With Thesis is Easy

You want PROOF!? I’ll give you proof!

Compared to building a website on WordPress from scratch, using Thesis makes it a breeze.

Thesis has the core elements of every successful website design:

  • Clean code (to easily build around)
  • SEO options galore (for ranking highly in search engines)
  • Built-in admin options (takes a lot of code out of the equation)
  • A community of experts willing to help you customize the way you use the theme

But those are just simple statements. Let’s get a little deeper and analyze Kolakube.com, which is a pretty big website (in terms of pages).

Breaking Down the Structure

Kolakube is an e-commerce site. While I didn’t use WordPress as a shopping cart or support forum (I use other scripts), I did use it to make the main site. And that is what we’ll be looking at.

The three main parts of the Kolakube website are:

All very differently styled, and all designed with Thesis.

If you browse through those three sections, you essentially have what the entire website is all about.

There are some simple pages throughout those sections (like the affiliates page), and there are more complex ones (visit any single skins page).

The secret to creating all of these different pages lie within the two, infamous files known as custom_functions.php and custom.css.

Every layout and additional code I have built-in to Thesis’ default look are located in those two files. It makes coding not only easier, but you don’t have to scurry around an FTP program to find something; it’s all in front of you.

Sure, it may get cluttered by putting every last line of code in those two files. But, if you follow my simple Thesis functions and CSS organization guide, you’ll wish you coded like this all along.

How to Create Custom Pages in 2 Steps

The most important part of any website is the design. Not just the look and feel of the site, but the structure. Obviously, your website will not have the same structure on every page, so you may demand more customization power.

Now, take a look at the layout of these three pages:

Not even one of those pages has any kind of similarities (apart from the header and footer). Thesis has enough flexibility, that if you wanted to, you can make one page appear 100% different from the others.

Here’s how you can create your own custom pages (it’s easy!).

1. Create a Page in WordPress + Change a Few Settings

Firstly, go into your WordPress admin panel and create a new page. Change the Page Template to “Custom Template.”

Change your CSS class

This will add a custom class to the <body> tag.

You should also move down the pages panel and open up “SEO Details and Additional Style” panel.

Here, you can create a CSS class that will be added only to the page you’ve just created. This will make it so you can easily target this page when you get to coding in your custom.css file.

Last thing, make sure you take notice of the page ID and write that number down for later.

To find the page ID number, hover over the link that takes you the edit post page from your WordPress admin panel. The ID should look something like: http://domain.com/wp-admin/post.php?post=90&action=edit

2. Targeting the Page With a Function

You can target any page you create by calling a function (like you would for any other Thesis hack), and a conditional statement.

Basically, what a conditional statement does is targets a specific part of your website. This is how you can design an unlimited number of pages on your Thesis powered sites.

So, go to custom_functions.php and paste this little piece of code in there:

[php]
function custom_page() { if(is_page(‘ID’)) { ?>

Content here!

  • Change “ID” to the page ID you found in step one. This HAS to match, or it will not work.
  • You can change the name of the function (custom_page), but make sure you also change it in the hook
  • Always make sure you remove the default custom template.
  • You can repeat those two steps over and over to make as many custom styled pages as you want.

    It’s as Easy as it Gets

    All in all, creating a full website with Thesis is probably one of the best ways to approach web design on WordPress today. It will only get better with Thesis 2.0, but that’s for another article.

    What do you think about developing a website on Thesis? Are there better ways to do it? Share your thoughts here.

    10 comments add yours

    1. Could you please provide more information on what the CSS would look like? or exPle, what if you wanted columns for the page? ow would you refer to the php and vice versa, how would the php refer to the CSS, if at all?

      • So for example, if you name the CSS class “mypage,” it would look like:

        .mypage #content_area { background: #EEE }

        What exactly do you mean by your second question? You can just code the columns normally in HTML, and if you only want the CSS for those columns to take effect on your page, just use the CSS class.

    2. You have added custom stylesheets to different pages, like blog.css. Please tell me how to do that.

    3. Off topic, but I’m really new to Thesis, liking the options so far, and I had a quick question if you have the time to answer it Alex.

      A lot of Thesis sites I see have that light blue “Enter Your Email” section at the bottom of posts, in fact the official Thesis blog has it.

      Is this option built into the theme itself, or it just something that Thesis users tend to do? If so, how could I implement it?

    4. this may seem obvious but I’m only a few hours into this but once you go through and set it up a new separate custom page how do you do all the design styling? It seems to me that the Thesis design options (I’m in version 182) are global and page specific. thanks.

    Leave a Comment