Preparing Your Thesis Based Site for Customization
Hi, and welcome to Lesson 1 of the Customizing Thesis Like a Pro Tutorial Series. The goal of this tutorial series is to show you how to take advantage of the tremendous customization opportunities that Thesis affords. These lessons assume that you have no coding experience and they are designed to guide you step by step throughout the process.
In this first lesson you’ll learn about customizing the default CSS of Thesis. This lesson assumes you have a working website running using Thesis and that you’ve established FTP access to your site. If you’re not perfectly comfortable with FTP please watch the Lesson 4 videos of my Start Building Your Website Here video series. This lesson goes through my recommended system of file structure organization and FTP.
Okay, let’s go ahead and get started. This lesson has 3 parts. In the first part of this lesson we’ll prepare our site for customization. In the second part we’ll look at the Thesis CSS file structure and finally in the third part we’ll take a look at some best practices through examples of simple customization to CSS.
I’ve created a demonstration site located at www.banner2.byobwebsite.com. This is a basic installation of Thesis 1.6 with very minor modifications made. We just added a couple of pages and some headings. Let’s go down here and scroll down to the bottom and select WordPress Admin and log into our Dashboard.
Once on our Dashboard we’ll scroll down here and take a look at our Thesis options. The first thing you’ll notice is this little Attention box. It says in order to take advantage of all the controls that Thesis offers you need to change the name of your custom-sample folder to custom and this is something that we’re going to be doing in just a moment.
If you go down a little further to the Custom File Editor there at the bottom you can see that when you click on that, that same Attention box shows up.
In the future once we have taken care of this custom-sample folder you’ll actually be able to edit your custom files, your custom PHP file and custom CSS file directly from this. I strongly advise against that and we’ll talk about that in a little while. But anyway I just wanted you to see what this looked like.
In order for us to be able to resolve this we have to change the name of this folder in our hosting account. So let’s go ahead and open up another window. This website is hosted at BlueHost so we’ll go ahead and log in. And now that you’re here at your control panel just scroll down to File Manager; if you don’t have a BlueHost account just locate the feature of file manager in your hosting account.
Select the File Manager and the public_html folder, go down to the installation folder that your website is in. In my case it’s under this subdomain called banner2. Open up wp-content, themes, thesis-16 and under thesis-16 you can see that there’s this custom–sample folder. We need to just get rid of that hyphen and the sample so select that, select Rename, just scratch out sample. I don’t understand why this does that but when it asks for us to delete we’re going to say cancel and then we’ll say rename the files.
Now you can see that your custom-sample was renamed to custom. If you want to see whether or not that worked switch back over to the Thesis Options here. Go down to Thesis Options and you can see now that Attention box is gone.
If we go down to the custom-file editor, which is also where you saw it, this whole thing shows up and it says you are currently editing custom css. Let’s look at editing custom_functions php. Select Edit selected file and note that this is the reason why I strongly suggest that you do not do your editing here. Because it says “Note: If you make a mistake in your code while modifying a PHP file saving this page may result in your site becoming unusable. Prior to editing such files be sure to have access to the file via FTP or other means so you can correct the error.” So if you’re going to have an FTP version of this file in any case, it just makes sense to me to edit the file on your local machine, upload it here, test it and if it causes a problem then you can just edit it again on your local machine and upload it again.
To do it my way we need to open up our FTP client. I use FileZilla and if you’ve watched other video tutorials this will be familiar to you. The reason that I love FileZilla is because it allows you to synchronize local file structure with your domain file structure. So we’ll go ahead and log in, connect up, and you can see that I’ve got this local file structure called “Banner2byobwebsite”. Under WordPress I’ve got wp-content. You can see what’s under wp-content here. Well that perfectly corresponds with what I have over here in the remote site which is, I have my public_ html and then I’ve got the “Banner2” subdomain and under that there’s this wp-content. So if I select down here to themes and thesis_1.6 you can see that here I’ve changed it to custom and here I have it as custom-sample because I didn’t change it on my local machine.
So let’s download the custom folder to this. So now we’ve downloaded the renamed custom folder and all of its contents which is not really very much but nevertheless all of its contents to our local machine. We’ve left our custom-sample alone. That gives us the ability if we have to restore back to an original file we can just take it out of custom-sample and bring it here. So if we look at the contents of custom and custom they are identical here.
Okay and that wraps up Part 1 of Lesson 1 of the Tailoring Thesis like a Pro Tutorial Series.