Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Switching To The Thesis 2 Classic Responsive Theme

Thesis 2 Classic Responsive Theme

ThriftZizel has switched to the Thesis 2 Classic Responsive Theme.  I must admit, I was a bit intimidated by this change.  Not because it is all that hard to do, but because of the way theme switching used to be done.  Let me explain.  In the past there were a couple popular ways to test out a new theme:

  • Set up a test site at a new URL (domain) to test your changes.  When you were done, you would have to make sure you copied all the relevant files over to your real site.  It was easy to miss files and settings and end up making your site a mess.
  • Set up a test site “localhost”.  This means you would set up an environment locally, on your PC or Mac.  This has all the same problems as listed above.

Enter Thesis 2 and we now have a brand new way to do this.  Read on and I’ll show you how I switched ThriftyZizel from Thesis Classic to Thesis Classic Responsive.

I’m sure by now, everyone knows how important it is for your website to look good on mobile devices.  There seems to be some conflicting information on whether or not Google penalizes non-mobile optimized sites.  Setting SEO aside, you still want your site to work well no matter what device your visitor uses.

I started ThriftyZizel after setting up a website for my wife.  Google Analytics has revealed that 47% of her traffic is from mobile devices.  And phones account for 56% of the mobile traffic.  I probably shouldn’t have been surprised, being a big phone/tablet user myself, but I was.  After I finish with this site, I’ll fix my wife’s site for mobile too.

Google Analytics

Here is what ThriftyZizel looks like with the Thesis Classic Theme (non-responsive).  Note how it is scaled way down to fit my 5″ phone screen.  It looks nice, but now the visitor has to pinch-to-zoom to navigate and read the page.  This may cause some visitors to navigate away from your site.  Fortunately for us, the Thesis Classic Responsive Theme fixes this problem.

ThriftyZizel on Mobile Phone

Let’s get started…

After you’ve logged into your site, navigate to Thesis.  Select Skin => Manage Skins.  You will now see all the themes loaded to your site.  Thesis 2 has introduced a new way to switch themes without using a separate test site.  It’s called Preview Mode.  Scroll to the Classic Responsive theme and click the blue “Preview Skin in Development Mode” button.

Thesis Classic Responsive Preview Mode

You will now see the page below.

Thesis Classic Responsive Preview

At the top right of the page, click the “View Site” link.  I like to right-click and open in a new tab so I can stay logged-in 0n one tab, and see my site in another.

Here is what your site will look like now.  Don’t worry, only you will see your site in the new theme.  Your visitors will see you site in non-preview mode.  If you want to be sure, open your site in a different browser.  Preview Mode is awesome!  This is what will allow us to work on our site without affecting our current site, until we are ready to make the switch.

Thesis Classic Responsive Theme

Wow! This looks just like when we first loaded Thesis.  We can now edit this theme to make it what we want.  This process is the same as before.

Tip: Open your site in a different browser, where you aren’t logged into your site.  You can navigate your current theme while working on your new theme.  This way you can make sure to include all your prior customizations in the mobile responsive theme.

Click on Skin => Editor

Thesis Classic Responsive Theme Skin Editor

You will be taken to the Classic Responsive skin where you can make your customizations.  For me, I will repeat the same customizations as before.  This seems like a daunting task, after all, you spent hours getting your site “just right”.  Now, we have to start from scratch, again.  You might be asking, what good is this?  Why do I have to repeat my changes?  Well, remember, any time you switch themes you are starting over.  What Thesis 2 brings to the table is the ability to do it in preview mode so you don’t have to set up a mirror site.  In theory, you could switch from Thesis (why would you want to do that?) and you’d have to start over as well.  Theme customizations are stored in WordPress file folders with the theme so switching themes requires you to start over.  Again, this is far better in Thesis 2 preview mode than the alternatives listed above.

Tip: Any changes you make in preview mode will be saved in between sessions.  This allows you to work on your site as you have time and not lose your changes in between edit sessions.

It requires a fair amount of work to make your Thesis 2 Classic Responsive Theme look like your prior theme.  I spent nearly 6 hours converting this site.  I took the opportunity to make a few small styling changes during this process.

The top of this post shows what this site looks like now, using the Thesis 2 Classic Responsive Theme.  Note the responsive menu bar is the word MENU preceded by 3 bars.  Clicking on Menu will drop down the menu options.  Clicking on one of the options will take you to that page.

Thesis 2 Classic Responsive Menu Bar

The Sidebar will drop down below the main content.

Thesis 2 Classic Responsive Theme Sidebar

Below the sidebar will be the footer.

Thesis 2 Classic Responsive Footer

