Creating Using WordPress & the Thesis Theme

Scott Loftesness

Originally posted: February 14, 2009 – Happy Valentine’s Day!
Last updated: Sunda, September 13, 2009

This page was created by Scott Loftesness to describe the steps I used to create Be sure to read the current Payments Views About page as well!

Payments Views vs. Payments News

I registered the domain several years ago. At Glenbrook, we had put the domain “on the shelf” – hoping that at some point in the future we’d have the time and resources to develop it. The basic idea was to have a “views” site that complemented our PaymentsNews covers the news mostly without editorial commentary. PaymentsViews is intended to be the place for editorial expression – both by those of us at Glenbrook and by other payments professionals who’d like to share their views here.

TypePad vs. WordPress

Our other Glenbrook websites have been hosted for years on TypePad. We’ve been delighted with TypePad as a platform – even our “corporate” site runs on TypePad – but wanted to try something new with PaymentsViews. We’ve been following the work going on the WordPress community – and, in particular, some of the design work now available to make WordPress blogs and sites look very professional. So, we decided to use WordPress to build PaymentsViews. Our work to do so began in earnest on Wednesday, February 11, 2009.

Hosting Our Own WordPress Blog – to Support the Thesis Theme

Having made the platform decision, WordPress offers two options – a hosted service (with limited ability to customize things like themes) and where you can download the WordPress software and install it on a server. We chose to use the software – as we wanted to install the Thesis theme.

Choosing Media Temple for Hosting and Installing WordPress Using 1-Click

Since our other properties our fully hosted on TypePad, we didn’t have an existing server on which to install WordPress. So, we decided to use Media Temple as our hosting service – selecting their (gs) Grid-Service hosting option ($20/month). Activation was quick and easy – we used the 1-Click WordPress install and had the initial web site up in less than 30 minutes. Media Temple hosts some very big web sites and seems to have a good reputation.

Adding Users to WordPress

Once WordPress was up and running on our brand new Media Temple server, I used the Users panel on the WordPress dashboard to add our users to the system.

Using FTP to Install the Thesis Theme

Next, using FTP, I installed the Thesis theme. Doing so is very straightforward – copying a directory of Thesis-related files and content into the WordPress folder on the server. Once the files were there, I used the WordPress Plugin panel to activate Thesis – and we were up and running with the rotating pictures that are included in the default Thesis theme.

Replacing the Default Photos in Thesis

Thesis resides in the Appearance panel of the WordPress dashboard. We wanted to replace the default photos that Thesis provides in the “rotator” folder so I uploaded some recent pictures taken at one of our Glenbrook Payments Boot Camps – after resizing them to fit (used a 280 pixel width). Again, FTP is used to upload the photos into the Thesis rotator folder – and Thesis automatically begins using those photos in the rotation (the picture changes each time a page is refreshed). Thesis calls the area where the photos are displayed the “Multimedia Box”. On the Thesis Design panel, I added alt tags for each of the photos I had moved into the rotate folder.

Using the Thesis OpenHook Plug-In

You customize pages in Thesis using the Thesis Design Options page. If those options aren’t adequate, there’s another level of customization available using “theme hooks” – which involve customizing custom.css (for stylesheet changes) and custom.php (for adding new functions, etc.). After browsing around a bit I came agree the Thesis OpenHook plugin (by Rick Beckman) which adds a panel to the WordPress Appearance panel that allows you to implement hooks without modifying the custom.* files. It’s much simpler – avoiding the need to reupload changed versions, etc. So, using the Plugins panel, I searched for, found, installed and activated the Thesis OpenHook plugin.

Using Thesis OpenHook, I modified custom.css to set the background to light blue, provide subtle grey page borders, etc. I used the Header hook to add the Glenbrook logo icon to the header of each page. (Note: here’s a great tutorial on using Thesis hooks!)

Moving the DNS

At this point, the site was basically looking good – and it was time to swing the domain over to the new site. I updated the DNS Name Server settings to point to Media Temple’s DNS and within a few minutes all requests were going to the new site. WE WERE IN BUSINESS!

Adding the Statistics – Google Analytics, StatCounter

Subsequently, I added Google Analytics and StatCounter tracking code to PaymentsViews. With Thesis, it’s super easy to add them – there’s a Footer code form to fill-in on the Thesis Options panel – simply paste in the code, save the Options panel and the stats packages start receiving reporting data.

Optimizing the Permalinks for Best SEO

I also updated the WordPress permalink settings so that a more search engine friendly URL is generated for each post (the default WordPress permalink is just ugly!). To do so, I used the Settings/Permalinks panel in the WordPress dashboard – I selected the “Day and name” option.

Minimizing Spam from Trackbacks, etc.

To minimize spam from trackbacks and pingbacks that we’d have to moderate, I completely disabled them – on the Settings/Discussions panel by turning off the “Allow link notifications from other blogs (pingbacks and trackbacks.)” option.

Update: Sunday, February 15, 2009 – Adding Our Sitemap

To update the search engines every time we update Payments Views, I added the Google XML Sitemap Generator for WordPress 3.1.2 plug-in. This plug-in automatically generates a sitemap and pings the search engines upon each update.

