Thesis 2.0 Guide – Getting Started Part 1 – Site Options

So Thesis 2.0 is finally here. This tutorial is going to cover some basics about this amazing theme.

But first I have something to say.

I have read many threads and apparent reviews of Thesis 2.0 slating it, some saying avoid at all costs. I have read threads about Developers saying it’s impossible to work with.

Let me put it this way, if a novice website owner can manage to build a site with it then what sort of Developer do you call yourself?

In the thesis forums I have been busy helping people out as I’m happy to do so. I have seen people who have no coding history build a site in a few days with this completely new framework. If your a Dev and your struggling with this theme then its time to take a look in mirror. Everyone moaned when CSS 3 came out, html 5, new google update, new chrome update, new Firefox update. Everyone seems to moan at everything that changes from what they are familiar with.

If you want to stay on top, then you better get learning. Thesis 2.0 has brought some awesome features to the table and runs them in an efficient and optimized manner. The new interface is very easy to navigate once you have got the hang of it. Trust me the old way will seem so primitive once you master this beast.

Here is what we are going to cover in the following  series:

  • User Interface
  • boxes
  • packages
  • skins

Thesis 2.0 User Interface

So here is where people are getting lost, they take one look at the interface see it’s different from the status quo and panic due to the unfamiliarity of it.

Take one step back and take your time to look at it all. Familiarize yourself with it.

So once you have installed thesis and activated it via the prompt in which I’m not going to go through as they have already been covered here, you will see a screen like the one above.

Any lost devs?

So now we need to look at the options so first head over to Site and a drop down menu should appear with 4 different menu’s.

You should see the follow:

  • HTML Head
  • Tracking Scripts
  • 404 Page
  • Home Page SEO

Now lets take a look inside these.

HTML Head

Inside HTML Head there are a number of options for us to look at.

This is my current layout, so yours may be in a different order.

All of these boxes are drag and droppable. They can also be removed if you do not require it to load in the head of your page.

Simply hold shift and drag the boxes to the box located in the top right hand corner and drop them here.

Now lets take a look at the boxes.

Stylesheet – Simply the location of the themes single CSS file. I personally placed mine at the top as tests have shown that adding the stylesheet to the top can decrease the time it takes to render the page. By how much depends on your server amongst other factors.

Thesis 2.0 now only has 1 CSS stylesheet which reduces your HTTP requests which equals faster loading.

Title tag – Here you can choose whether to append your site name to your pages and post etc. I can’t think of any reason to do so off the top of my head, but I know some sites do it.

You can also choose a spacer so if you do append the site name it will be separated by your choice of a spacer.

Quick Tip – see all the little + signs in the options boxes, they are tool tips, so if you don’t know what something is and you see the + sign click it.

Meta descriptions – when you write a post you will see the meta description box below the main text area. Whatever you put in there will display here.

Meta Keywords – Again when writing a post you will see an input area below the editor where you can add some relevant keywords. There is an option for you to automatically use tags as keywords. The use of this would depend on how you use your tags.

Google Rel Author – This is for google authorship, don’t know what google authorship is, well it looks like this when you search on google.

Before it was a pain to implement, with thesis 2.0 it’s easier than ever, all you need it your bylines to have the same name as your google plus page and display them on your posts.

To add the authorship all you have to do is go to your google plus page and select profile and you will see a link like this.

https://plus.google.com/u/0/xxxxxxxxxxxxxxxxxxxxx/posts

Copy only long number where you see x’s in the above example and paste it in to the google authorship box.

You will still need to authorize google authorship for your site which you can do here.

Meta Tags – Inside here is all the options you ever need to control indexation and how search engine bots crawl your site. The default settings should do you just fine though.

Favicon – here you can upload your favicon which will display in the search engine browser tab. Just select the image you wish to use and upload. Note the favicon is usually around 16×16.

Canonical URL – Thesis 2.0 has made it super easy to set these, although there are no options here to choose, if you create a page or post and scroll down past the editor you will see a section for canonical URLs. Chris explains it beautifully here.

RSS Feed – don’t want to use the default wordpress RSS, perhaps you would like some stats which you could get via something like feedburner. Thesis 2.0 makes that super easy too. Just enter the URL in the this box.

Pingback URL – No options to select here, those are found in wordpress settings > writing. What pingback does it attempt to notify other websites that you link to that a link has been added.

Head scripts – There are times when you require certain javascripts to load in the head to function correctly. Usually we try to avoid loading javascript in the head (“something that plugin devs dont do at all, even when it can happily load before the closing </body> tag“) and so the option is there if you need it.

Site verification – In the past, almost all themes would require you to edit the header.php file to add your verification code, or download a plugin to insert the code for you, well not anymore. Thesis 2.0 make this super simple too.

Once you create you account for google and bing/yahoo then just insert the verification codes in to the relevant text area.

Once you have made all your changes just hit the save button and your header is ready to rock.

Hopefully this gives you a better understanding of the options available to you in the HTML Head menu so now we can move on to Tracking Scripts.

Tracking Scripts

Like site verification the traditional method of adding these scripts would be to copy and past a code that google gave you and edit header.php or use a plugin which means you need to rely on the plugin to be maintained and if you update your theme after editing header.php well, say good bye to your ga script.

Surely it makes sense to do it just once.

So here thesis 2.0 makes that super simple, just copy the code, not the whole script, just the id and paste it in to the text field.

Using clicky? Just add the script here. Simple.

404 Page

Now this is just awesome, say goodbye to the crappy old 404 pages.

Say hello to custom 404 Page in just 2 steps, create the page, select the page.

Here you can select the page you want to use as your 404 page, then edit that page however you like. But we can go one step further than that.

Why not create a template which we will be looking at in a later series and get rid of all the unnecessary html markup, perhaps even display some posts or categories to help your users on their way.

Then instead of having disappointment when you made a boo boo with your link you can throw the best damn 404 page they have ever seen. Go on, go nuts with it.

Home Page SEO

This is  the most important set of options you will need to configure.

Here is the first thing the search engine is going to see and you should ensure that this is as optimal as can be. Now some people have said Why would you add options such as:

  • NoIndex
  • NoFollow
  • NoArchive

Well think about it, what if wordpress isn’t your home page? What if you are using it as just a blog you wouldn’t want the blog dominating your SEO would you? Many people use just the blog functionality of wordpress and use other website software for there other pages which is why sometimes you may see sites with a permalink structure like this: http://sitename.com/blog

To conclude this section, there is a reason behind everything, as mad or as different as it may seem, everything has a purpose in thesis 2.0 and that is just one of the reasons why it is the best framework on the planet. While your here, don’t forget to get the free logo Box for thesis 2.0.

Proceed to – Thesis 2.0 Getting Started Part 2 – HTML Editor
Don’t have Thesis check it out here

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

2 comments… add one

  • Tom Jun 13, 2013, 5:40 pm

    Thanks for this tutorial. It helped me a lot.

  • Khairul Zamri Jan 1, 2014, 6:54 am

    thanks that was great and simple tutorial to be learned by newbie like me. Once again thanks a lot :)

Leave a Comment