There it is, a mobile friendly website using the Thesis 2 Classic Responsive Theme.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 12 comments… add one }
  • M Mahendra Reddy June 12, 2014, 11:31 PM

    Hi Doug Macklem,

    Yesterday I also shifted to Thesis Classic responsive theme to Thesis classic. I like the new layout. I tested my website in my tablet.
    It is perfectly fitting into the screen

    Apart from this, I really appreciate your effort in sharing your thesis knowledge with others. You are doing a great contribution to thesis community. I need to go through all of your tutorials 🙂

  • Doug Macklem June 15, 2014, 7:39 AM

    I’m glad I could help.

  • Thorsten July 23, 2014, 3:39 AM

    Hi Doug,
    i am an absolute beginner with Thesis, i purchased it yesterday.
    Found your Blog an read all the Step’s. You helped me to understand a lot of Thesis, a really great Job. Some things in 2.1 are different than in your examples and i have to find out how to get them working.

    Greez from Germany (Where the soccer worldchampion 2014 from 🙂 )

  • Doug Macklem July 23, 2014, 9:25 PM

    Congrats on the win! 🙂

    Yes, 2.1 has changed some of my steps. I did this site for fun and just don’t have the time to make it current. I’m glad you found it helpful.

  • Ken Wilson February 9, 2016, 3:00 AM

    Hello Doug,
    First of all, top stuff in all the Tutorials. I have a question to ask an expert of which I am not. I use Thesis 2.1 with the Classic Responsive Theme. Even though I have had Thesis for a while, I have still got my learner plates on, like probably lots of others.

    I am going to use the example of your page here. I have a main header, which is 1008 px wide x 250 px high, loaded through the Header Section. This is the header I have on the Front / Landing Page.

    I have lots of different Categories on the site, which I am making Custom Pages for each product. I have tried to make a new Header / Banner of 1008 px for each Custom Page, that spans the Content and Sidebar Columns.

    I have searched all the Tutorials and The DIY Forums, but I cannot find any information of how to do this through Custom CSS or anything.

    All I have been able to do is bring in a Feature Image as the Category Header / Banner, but this only covers the left hand Content Column, and all the Widgets / Text Boxes all lift up to the top which looks terrible.

    All I am trying to do is put a Header / Banner like yours on this page, onto a Custom Page.

    I do apologise for such a long winded question, but I do not know where to go next.

    Thank you,
    Ken Wilson (Melbourne, Australia)

  • Doug Macklem February 11, 2016, 8:25 PM

    Ken, sorry to hear that you are struggling. I believe I understand what you are trying to do. When I visit your Summer House page I see that your site header is gone and you have an image in the main content column and the sidebar moves up but is not covered by the image. Your main content column and sidebar are two different “containers”. You will need to be able to move your image up, outside of the main content container, just like the site header, to make something like this work.

    I don’t believe you’ll be able to do this without custom PHP. I believe it will take PHP to recognize the page that is loaded and “rotate” the appropriate header image. PHP is something I AVOID at all costs. This is just my personal philosophy. Others love to dig into PHP. My goal is not to be a “programmer” but to run a business and build the nicest website I can to accomplish this goal. I stop short of any custom PHP or JavaScript. I limit myself to native Thesis functions of dragging-and-dropping HTML or other containers combined with CSS. I believe it is safest to stay within these limitations. PHP/JavaScript can corrupt your site if you aren’t careful and know how to restore to a prior working version. You may be able to find a plug-in to do this, but I try to avoid too many plug-ins too.

    If you figure this out, drop back and let us know so we can all learn. Best of luck!

  • Doug Macklem February 15, 2016, 11:57 AM

    Ken: I figured it out. Thanks for the challenge! I’m not sure why I didn’t think about this first. I added a container above the content and sidebar columns and placed a Text Box in it. I added the picture to the text box and it spanned both columns. I’ll shoot you an email with examples of what I did.

  • Ken Wilson February 17, 2016, 1:07 AM

    Hello Doug,

    I would just like to publicly thank you for going out of your way, and spending time on investigating the problem I was having with placing a full width header on separate Custom Pages.

    Sending me a specific email with instructions of how to carry out the process with the HTML Containers and Text Boxes was a bonus for me.

    Keep up the good work, top site and excellent tutorials.

    Yours sincerely,
    Ken Wilson (Melbourne, Australia)

  • Doug Macklem February 18, 2016, 4:50 PM

    Thanks Ken! I’m glad I was able to help.

  • Burnell Yow! July 3, 2017, 9:23 PM

    Hi. Doug. I’m using the Classic Responsive skin in Thesis. My problem is when the mobile menu is activated, here’s what appears as the menu title: ‰¡ MENU
    Any suggestions. Thanks.

    Burnell

  • Burnell Yow! July 3, 2017, 9:31 PM

    Doug,
    I figured it out. It is now working. Sorry to have troubled you.
    Burnell

  • Doug Macklem July 8, 2017, 5:06 PM

    No troubles at all. I’m glad you figured it out.

Leave a Comment