How to Use Thesis Theme to Customize Your Website • New Tricks
 In WordPress

In this post, I am going to walk you through making some of the customizations that we used to create the Isvari Yoga site with Thesis Theme for WordPress. So here we go…

  1. First you will have to purchase Thesis from DIYthemes. It is available for 87.00 for a single site and 164.00 for a developers license. There is a thirty day money back guarantee if you really can’t use it.
  2. Download the Thesis theme from DIYthemes site to your desktop and unzip the folders.
  3. Using an FTP program like Filezilla, you will need to upload the theme to your WordPress installation. You put it in the “Theme” folder that is you will find located in the “wp-contents” folder for your site.
  4. While in your FTP program, you have once important thing to do in order to take advantage of all the controls that Thesis offers. Since this is a new installation of Thesis, you need to change the name of your custom-sample folder to custom. (If you have been using Thesis and Upgrade you would not do this step or you would overwrite your customizations).
  5. Now you are ready to Login to your WordPress site and Go to the dashboard to Appearance . Under Appearance, you will find, “Themes” and Thesis should be one of the choices on the page and you can activate Thesis now.
  6. You will see that is is pretty plain vanilla. At this point you are ready to make some modifications to the theme. It is easier to do with some content in it so I used a plugin called WPDummyContent to put some posts and pages into the site. You can actually download this plugin right from the dashboard under Plugins, Add New.
  7. Now you need to make sure that the Thesis Custom Stylesheet is checked for being enabled.  Go to Thesis > Site Options > Custom Stylesheet Options > check Enable custom stylesheet > .
  8. While you are on that page, go ahead and selct the option to have  the theme use the WordPress Menu rather than the built in Thesis Nav. I think you can’t beat the Nav menu maker that comes with WordPress.  Before leaving this page,  CLICK THE BIG ASS SAVE BUTTON!
  9. To set up the site format, go to Thesis > Design Options > Site Layout > Columns > change to 3 columns with the width on the content 500 px and the two sidebars 195 px each.
  10. While on that page set the column order to Content-Sidebar1-Sidebar2. Click Save.
  11. Now let’s play with colors and fonts. You can set the fonts,colors and header colors by going to Thesis > Design Options > Fonts, Colors, and More. Some of the choices we made were: Body and Content: Verdana, Site Background:6B489C, Page BackGround:FFFFFF, Primary text: 565656, Primary Link: 919EDB.
  12. We chose the font size for the Content Area: 16pts ( this larger font size helps  the site show up better on mobile)
  13. The Nav menu presents lots of options for getting into trouble. As you can see we moved the menu below the header and there are lots of tutorials on the web to do this but I have not included that code here. But to style it these are the choices we made: We used Verdana Font again and set it at 14pts. We used Link Color: 6624AC, link hover:94AOEF, the next four variations were all FFFFFF, then the Nav Border 0. Make changes and hit the Save button.
  14. You have a choice as to whether your posts will show as “featured” which is regular style or as Teasers. I have chosen to do a regular blog style posts and to do this we go to Thesis > Design Options > Homepage Display Options > Features & Teasers  > simply choose the largest value from the dropdown list above—that way, all your posts will be shown as features.
  15. To add a header image – Thesis > Header Image > Upload the image you want to use.
  16. To add a background image, In Thesis Options: Open custom.css file and copy/paste at the bottom of what is in the file :

body.custom {

background: url(images/bg.jpg)repeat scroll left top #8c4ac8; }

After that you can upload your background image to your images folder through ftp or copy/paste the file URL if you used the media library

If you upload the image through the media library, replace images/bg.jpg with the file url (ex: newtricks.com/wordpress/wp-content/uploads/2011/04/bg.jpg)

DON’T FORGET, always hit the Big Ass Save Button after you made any changes.

 

 

Recent Posts

Leave a Comment

StudioPress-Genesis-Framework.jpgdreamstime_9843914-300x205.jpg