If you want to build a website with your own design, Thesis theme (by DIYthemes) is a great blank canvas theme to use. Following is a starter guide for getting the Thesis theme installed and customized.
How to install Thesis
If you haven’t already purchased the Thesis theme, just click here: The Thesis Theme for WordPress . You will download from the Thesis site to your computer in a zipped folder.
Next, go into your WordPress dashboard and go down the left dashboard menu to Appearances/Themes, then click on Themes. Next,click on Install Themes which is at the top of the page. Now click on Upload which is located just below the tabs at the top of the page. Find the Thesis zipped folder and upload it. Once it’s upload you will be asked if you want to activated, and you do. Now, click back over to the tab on your browser that shows the page that the rest of the world will eventually see. You should now see a simple formatted Thesis theme shell.
Customizing Your Blog with Thesis Theme
IMPORTANT NOTE: As you make changes within the Thesis Site Options and Design Options, click on the Big Ass Save Button often. You never know when your internet connection may be lost. And, yes… the Thesis people have a sense-of-humor, there really is a Big Ass Save Button (see photo below!)
Setting The Layout
Now that you have Thesis installed, it’s time to setup the default layout, meaning the page width, the number of sidebars, the width of the sidebars. To do this, go down the dashboard menu and click on Thesis/Design Options. In the upper left corner you see Site Layout, click on Columns, the first menu item below Site Layout. The first step here is to decide how many columns you want to appear on the pages or posts that will have columns. 3 column means two widgets columns plus a content column.
Once you selected the number of columns, then you plugin how wide (in pixels you want your content area and how wide you want your widget columns (or sidebars).
Next, you select the column order by clicking on the Column Order section. If you have picked a 3 column layout, you can see there are three layout options.
The next option down is the HTML framework. The default setting is Page Framework. The Full-Width-Framework will allow you to build a page that takes up the entire width of all monitors.
Below this you’ll see a cool feature, it the Outer Page Padding. This will add white space around your pages, which will surround the header, navigation bar, content section and footer.
Now jump over to the dashboard menu and click on Header Image. This is the place to check how wide of a page you’ve actually created. Pages are sites created today are generally between 960 pixels and 1050 pixels wide. The average page width has grown over the years as monitors and laptops have gotten wider.
Thesis Theme Design Options (Way too much fun!)
This is Thesis design control panel. There are so many options it was impossible to take a screenshot with all the drop-downs open. You can chose from over 50 fonts and have a different fonts for your header, menu bar, sidebar, headlines, etc. The bottom line, Thesis is capable of doing almost anything. If you can’t achieve it this control panel, you can probably make it happen with some CSS.
Uploading a custom header
While we are in the header upload section, upload the header for your site. JPEG are generally best because it will load fastest for your visitors. Your header image has to be at least as wide as what’s noted in this section. It’s best to have you header image cropped to the exact width you want, however, the program will crop it down if you don’t have a cropping or resizing tool.
If you don’t have a custom header image, Thesis will display the name and tagline you have entered under WordPress/General Settings. You can customize the font type and color in the Thesis Design Options, explained below.
Creating empty pages and posts
Now that we have the columns setup, and the header in place, let’s add a couple of pages and posts…and then show them on the menu bar. At this point I like to identify my home page. To do this, click on Setting/Reading in the dashboard and select Your Latest Post if you want a blog on your home page. You can show below how many posts to show on your home page. If you want a static page, check Static and use the drop down to select the page.
While you’re in this section, if you want a blog for you home page, type in the number of blog posts to show on your home page. Below is a section that talks about how to really fine-tune the blog layout with Thesis.
Click on Add New under Pages in the WordPress menu bar. In top entry box where you see Enter Title Here, type in the title that you want to appear on that page. On the far right, click on Publish. Next, select the layout for the page from the drop down template. Default template will be what you setup with the sidebar column layout or you can select no sidebar. You always come back and change it later.
I personally like to setup all of the pages first without any content, but please do whichever way you prefer.
Setting up the menu bar
Click on Thesis/Site Options. Within the Site Options page, click on Select Menu Type (just below Navigation Menu) and here you have an option of select the WordPress Nav Menu or the Thesis Nav Menu. The Thesis Nav Menu is highly customizable and the WordPress Menu Bar is not.
Open the section titled Pages next. Here you can alter the page title to something more appropriate for the menu bar. Add a check mark next the pages you want to appear in the menu bar and drag the pages to the order they should appear. The page at the top will appear on the far left of the menu bar and the one on the bottom will appear on the far right.
Next down is Categories. Select the categories that you want to appear in the nav bar.
And further below is Add More Links. This will add any links to your nav bar that would go off your website.
The next section will add Home to the beginning of you menu bar. If you’ve selected a static home page above and moved it to the top, you won’t want to select this option. If you want a blog for your home page and you want Home to appear on the menu bar, check this option.
Finally, if your site has a blog, you can select Feed Link so your RSS link will appear in the far right of the menu bar.
After clicking on the Big Ass Save Button, take a look at your site and you’ll see all the nav bar links there!
Setting all the Fonts, Colors and More!
In the dashboard go to Thesis Design Options. Once in there, go to section titles Fonts, Colors, and More where you can select the fonts and font colors for every part of your site. Just work your way down from the top. In Body (and Content Area) select the default font style to be used throughout your site. You can override this default font in any section below.
Next down you’ll see where you can select the colors for your site background, the page color, the primary text color and link color.
Just below that you’ll see the option to add a Cool Shadow Effect around your page as well as the option to show the Interior Layout Borders.
You can continue all the way down the column to customize the nav menu bar, page titles, paragraph titles, side bar titles and text, and even what appears in the footer.
How to Setup a Home Page Blog with the Thesis Theme
Go the Settings/Reading and click on Your Most Recent Posts for your home page. While you’re there, select set the number of blog posts that you want to show on the home page. Next, go to Thesis/Site Options. Open the sections under Home Page Display Options and select the same number of posts that you selected under Setting/Reading.
Next, under Display Options, choose what Bylines you want to appear below the post titles. Under Posts, select whether you want to show Full Post Content or Post Excerpts. I would recommend that if you want a summary description of each recent post to appear on the home page, select Full Post Content then add a More Tag within the post where the summary will end.
How to add your Google Analytics script to Thesis
Thesis makes this super easy. Go to Thesis/Site Options and then go to Stats Software/Script. The directions are right above the box, you just paste the script you get from your free Google Analytics accounts right here. It’s that easy!
Adding CSS and PHP code to the Thesis Theme
To get to this section, go to Thesis/Custom File Editor.
Here’s are some reason that you might want to use CSS code to further customize your website appearance:
You can add an image background to all pages or to an individual page. You can change margins throughout the website. For example, change the right and left page margins, add margin below the navigation bar or add margin above or below the page titles. You can use CSS to change the default menu bar text from all caps to no text transform. Just about anything you might want to do to the design of your site can be accomplished with some CSS code, and in some cases a bit of PHP code.
If you use the pull-down menu in the Thesis Custom Editor, you’ll be able to add PHP code here. PHP is used to changed functions within your website. Like the CSS code, you can copy the code right off the Thesis forum and paste it here. However, with PHP code you do need to be careful. A single incorrect character can cause your site and your dashboard to crash. Your site won’t be ruined, but you’ll need to use an FTP editor to get into your backend files to remove the bad code you added. My recommendation is to use an FTP editor if you want to touch the PHP code. That way, if you crash your site, the FTP file still works and you can just remove whatever you added. There are lots of FTP editors on the market, I personally prefer one called CoffeeCup by Direct FTP. http://www.coffeecup.com/
Here’s are two PHP examples:
Move the nav bar below the header
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);
Customize the footer
Remove the WordPress link and Thesis link from the footer and add your own footer information. The PHP code for my site is below. You can just change the text within the code for your own site and then paste it into your custom PHP file.
remove_action(‘thesis_hook_footer’, ‘thesis_attribution’);
function add_custom_footer () {
?>
<p style=”text-align:center;”>Copyright2010 | T2 Affordable Web Design | All Rights Reserved | Call: 425-260-6238 | Email: <a href=”mailto:tom@t2websites.com”>tom@t2websites.com</a>
<?php
}
add_action(‘thesis_hook_footer’, ‘add_custom_footer’);
Here’s the CSS example that was discussed in the class.
Customize the nav bar
This will extend your nav bar full width and add the color. Replace my 960px with your own page width and replace my color with your own.
ul.menu {width:960px; margin-left: 0px; margin-top:3px;background-color:#FF8218;}
This will remove the ‘all caps’ from the navigation bar.
.custom .menu a, .menu li ul
{
text-transform:none;
}
