We will be going through all the options involved in using the HTML Editor.
Did you read Part 1 which was all about the site options. Recommended reading for anyone wanting to fully understand the Thesis 2.0 options.
To put it bluntly the new HTML editor is quite simply brilliant and once you understand how it works there will be no looking back.
When you first install thesis 2.0 you will have 2 skins. 1 by Chris Pearson called Classic and the other by Matt Gross. Classic is an complete layout which you can use to modify to your own needs where as the blank Canvas is for those looking to build something from the ground up.
For this tutorial we are going to focus on classic as this is what most people will be using to get started. When you select skin editor a new screen will open up and a pop up will also load which will be the canvas. If you don’t see a pop up then you need to enable them for your site and a prompt by the browser will usually appear.
The initial layout looks like this: Click for a larger image.
At first you may think “What the….” but I assure you this part is brilliant.
I totally forgot about this part. My bad.
At the top of the HTML editor you will find the a button called home and when you click on that a menu appears where you can select the different templates to edit.
Each [+] opens up to show you sub templates that are relevant to the different core templates.
The default classic theme has the following templates readily available.
The core templates and sub templates are listed below.
- Home – This is the page that displays the blog, this is always the case even when you have a front page and the blog on a seperate page. WordPress always associates Home as the blog page. For those that have used functions to target specific pages will know that for the blog you always target home.
- Single– This is your post page, so all your lovely articles will be displayed using this template.
- Attachment – This is a sub template of the single core template.
- Page– This is for you pages, so you could create a unique layout specific to pages to differ from posts.
- Front Page – If you decide to display your blog on a different specific page other than the front page then you will need to edit this template to change the structure of you Front page, only applies if the blog is not the front page. I wont say home page, because that could cause confusion.
- 404 Page – Remember in the previous Article, we said you could select a 404 page, well if you don’t select a specific page you could edit this template instead to alter the layout of your 404 page.
- Archive– This is the core template for all archive pages. There are a number of sub templates in which you can edit.
- Category – Give your category pages a unique look. Categories are the pages that display all relevant content related to a specific category to help users find content.
- Tag – Similar to category pages, but tag pages are more for grouping content together by keywords. i.e. Tags.
- Taxonomy – Used for creating custom taxonomies, this is a more specific way to organising content and it would require an entire post about this size just to explain how to do it and give the appropriate examples. But for those that use custom taxonomies, you can edit this template to change the look of them.
- Author – Why not give your Author page a unique layout and look by editing this template.
- Day – This is a template for date based archives, some sites allow you to search via dates and so this would be the template to edit to display content that was posted on a specific date.
- Month – This is a template for date based archives, some sites allow you to search via the month and so this would be the template to edit to display content that was posted on a specific month.
- Year – This is a template for date based archives, some sites allow you to search via the year and so this would be the template to edit to display content that was posted within a specific year.
- Search – This is the template to edit your search page, if you have a search bar. When a user searches they will be take to the page that uses this template. So you might want to spruce it up all little, so there it is.
As you can see there is a template for just about everything, but wait, it gets better.
If you have ever create a custom template before you will know that in some cases, depending on it’s complexity it can be a time consuming task. Messing around with PHP, including the WP Loop etc.
Thesis 2.0 allows you to create a custom template at the click of a button.
Create some boxes to structure the HTML, add some packages to style it and Boom, instant unique template just for you.
But what if you don’t want to create a complete template?
Easy, just select the drop down menu to copy the template that is nearest to what your looking for and edit that instead.
There is one more feature here that we havn’t looked at and you might of missed it.
When you hover on the Home button the options buttom appears.
Click on it and this opens up for you.
So you will be optimizing your site without even knowing it. Clever!
Click on the WP Loop tab and you will see this option.
Finally an easy way to control the loop, this means that for different templates you can define exactly how many Posts, excerpts should be displayed, so an archive page may display more than say your home page.
Every single template has these options so don’t let them go to waste.
End of the update
The Layout for Thesis 2.0 Classic, this is a standard structure so you can always reference this skin when creating your own masterpiece.
This is where all those options in site options are added.
This is the overall container in which all your HTML structure is displayed in. This is also the the same dimensions as your browsers window and should never have fixed dimensions.
This is where all the boxes that will output the structure of your site is housed. Think of a sweet, the wrapper just contains all the goodies. If we didnt add this, then by default everything in the body would float left and it would look horrible, so the wrapper will allow you to build a structure inside the body that you can control.
The nav is just the navigational menu. Some people have said in wp-appearance > menu that it says your theme supports 0 menu’s
Why have it here instead on in WordPress appearance?
Well what if you have lots of menu’s, you wouldn’t want to switch back and forth to appearance > menu would you. Also it makes sense to be here because you can visually see how your menu’s will structure if you have multiple menu’s for say different categories.
Header – this is not the same as <head>. This box is where you can add or remove boxes that display in your Header.
The default for the header contains two black colored boxes.
- Site Title
- Site Tagline
You could add your logo using my logo box. Note if you use my logo box, you can remove the title box that is contained in here. Do not delete your title box though, just drop it in the sidebar to the right where you see this:
For most wordpress sites this is also known as the main container.
This container has a few containers that need to be looked at and so deserves some extra attention. The default classic has the following containers inside:
- Column 1
- Column 2
- Column 3
This is for a 3 column layout. Need a 2 column layout?
Whether 2 or 3 columns this next part doesn’t make much of difference in terms of the number of columns.
Inside the 2 Columns box we have column 1 which in turn contains the wp-loop, this is where the magic happens in terms of your content.
Thesis 2.0 provides you with the ultimate level of control over how your content is displayed and as more boxes are released by DIYthemes and Developers alike, you will have even more control. Pre Made boxes to display your content in some imaginative ways.
When you expand column 1 you will see the WP Loop and inside there you will see the Home Post Box.
Home Post Box
This houses all of the different components that make up the WP Loop. This particular type of box is a Post Box, click on the options for this box and you will see why.
Notice the box name Post Box, when you create a new box that is intended for housing content, you should use a post box because this is where you can set your Schema settings.
Want to know more about Schema?
WP Loop – this is the set of php functions that would usually be found in single.php, page.php etc on a traditional theme. To change the loop in the past would require knowledge of php, hours of looking for instructions or the theme must come with the options to enable or disable parts of the loop.
With the new drag and drop interface all the coding is done for you. Just move the boxes to the order in which you want them to display.
Let’s take a closer look at the different boxes in the default WP Loop.
You can see that inside the container there is a green box called Home Post Box → Headline which is the title of your post.
Below that you can see another box which houses the Author Byline
This part of the loop is what will display the actual content. The default theme displays the full content, but you can use the <more> tag to break it up.
You can find the <more> tag in your post editor. Switch to HTML view and you will see:
Select the options for the content box and you can customize the text that the <more> tag will display.
Only admins can see this, the main use for it as far as i can tell is to quickly jump to the post/page editor when you spot a mistake on the front end of your site.
Number of Comments
This has been added inside a Container called Num Comments Wrapper, it is inside a container so that you can edit it easily with a CSS package. This simply displays the number of comments for your post.
Now at the bottom of the Home Post Box Container you will see this:
Click on that and you will see more boxes for you to play with.
All you have to do to add them you your loop is click on them and they will automatically be added to Home Post Box, from there if you wish to move them in to other containers like bylines, you would then shift click and drop them in to the respective container.
To remove one of these boxes Click and drag one, not shift click, just click. Then a box will appear sayingDrop green boxes here to hide them in the tray.
Note – this was not that noticable and will be made much more obvious in a coming update.
This is for your next and previous post link that you see at the bottom of your pages and posts.
If you open up the options for either of the two black boxes you can change the text that will display.
Now that we have quickly explored the WP Loop and column 1 let’s take a quick look at the remaining column(s)
Column 2 and Column 3
Depending on your layout, i.e. 2 or 3 columns depends on the number of Sidebars available to you.
In my case im using 2 columns, so I will have 1 sidebar.
Inside both columns 2 & 3 you will find a blue box called widgets 1 or 2
Again I’m using 2 columns so I would only have column 1 which is where the WP Loop is and column 2 where my sidebar is.
Select the Widget options and you will be able to edit the name, class and the H tag for the title of any widgets added to this box via wordpress > appearance > widgets.
The name of the widget will appear in wordpress admin > appearance > Widgets
You can change this to whatever you like for referencing when you visit the wordpress widgets dashboard.
Note – that my columns are all inside the 2 column layout box, If you moved column 2 outside of this then your sidebar would display below your content. This is because of the way the <div> tag works.
Without going in to too much detail, all you need to know for now, is that whenever you want 2 or more boxes to sit next to each other you need to give them a width and align them left or right.
We will go more in to that when we look at the CSS editor.
This is just a standard container for most sites. Usually you will find at the very least copyright information, contact details ect. The default displays the Thesis Attribution.
If you open the options for that you can paste you thesis affiliate link. Possibly earn some commission while telling the world that your site is built with the best framework in the world.
Some people like to add links to content, such as categories and some people like to add a sign up form.
Whatever you add here, it is totally up to you.