Thesis 2.0 Guide Getting Started Part 2 – HTML Editor

This guide will focus on the HTML editor found in the skin editor option.

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.

You ready?

Let’s begin!

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.

HTML Editor

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.

Update: 11/10/2012

I totally forgot about this part. My bad.

Templates

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.

Custom Templates

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.

Not anymore…

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.

Well what do you know, Need to load some JavaScript but not on every page?

Well here you can select JavaScript Libraries that come with Thesis 2.0

Also if you have some custom JavaScript that needs to be loaded on a certain page then simply drop it in here.

You may be asking why the Head Scripts are below the Footer Scripts. Well my best guess for that is you will be more likely to add your custom JavaScript to the top one, I.e the footer which is where almost all Javascript should be with some exceptions.

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.

Head

This is where all those options in site options are added.

Body

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.

Container

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.

Nav

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:

Column Container

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.

Column 1

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.

Not Anymore

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.

Headline Area

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

Content

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:

wordpress more tag

Select the options for the content box and you can customize the text that the <more> tag will display.

thesis 2.0 content boxEdit Link

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:

display the other boxes for wp loopClick 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.

Archive Nav

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.

Footer

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.

Proceed to – Thesis 2.0 Getting Started Part 3 – CSS Editor Overview

Don’t have Thesis check it out here

Thesis 2 Tutorials

About the Author

Matthew Horne

Matthew Horne is an Optimization Specialist whose passion lies in making the web a faster and more efficient place. He has been fighting an uphill battle to change the minds of the masses.

