Home > Online Marketing > How To Build a Website Using WordPress and Thesis Theme Part 1

How To Build a Website Using WordPress and Thesis Theme Part 1

I recently began working with WordPress and the Thesis Theme to redo the website of a non-profit rabbit welfare group that I volunteer with.  The test site I’m working on isn’t live yet, is live at LARabbits.org and I’ve learned things about Thesis that I want to share.

You may be thinking about building a new website and are unsure which way to proceed.  Although WordPress (installed to a domain – not WordPress.com) is a very functional website platform, it is only as good as the theme installed on top of it.   So why did we go with Thesis?

  1. We want to allow multiple people to update the site, which WordPress does
  2. The Thesis theme came recommended as the one behind ChrisBrogan.com, a very popular marketing website
  3. It allows much more customization than other themes I’ve worked with and is only $87

Once you’ve installed WordPress to your domain – most hosting providers including mine, Dreamhost, offer an easy one-click install option -  upload the Thesis Theme using an FTP program such as Filezilla into your /wp-content/themes/ folder and follow the instructions how to activate it.  The next challenge is the uphill climb learning how to use it, so read this goldmine of tips to save some time!

How to Setup New Pages in WordPress

Likely the first thing you will want to do is layout the pages you want in the navigation menu (across the top), so let’s start there.  Although WordPress is a blogging platform, you don’t have to want to use the blog capabilities to create your website.  On the other hand, WordPress only allows you to add new blog posts to one page – the ‘posts page’ – and the default for this is the Home page, although that can change. I haven’t yet  figured out a way to allow posts for more than one page, but will update here if I do.

  • Under Pages>Add New create the pages in the nav menu but don’t fill them in yet.
    • You can turn off the default displayed sidebar(s) when creating a page under Attributes>Template>No Sidebars.
    • You can also turn off, on individual pages, Allow Comments under Discussions.
  • Under Settings>Reading you can change which page you will post new posts to (i.e. the ‘blog page’).  Here also you can change which page is the Home page.
    • I changed our posts page to be Events because I’m using an Events Calendar plugin that works in conjunction with the posts page (see Plugins below).
  • Under Settings>Permalinks you should change the default setting for how your URLs (“slugs”) are displayed.  If this were a blog, I would say use the second option that includes the date, however, as we’re creating a website not a blog, I would use a custom setting: /%postname%/.  Then check that the slugs are as descriptive as possible, as they are important for search engines to know what the content of each page is about.  If they need to be revised go to Pages>Edit, mouse-over the page name, select Quick Edit, and change it there.  Page slugs should have dashes between the words.

There are three main areas you will use when editing in Thesis:  Site Options (renamed in just-released version 1.7 from Thesis Options), Design Options, and a new area added v1.7, Home Page Options.

Tips for Using Thesis Theme – Site Options:

  • If you’re making a website, not a blog, you’ll want to turn off all comment ability under Comments>Pages>Disable Comments On All Pages.
  • Under Navigation Menu>Pages, check off the pages that you want included in the drop-down navigation menu and drag-and-drop them into order, however, I found out that sometimes plugins can interfere with this capability.  Specifically, a plugin that I’m using to create an Events Calendar had to be disabled for drag-and-drop to work (more on that below).
  • Also under Navigation Menu, you can add Categories that you assign to posts into the nav menu and you can turn off having a Home page.   If you don’t want a border around your nav menu, change 1 px to 0 px under >Nav Border Width.

Tips for Using Thesis Theme – Design Options:

  • Here you can change your site’s font, background colors, link color, if you want a 1, 2 or 3 column layout (2 is recommended unless you have good reason to use 3).  You can also change how wide you want your content and sidebar columns to be.
    • You may want to use ColorPicker to select the colors you need, or else when you change the background or content colors, a small color chart will appear.
    • Another interesting tool is Color Hunter, where you can upload an image and create a color palette for your site.
  • The Multimedia Box in the sidebar is pretty cool.  Here you can upload images to your /custom/rotator/ folder and it will rotate them in the sidebar.  Or, you can embed a video or add custom code.
    • Note: if you change the color of your content area’s background, you’ll want to change the Multimedia Box>Image Box Background Color to match.
  • Make sure under Custom Stylesheet you check the box Use Custom Stylesheet.  You’ll need it, but more on that in my next post.

Tips for Using Thesis Theme – Home Page Options:

  • Under Home Page Display you can select the number (or ‘all’) of “featured posts,” those that will be ‘normally displayed’ on the posts page in entirety, or where you cut a post with the More tag: .  Remember under Settings>Reading we can change which page they post to, but since the default is Home they called it Home Page Options.

Tips for Filling in Pages:

