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.
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.
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.
You will now see the page below.
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.
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
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.
The Sidebar will drop down below the main content.
Below the sidebar will be the footer.
There it is, a mobile friendly website using the Thesis 2 Classic Responsive Theme.