26 comments… add one

  • KiwiBrian October 9, 2012, 4:21 am

    Superb series Matthew.
    Looking forward to more.
    Can you make a point of covering any changes in subsequent releases of Thesis 2.x

    • Matthew Horne October 9, 2012, 4:22 am

      Thank you, can you elaborate a little on this point “Can you make a point of covering any changes in subsequent releases of Thesis 2.x”

      • KiwiBrian October 9, 2012, 8:33 pm

        Sorry for my poor wording.
        I was wanting to ensure that any instructions that had been rendered obsolete/incorrect by changed functionality in later versions/upgrades were replaced/countermanded by comments/instructions describing the new methodology. Greatly looking forward to your future additions to this superb series.

        • Matthew Horne October 9, 2012, 8:36 pm

          Any changes made to core will result in changes to the posts if needed.

  • Avi Jit October 9, 2012, 4:30 am

    This HTML editor post was awesome. The series of tutorial is going great. Looking forward for the next part/…

    • Matthew Horne October 9, 2012, 4:32 am

      Thank you, glad you like it, took me all day to write, about 18 hours i think, but If people like it then it’s all worth it :-)

  • chris October 9, 2012, 8:05 pm

    hi, really cool article on thesis 2.0 easy ton understand for a non coder.
    I also like the social buttons next to each post, is it a plugin?
    thank you
    chris

    • Matthew Horne October 9, 2012, 8:12 pm

      Thank you glad you liked it, yes its the digg digg plugin, but im going to work on a better solution at some point, i modified it to make it more efficient.

  • Geoffrey Allan Plauché October 11, 2012, 3:11 am

    Good tutorial. :)

    Speaking of the WP Loop, I managed to create an archive page without one using Thesis 2.0. Nothing but widgets. http://test.prometheus-unbound.org/archives/ Very coo effect, I htink, especially with the responsive layout trick I learned from you on the DIYThemes forum.

    • Matthew Horne October 11, 2012, 3:16 am

      Excellent, the limitations with Thesis 2.0 are, well, I can’t even think of one lol

  • Michael October 18, 2012, 12:37 am

    Hey Matthew,

    Can You please show me how to remove the author bylines.
    Example: by Author on October 17, 2012?

    I really want my articles to be evergreen without the visitor thinking its old and no longer relevant.

    Thanks in advance

    Michael

    • Matthew Horne October 18, 2012, 12:55 am

      when you open the bylines, a tray link will be at the bottom, if you click and move a green box, a box appears to drop that in to remove certain parts of the byline.

      You will see what i mean on this post http://diywpblog.com/thesis-2-0-getting-started-part-2-html-editor/

      Near the bottom under the section that says Number of comments. 4th image.

      Its not that obvious but it will be made much more obvious in a future update.

    • Geoffrey Allan Plauché October 18, 2012, 3:50 am

      I may be atypical, but I don’t like reading articles without publication dates or some other indication of how old they might be. The lack of a publication date doesn’t say evergreen to me. It says the content in the post could be dated and someone is trying to make it seem timeless or new by withholding important information. If I end up reading the post and it turns out to be dated, I’d feel cheated and less likely to return. But I’ll probably just pass it by and keep up my googling until I find something that does advertise its relevance to me by having a publication date.

  • Leonie Alaimo October 24, 2012, 12:40 am

    Hi Matthew
    Appreciate all your information and hoping you can help me with this one!

    I’ve done something (very) wrong on my website. I can see my blogs but can’t see anything on any other page. When I change the theme to Twenty Eleven I can see all the pages and all the information on the pages and all on the blog.

    With Thesis 2 active I’ve got 2 columns and on the Home page I’ve got WP Loop, Home Post Box, etc in column 1, but on the Page, I’ve got 2 columns with nothing in column 1, widget in column 2. I guess I need something in column 1 to allow the page content to be seen.

    It was showing, but I’ve botched it up somehow.

    Would appreciate your help.

    • Matthew Horne October 24, 2012, 3:45 pm

      For this issue, im assuming that you deleted the loop and so you would need to recreate it. The quickest way to do that is to copy a similiar template, failing that the loop should also be in the sidebar as its available for all templates.

  • Gerald Lopez December 8, 2012, 9:04 am

    Thanks Matthew, how do I edit the general look of the site? Do I work on the Home HTML edit page? Cheers

    • Matthew Horne January 29, 2013, 7:26 am

      You can edit the general look via the CSS editor.

  • yasirhaleem January 17, 2013, 11:43 am

    Hi Matthew, thanks for all the information and hoping you can help me with this one!

    on my single post content field is not showing i copied this template from blog ( which is working fine showing all posts ) single post show excerpt but not the content field .. i’m not using WP Loop and i don’t know what is this all site is working fine but single post … can you please tell me how to add WP loop and what is this ?

    • Matthew Horne January 29, 2013, 7:26 am

      You need to use the tab which appears under post boxes, open it up and inside will be a box called content, there you will be able to swap out the excerpt.

  • Monakah WhiteWolf Reign February 9, 2013, 12:02 am

    I just spent about 30 minutes figuring out how to remove the borders that are there by default. I managed to get them all except one, which looks like it’s the content border but I don’t see a package for content to remove borders.

    • Matthew Horne February 9, 2013, 5:21 am

      Inside the CSS editor, the columns package, additional CSS, there is a background image that is creating that border.

      This method of adding borders is used to ensure it extends from top to bottom by applying it to the background of the main container which has both the content and sidebar inside.

      Hope this helps.

      • Monakah WhiteWolf Reign February 11, 2013, 11:46 am

        I had actually found that already and removed it but I still see a top border. This site is at http://course.reignbowbirth.com/
        (there’s nothing else on the site yet, I’m starting from scratch)

        • Matthew Horne February 11, 2013, 1:33 pm

          I can only see the default wordpress theme and not thesis. But if you are talking about the border at the top of this theme then you need to look at style.css line 518, selector #branding,
          border-top: 2px solid #BBBBBB; <— remove that and it will remove the border.

          Regards

  • Buy Thesis April 18, 2013, 7:18 pm

    There are a lot websites nowadays offering to buy thesis . Nevertheless, students have to try their best to test their abilities and what have they achieved during thesis writing. On the other hand, they can’t be sure that their thesis is perfect, even if they tried their best. Thus it is absolutely acceptable to ask for professional help in proofreading or formatting a thesis. http://buythesis.net/ can easily proofread and edit your thesis, so from now on you don’t have to worry about any mistakes when submitting your assignment.

  • Hafiz May 30, 2013, 1:05 pm

    The thesis theme 2.0 is very difficult, I still use the old ..

    • Matthew Horne May 30, 2013, 1:08 pm

      I wouldn’t totally disagree with you, however it is very powerful, 2.1 has done much to improve the UI, so I would expect things to become easier.

Leave a Comment

Current day month ye@r *