‘Goshen’ WordPress Theme on Github

At the start of 2011, I simplified the first WordPress theme I’d built for this site and turned it into something far more minimalistic. I went from two sidebars to one, lost the bulky header and turned from color to black and white. Part of this was a desire for simplicity; part was my reaction to my lack of design sense. Color is not my strong suit, and I shouldn’t be caught trying to pretend.

Since then, I’ve made a few tweaks, but one thing I hadn’t done all year was post the theme — which I call Goshen — for anyone to use. Today I fixed that and pushed the files up to their own repository on Github. You can download the files and hack away. (In your WordPress install, under /wp-content/themes/, create a folder called Goshen and unzip the files there; then you can activate the theme via the dashboard.)

I’ll continue to tweak when I have time. I can’t say enough about how much WordPress theme hacking has taught me about HTML, CSS, templates and web design. If you want to start from scratch, I recommend this excellent tutorial. You’ll discover that WordPress themes have only a few moving parts. Mastering them will let you make your site exactly what you want it to be.

 

Some Favorite WordPress Plugins

With the 100-degree heat broiling the East Coast this weekend, I decided to stay inside and make some design and performance tweaks to my site. I added Google +1 buttons to posts and the index page, and I also tweaked some of the settings in my plugins.

Speaking of those, here’s what I’ve been using to make life easier:

Akismet: Gets rid of a ton of comment spam for various Russian “services” so I can spend my time doing other things. You’ll need to sign up for an API key, but otherwise it’s simple and effective.

Contact Form 7: After trying a few contact plugins, I settled on Contact Form 7 and have had great results. It powers my Contacts page, which I prefer to use instead of posting an email address. For spam filtering, I implemented the quiz feature, but the plugin also supports CAPTCHA. I rarely get spam.

Google XML Sitemaps: Generates a sitemap.xml file that Google and other search engines use to index the site. Lets me include or exclude content and control how often to update the file.
Continue…

Speed Up Your WordPress Site

WordPress is a great CMS, but if you’re hosting your own install you’ll want to pay attention to keeping its performance nimble. Here are a few tips I picked up this week after reading this post and thinking about how to apply those ideas to my own site:

1. Optimize the database.

WordPress handily saves every revision of every page and post you create. That’s great for retrieving a lost paragraph, but it can add hundreds of rows to the wp_posts table — especially if, like me, you save revisions often. Eventually, the database grows big enough to affect query performance, which can slow page loads.

There’s a remedy: Delete those unnecessary rows and optimize your tables.

The WordPress plugin directory lists several database optimizers, but they make me nervous. They all claim to optimize but don’t say exactly what changes they make. Instead, I dug straight into my site’s MySQL database using my web host’s phpMyAdmin interface.

Sanity check: Back up your database first.

Once that’s done, run this in the SQL pane:

DELETE FROM wp_posts WHERE post_type = "revision";

Next, use phpMyAdmin to optimize your tables (Structure Pane > Select All > choose Optimize Table from the drop down).

This trick shrank my database from 5.5MB to less than 1MB.

2. Install a caching plugin.

If something I write here goes viral, I’d like to avoid watching my server fry. One way to head this off is to set up caching so that every page load isn’t executing a query on your server.

Again, there is no shortage of caching plug-ins for WordPress. After checking comments on my web host’s user forums, I went with W3 Total Cache. Not only does it provide caching for pages, feeds and other content, it will minify CSS, HTML and JavaScript.

It loads like any WordPress plugin, but it has many options. This tutorial gives great step-by-step directions.

3. Remove unneeded PHP calls

Most WordPress themes, including the one I built for my site, include calls designed to fetch info from the MySQL database. The idea is to make the theme easily customizable via the admin and make the theme portable to millions of users.

But unless you plan to change your site’s name, tagline or url often, there’s no reason to have your theme fetch those every time it loads your header.

For example, in my header.php file, I changed this:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

To this:

<h1><a href="http://www.anthonydebarros.com">Anthony DeBarros</a></h1>

That’s two fewer calls each time that page loads. Depending on your theme, you might be able to find many more calls to eliminate.

More reading:

There’s a lot more you can tweak under the hood, and that means plenty of chances to learn more goodness about server configurations. Here are some of the places where I picked up these tricks and where you can find a lot more detail. Happy optimizing!

http://yoast.com/speed-up-wordpress/
http://www.ardamis.com/2010/08/03/how-to-speed-up-wordpress/
http://wpgarage.com/tips/38-ways-to-optimize-and-speed-up-your-wordpress-blog/
http://www.gadgetcage.com/5-best-wordpress-plugins-to-improve-the-loading-speed-of-a-blog/8038/
http://mashable.com/2010/07/19/speed-up-wordpress/

WordPress: Separate Comments, Trackbacks

I’ve been tinkering again with my site’s WordPress theme and wanted to address one of its weaknesses — the formatting of comments. In addition to adding Gravatars, I wanted to separate reader comments from automatically generated pingback/trackback posts.

A quick Google search turned up just the tutorial I needed from the design blog Hongkiat.com:

How to Separate Comments and Trackbacks [Wordpress Tips].

Download My WordPress Theme

Update Jan. 1, 2011:

Starting today, I’m using a new theme I’ve crafted, which I am calling Goshen. It’s designed to be minimal but readable. The theme I was using previously, Porfolio_AD, is going to rest comfortably on a beach somewhere and probably won’t be coming out of retirement any time soon. You can still download it — I know of one person who actually did implement it on a site, much to my shock — and play to your heart’s content.

Original post:

I make no claim to having any design sense, but if you like the WordPress theme I made for my site, you’re welcome to it. Grab it right here.

Portfolio AD is a one-column theme with a two-column sidebar. Both columns in the sidebar can display widgets. The header is a modification of the well-worn Hemingway theme, and the rest is my take-off of a site built via this tutorial from WPDesigner.com. It works fine with WordPress 3.0.

What you see here is the result of constant tinkering. I coded up a theme of my own to learn more about what WordPress can do, and in the process I have learned tons about CSS, HTML, web hosting and content management systems in general. If you have the time, it’s well worth the investment.

Use the theme as a starting point for your own tinkering and have fun!


Take my WordPress theme, please

Building a WordPress theme from scratch has been a blast. Not only did I pick up new skills in CSS and PHP, I developed a deeper appreciation for the open source community. Without dozens of people who liberally share their code, I wouldn’t have gotten as far as fast.

So, I’d like to return the favor. Anyone who’d like my WordPress theme can have it. I have no illusions about being a designer, but if you’re looking to craft your own theme it’s a good start.

Download Portfolio_AD here.

Variations on a WordPress theme

After working throughtutorial on building WordPress themes by wpdesigner.com, I had a basic, functional — and clunky looking — theme for my site. It had all the elements that I now understand to be the WordPress basics — a header, a content well for posts, a sidebar for links, pages and archives, plus a footer.

Everything worked, but it had no style.

Of course, the reason I set out to build a theme from scratch was to make something unique. I’ve been impressed, for example, at what the author of FlowingData has achieved using WordPress. And I like a good challenge.

So, I’ve spent the last few days digging into my CSS. I’ve used style sheets at work for internal projects I code in Visual Studio, so I have a head start. A reference CSS tutorial is handy for defining various elements, but I probably am learning the most by studying (and borrowing from) a couple of themes I’ve admired: Hemingway and Monochrome Lite.

If you know the Hemingway theme well, you’ll recognize shades of it in my  current header, which closely resembles the Hemingway header. I added a horizontal navigation bar that separates the top from the content to come. I’ve yet to style the content well, but I did decide to create left, middle and right divs for blocks of content. More to come — and I definitely will have to ask for help with colors. It’s what I know the least about.

WordPress from the inside out

After searching the Web for the right WordPress theme for my site, I realized that none fit what I wanted. Hemingway, which I discovered through Derek Willis’ site Fumblerooski, has the right vibe, but the layout is all wrong. So, I decided to learn how to build one from scratch.

What you see now (or, what you would have seen if you were here now), is the result of studiously following this detailed tutorial. I’m glad I slogged through it, because it largely demystified WordPress. The process gave me the same feeling I had when, as a geeky 12-year-old, I took apart my family’s lawnmower engine. Seeing the parts moving on the inside really helps.