Update: Sunday, February 15, 2009 – Adding Avatars/Gravatars

After getting very frustrated trying to figure out how to add user photo pictures to comments and posts, I finally figured out the integration that WordPress has with avatars – and how users first need to go register themselves with and upload a photo. Once that’s been done, their photo/avatar shows up automatically in the comments they post. See my photo on the comment to this post as an example. Grrr – this was way too frustrating!

Update: Saturday, February 21, 2009 – Adding Glenbrook Author Pictures to Posts

After my frustrating weekend (see above), I watched a video that showed how to include “post images” into our posts. I uploaded all of the Glenbrook team’s mug shots to the WordPress Media Library and and not grab the URL’s for each one from there (using the View option) and then paste it into the Post Image URL in the Edit Page panel. I add the person’s name as the Alt text, select “add a frame to this post image”, and select the horizontal and vertical positioning options I want.

Update: Saturday, February 21, 2009 – Adding the new Payments Views Logo to the Header Using OpenHook

Also, I’ve replaced the text version of the Payments Views header and tagline with an image version that’s complementary to our Payments News logo. To do so, I created a 468×60 jpeg file of the logo and uploaded it to the wp-content/themes/thesis/images directory. Then, using Rick Beckman’s Thesis OpenHook plug-in (see above), I edited custom.css to include the statements as described in Rick’s How to: Clickable Image Headers article. Here’s the code:

/* This line sets up PV"s clickable background image based on the site title's link */

.custom #header #logo a { display: block; height: 60px; width: 468px; background: url('') no-repeat; outline: none; margin:10px 0 10px 3px; }

/* This line gets rid of the site title & tagline by casting them out to far left field */
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }

/* This line collapses the vertical space of the tagline so that there isn't unnecessary white space after the header image */

/* This is a bit of a kludge, but it seems to work. */
.custom #header #tagline { height: 0; }

/* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
.custom #header { padding: 0; }

I tweaked the top, bottom and left side margins to make it look good – and similarly adjusted the Glenbrook icon that over on the right side of the header (specified in OpenHook’s Header field).

While it all works, this particular manual process of adding a header image to Thesis is certainly something that could use some streamlining in a future version of Thesis!

Update: Sunday, February 22, 2009 – Using OpenHook to Promote Our Payments Education Courses

Using the Thesis OpenHook plug-in, I added a text box below the Multimedia Box in the right sidebar to promote our Payments Education programs. The text was entered into the After Multimedia Box form in OpenHook. The text box is styled using the Alert style under the format_text class.

Update: Sunday, February 22, 2009 – Adding a Basic Archives Page

I added an Archives page (Dashboard -> Pages panel) by creating a new page and selecting the Archive template for it (in the right sidebar of the panel). I then went back to Thesis Options and added the Archives page to the Navigation menu – thereby creating a new tab labelled Archives in the navigation bar at the top of each page that links to the Archives page.

Update: Monday, February 23, 2009 – Upgrading Thesis OpenHook

Rick Beckman released Thesis OpenHook 2.0 earlier today. It showed up in the Plugins Dashboard panel as an update – I clicked upgrade and it completed automatically. Very nice!

Subsequently, he published OpenHook 2.01 – and I used the automatic upgrade to install. Sweet!

Update: Tuesday, February 24, 2009 – Category Pulldown

After Erin imported a bunch of her Forte Financial blog posts, the list of categories here on Payments Views grew significantly – and we thought they started taking up too much space in the right sidebar. Turns out that the Category widget has an option to be a pull-down list – and so we switched to that, saving a lot of “real estate” in the right sidebar! Superb!

Update: Wednesday, February 25, 2009 – Adding a Feedback/Contact Form

I added a Feedback page to Payments Views. Turns out we have been subscribing to Response-O-Matic for forms on our Glenbrook web site – so I simply used it to create a new form for use with Payments Views. I don’t have anything against Response-O-Matic, but I’d love to see a better contact form mechanism just built-in to Thesis! If anyone knows a better way to do this simply in Thesis/WordPress, please send me feedback!

Update: Thursday, March 5, 2009 – Adding Feedback Tabs

Our good friend Doug Kaye recently implemented a feedback service called Kampyle on his websites. We decided to give it a whirl here on Payments Views along with on our Payments News and Glenbrook web sites as well. After signing up with Kampyle and tailoring the feedback questions, the actual implementation involves adding code to the page header (done using the Header Code box on the Thesis Design panel) and below the body tag (done using the Template Editor to edit the Footer template). Implementation took less than 60 seconds!

Update: Saturday morning, March 7, 2009 – Adding Reading List to Right Sidebar

I added a Reading List widget to the right sidebar by installing and customizing the Amazon Showcase 1.3 widget by Aaron Forgue. I picked three of the best sellers in our Payments News Bookstore and listed them there – including our Amazon Associates id.

Update: Wednesday evening, March 11, 2009 – Adding Comments RSS Feed to Right Sidebar

I added a Comments RSS Feed to the right sidebar. At first, I had no clue where to find the URL for the comments feed that I thought WordPress was generating – then I came across this *VERY* helpful article! Turns out our feed is at I burned that using FeedBurner and our official Comments RSS feed is now: I then added a Text widget to the right sidebar and customized it with that URL.

Update: Wednesday evening, March 18, 2009 – Adding Favicon

I added our Glenbrook favicon by uploading the file favicon.ico to the directory and adding a link to it in the Header Options on the Thesis Options page. Now the little red Glenbrook “g” displays in the browser’s URL bar.

Update: Friday evening, March 20, 2009 – Adding More Multimedia Box Photos

I added some more photos to the Multimedia Box by uploading images (sized to 280px wide) to the rotator folder. Once uploaded, I used the Thesis Options panel to adjust the Multimedia Box settings to add alt text for the newly uploaded images.

Update: Saturday morning, March 21, 2009 – Added more Ping Services

I updated the WordPress Writing panel settings to add a more complete list of “ping services”. See this article for more helpful tips about initially setting up a new WordPress blog.

Update: Friday morning, May 1, 2009 – Upgraded to Thesis 1.5!

Last night, I upgraded Thesis from 1.4.2 to the new 1.5 release.  The upgrade went smoothly (once I followed ALL of the steps in the instructions! 😉 but the blog was messed up – specifically the post images weren’t displaying and an error message was.  I took a look through the support forums and found one suggestion to go in and reset the number of posts on the home page and save – did that and, voila, we were back in business all fresh and crisp.

Haven’t had time to really explore the new features in 1.5 – looking forward to doing that and sharing what I find over the weekend.  I continue to be blown away but what a great theme Thesis is – wonderful!

Update: Friday evening, June 19, 2009 – Upgraded to WordPress 2.8 and Thesis 1.5.1!

Tonight I upgraded to WordPress 2.8 and Thesis 1.5.1. Prior to doing so, I upgraded three plug-ins to their latest versions and took a backup of both the html directory as well as the MySQL database. The upgrade to WordPress 2.8 was seamless – it just worked. The upgrade to Thesis 1.5.1 was almost seamless – I forgot that I had put the header graphic for PV in the Images folder. After copying that over, everything clicked and we were fully upgraded. Very cool!

Update: Sunday, September 13, 2009 – Installed Yet Another Related Posts Plugin 3.0.13

Tonight I installed YARPP to add Related Articles to each of our posts.

Thesis Resources I’ve Found Helpful

WordPress Resources I’ve Found Helpful

11 Responses to “Creating Using WordPress & the Thesis Theme”

  1. JB says:

    Thanks for the summary. The theme caught my eye, but I didn’t see it in the footer. Nice work…

  2. Don Campbell says:

    Nice writeup Scott!
    I like your post – very easy to follow and understand.

    I use the Thesis theme for my blog too, and can appreciate some of the things you went through. Its an outstanding theme for many reasons. One of the great things about it is how you can isolate your changes to the theme in a “custom” folder so that when you want to upgrade the theme you don’t lose any of your modifications.

    For hosting, I’ve been using Bluehost for some of my sites, and am also experimenting with MediaTemple. Are you still happy with them?


  3. Don – re Media Temple – so far, so good – but we’ve only been at this for a couple of weeks. We had an account with them several years ago and I was impressed with them then.

    When I needed to find a place to host this new blog, Media Temple was the first place I turned. Their 1-Click WordPress install was quick and easy. Wish they had more 1-Click installs (PhpBB comes to mind!).

    Anyway, so far, so good.

  4. Kathy Purdy says:

    How did you come across the link to that video about post images? I can’t find a link to it on the DIY Themes site? Is there a Part 2 to it?

  5. Kathy, as I recall, Chris Pearson twittered about the post images video sometime over the weekend. His Twitter ID is pearsonified. I haven’t seen a part 2.

    Wonder if you have any comments on how we’ve setup Payments Views? We’d welcome any feedback on making it better!

  6. Kathy Purdy says:

    I am following him on Twitter but I guess I missed that. I am still absorbing everything you’ve discussed in this post. If I have any feeback I’ll be sure to share it.

  7. Kathy Purdy says:

    I do like how you took advantage of the image post to display the author’s image with the post. A good way to make it clear who is speaking.

  8. someone has to say it – too onerous a process for mere mortals, or solos. great job though. want to moonlight?

  9. Yes, I do need to moonlight – my personal blog – – is in dire need of a makeover using Thesis and WordPress!

  10. Sire says:

    Hey Scott, although I run one of my blogs on Thesis I must say that the fact that I had to know Hooks and have a knowledge of CSS to get the most out of the Theme was disappointing to say the least as I expected it to be more out of the box. Fortunately I only purchased the single license.

    I knew that something better existed and so the search was on and after a fair while I finally found a theme that was almost entirely configurable from the option page, no knowledge of Hooks or CSS necessary. Needless to say I purchased the multi version and converted all my blogs apart from the one running the Thesis theme.

  11. Paula says:

    Theme was disappointing to say the least as I expected it to be more out of the box. Fortunately I only purchased the single license.

Leave a Reply

Clicky Web Analytics