When editing pages (and posts), the toolbar you have to work with is fairly self-explanatory.  I just want to point out the things that are not so obvious.

  • Make sure when you create links to text, using this , that you fill in the Title field and choose Open Link In New Window unless you want visitors to be able to leave your site when following links.

For these, you will switch from the Visual tab into the HTML tab.

  • You need to get comfortable working in HTML for certain things. For example, if you want to highlight something on the page, you can create an “alert” which surrounds the text with a yellow box (a Thesis thing, not WordPress).  Put the following around the text:

<p class=”alert”>whatever text you want</p>

  • To increase the size of your font, you can change it to a Header under your Format drop-down in the toolbar.  If you don’t see this option, you may need to toggle on your “kitchen sink” button to see more of your toolbar, which looks like this:  However, you may want to edit your HTML instead of making the text a Header, as search engines look for Headers as descriptive of what is on the page.  Font sizes can be 1, 2, 3, 4, 5, etc.  Play with it till you get what you want.

<p><font size=”3″whatever text you want</font></p>

  • For the site I’m working on, we want a 2 column layout within the content area on some of the pages.  I could not find a simple way to do it within Thesis so I inserted a table.  Here is that code for your use, where 760 was the entire width of my content+sidebar areas (I removed the sidebar when creating these pages) and the line color down the middle is #26ccd1 (replace with yours).

<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”760″>
<tbody>
<tr>
<td width=”360″ align=”center” valign=”top”></td>
<td width=”20″></td>
<td width=”2″ bgcolor=”#26ccd1“></td>
<td width=”20″></td>
<td width=”360″ align=”center” valign=”top”></td>
</tr>
</tbody>
</table>

Free WordPress Plugins

Plugins are widely available to solve nearly every problem you may have in customizing your website.  Once downloaded, you place them into the /wp-content/plugins/ folder, go to Plugins in your admin sidebar, and activate them.

  • cforms – create multiple forms including multi-select boxes and insert them into any page using the icon that it adds to your toolbar: .  While not the easiest form maker to use, other plugins I looked at for this only allow the creation of a contact form. The form I need is much more involved so this was the better choice.  The help files are pretty explanatory, but a couple of tips:
    • When I tried to use the pre-defined “regular expressions” (regex for short) for phone and zip code fields that validate that they are real, I kept getting an error message when I submitted a test on the form.  I searched the support forum, googled the error code, and even posted in the support forum for help but didn’t get a response.  When I took them out, replacing them with just Phone and Zip, the form works but now anyone can put any garbage in there and it will ‘pass through.’  Bummer!
    • For multi-select fields you have to enter the following:  YourQuestion#Answer1#Answer2#etc.
    • Under Cforms>Global Settings>Database Input Tracking you can enable the ability to store responses in a database, which you can then access  under Cforms>Tracking.  Here you can view the responses to the forms on-screen or export them as a CSV and open then in Excel.
    • You can also have the system email you (and others) a copy when a form is submitted, under cforms>Form Settings>Admin Email Message Options.  Those who submit will get a confirmation in their email, editable under cforms>Form Settings>Auto Confirmation.
    • You can edit specifics of your form under Cforms>Styling>Basic CSS Editor.
      • Change the page width under .cform { width: 760px;
      • Change the width of text fields under .cform label {width:300px; AND .cform label span {width:300px;
      • Change the height of the multiselect box under .cform select.cfselectmulti    { height:5.5em;
      • Move the “(required)” text all the way to the left under span.emailreqtxt { margin:0px 5px 7px 0px; (change in red)
      • Change the font color by replacing it wherever you see color: #XXXXX or #XXX
  • Exclude Pages – a wonderful WordPress plugin I went nuts looking for!  It removes page links in the sidebar, as we didn’t want the menu both across the top and down the side (on those pages that we did choose to have a sidebar).  It adds an Exclude Pages option under Pages>Edit (select Edit not Quick Edit), as a checkbox in the sidebar.
  • Events Calendar – As reminder, I found that the Events Calendar interfered with my ability to drag-and-drop nav menu changes, so I simply deactivated and reactivated it.  This plugin puts a calendar in your sidebar, and when you create a new event you have option to publish to your posts page.  Therefore, I made the posts page my Events page for this particular website I’m working on.

There’s more to Thesis that I’ll continue in a further post.  At least I can say that the site I’m working on is moving along.    When it’s done I will post a link.

Some Good Resources




Share
  1. May 7th, 2010 at 11:38 | #1

    Just wanted to say thanks for the post – I was searching all over for a plugin that I could use to remove pages from the navigation, and I found it in this post. Thanks!

  2. May 8th, 2010 at 10:29 | #2

    @Adam
    That’s great! Glad I could help.

  1. No trackbacks yet.

CommentLuv badge

Spam Protection by WP-SpamFree