Announcing Agency Theme

More than a month ago

I’m excited to announce the release of the Agency Theme for WordPress. This theme is designed from the ground up to serve the needs of non-profits and organizations of all sizes. I wanted to take the best elements of the World Theme–including the fully widgetized homepage and large header images and move it a giant leap forward. The result is a beautiful theme that is easy to use as it is functional.

The large header can be great for sites that want to use powerful imagery, but in this case, I didn’t want people to be stuck with only one image to use across the site. I added the ability to have a slideshow as well as use featured images in the header on pages or posts. That way you can easily make the pages on your site unique and further communicate your message.

I also created a donation bar which allows you to easily set a fund-raising goal, show your progress toward that goal and also take up donations via PayPal. It’s completely optional so you can use it all the time, some of the time or never. The choice is yours and all of the details are easily taken care of in the theme options page.

The homepage is fully widgetized allowing you to place any content you’d like to right on the front page. I’ve included several custom widgets for featured posts, video, newsletter sign up and twitter to help you make your site.

Agency is cross-browser tested, includes six built in styles, is designed for WordPress 3.0 and includes support straight from the theme author. It’s available now for only $30. Check out the demo and when you’re ready, you can buy it here.

Using PayPal For Event Registration Forms

More than a month ago

Sometimes churches and organizations need to use a sign up form for an upcoming event, but aren’t exactly sure how to integrate PayPal with their favorite WordPress form plugin so they can take payments along with registrations. I’m a huge fan of Gravity Forms, but there is no built in support for PayPal as of yet, so here’s how I use it along with PayPal for event registrations. If you have another favorite form plugin, please feel free use it instead. [Continue Reading]

Show Us Your Site And Win

More than a month ago

We’re preparing to kick of a gallery here at Organized Themes to show off some of the great sites that are using our themes. To help get things started, we’re giving away a Theme Package for you (or a friend if you already have one) to the site that wins best design! Plus you’ll get exposure for your site and your design skills.

All you have to do is submit your site here by July 30 to be considered for the Theme Package.

W3 Total Cache Settings That Worked For Me

More than a month ago

In my quest to speed up Organized Themes as much as possible, I’ve been experimenting with the settings of the excellent W3 Total Cache plugin and with my web host. Here’s what is working best for me according to Pingdom’s response times (see graph above).

1. For me, hosting on VPS.net (4 nodes), I get better performance using enhanced disk caching than APC. To be honest this surprised and somewhat disappointed me. But based on my load times, I do best sticking with enhanced disk caching.
2. Using database caching, either disk or APC, slowed the site down.
3. The biggest savings came from switching from basic Amazon S3 storage to using CloudFront. This dropped my average load time by about 50% and it was already quite low. I had to manually change some of my files to be viewable by the “world” when I switched, but other than that, it was easy to do. Plus, now all my files appear to be coming from Organized Themes which is a plus.
4. The css and js minify options are not compatible with my membership plugin. Every time I turn then on, the entire site would say you must be a member to view the page which is not good for sales.

Your settings for caching and minify may be different, but I would strongly encourage using CloudFront vs. the standard S3 environment. If you’re concerned with the speed of your site, I would strongly encourage you to use W3 Total Cache and CloudFront. If you’re using W3 Total Cache, let us know what settings are working best for you in the comments.

How To Troubleshoot WordPress Conflicts

More than a month ago

As part of providing support, I often get an inside look at WordPress conflicts. If you’re troubleshooting your own site a great step is to disable all of your plugins and see if that fixes your problem. If it does, then you just need to reactivate your plugins one at a time until you discover the conflict. That’s tried and true WordPress advice. But what do you do if you don’t have access to the WordPress control panel? Here is a quick method I use to solve conflicts on other people’s sites.

1. Go to the site in question and view it’s source code (in Firefox go to “View” and choose “Page Source”)
2. Copy the source code of the site
3. Create a new document in a plain text editor like Notepad or TextEdit
4. Paste the source code into this new document and save it as index.htm on your desktop

Thanks to WordPress using absolute links for everything, you now a local copy of the code that WordPress produces. If you open this index.html file in a web browser you will see a copy of your site (complete with the conflict). Now that you have a local copy you can begin to trouble shoot. Next you will need to look for tags where plugins and the theme load scripts. These generally will be at the top and bottom of the page. Many plugins place a note saying where their code starts and ends which is helpful in hunting out the conflict. Here’s how I treat these items that are loaded:

1. I start by deleting all the scripts that are loaded by plugins.
2. If that solves the problem, I paste them back in and then remove them one at a time until the conflict disappears.
3. Now I know not only which plugin caused the problem, but also which script or setting in that plugin is the culprit.
4. At this point I can either choose another plugin or try to edit the one I’m using.
5. If the plugins aren’t the problem, then I try scripts loaded by the theme by the same method.

That’s it. Now you know a way to help deduce conflicts in other people’s sites without needing to access their WordPress back end.

Memorial Day Sale – Two Themes For $20

More than a month ago

As a way to celebrate the start of summer, I’m offering any two of my themes for only $20. Just add any two themes to the shopping cart before checking out and the discount will be applied automatically. Be sure to act quickly as this sale will end on June 1st.

So what are you waiting for? Go pick out some themes and get started on your new site now!

7 More WordPress Plugins for Your Church

More than a month ago

Here are some useful plugins I’ve used to help out churches that I think you might find helpful.

Staff Directory

Many churches and organizations like to have an online directory of their staff. While you can create this with the visual editor in WordPress, it generally doesn’t turn out as well as you’d like. A great alternative is to use the Staff Directory plugin to create everything for you. You can add staff descriptions, pictures and contact information. Each member gets their own post as well as the listing in the directory. It’s an easy to use solution for this common need.

FV All in One SEO Pack

This plugin is molded after the All in One SEO Pack, but is much simpler for those of us who don’t need such extensive features. It allows you to easily add title and descriptions to your site as well as any page/post. Plus since it is so simple it doesn’t notify you of updates every other week like some other SEO plugins have a tendency to.

The Events Calendar

If there is one area that WordPress is deficient in it is event management. I’ve tried virtually every one I’ve come across in the last two and a half years, but none has worked like I hoped. That said, The Events Calendar is the plugin I’m using on my church’s site as well as a few client sites of late. One of the best features is an easy integration with Event Brite so you can have online registrations, even paid ones, with minimal work. It allows you to have recurring events, locations and so on. I also really appreciate that this plugin uses WordPress’ posts function for events as that makes them easier to incorporate into themes.

Automatic WordPress Backup

No one wants to have a server crash and take their data with them, but it does happen to virtually everyone at some point in time. My favorite way to combat this is with the Automatic WordPress Backup plugin. It makes scheduled backups of your database (content) theme (styles) as well as any uploads you’ve made. As a measure of added security it backs everything up to Amazon’s S3 service for just pennies a month. I use S3 to back-up and serve images from 3 sites all for around $1.50 to $2.00 a month. There are other backup plugins, but most of them only back up your database, but believe me, you need to back up everything.

WishList Member

Many churches have asked me about creating member only sections and while you can do that with WordPress, the best solution is to use WishList Member. This is a paid plugin and not a cheap one at $97 per site (it isn’t GPL licensed), but it is effective. I use it myself on Organized Themes. You can create an unlimited number of user roles and have each role access content exclusive to that role. Or you can create blogs just for certain groups at your church. That way people can share personal information in a secure environment. If you need a way to limit access to parts of your site, this is an easy way to go.

BuddyPress

Social networking in a box. Build a social network for your company, school, sports team or niche community all based on the power and flexibility of WordPress.

Does your church need an online community, but you find Facebook’s offerings too limited, or perhaps you were displaced by Ning downsizing. BuddyPress allows you to create your very own social network on your website. This places you in charge of your content–something that is often lacking on other networks. Plus BuddyPress now works on regular WordPress installations making it even easier to use.

Global Translator

Whether your church is multi-cultural, or you have a ministry across the globe, Global Translator can help your site communicate by automatically translating your content into 48 different languages. While anyone could use Google Translate to read your site in their language (that’s how I handle support requests in languages that I can’t speak), this makes it even easier by having the content ready in their language for them. To be fair, this is one plugin I haven’t tried, though I will be testing it for this site soon.

So that wraps up 7 More WordPress Plugins for Your Church. If you have a favorite WordPress plugin that your church uses, share it with us in the comments.

Other Ways To Speed Up Your Site

More than a month ago

We’ve already seen how I saved 37% of my page load time by editing and removing a few unnecessary plugins in this post. Now I’m going to share a few more methods I used to cut another 3 seconds off my page load time.

Load jQuery from Google

My site, like most WordPress sites uses the excellent jQuery javascript library to power many effects like my sign in box and the sliding features box on the theme detail pages. For several months I had been using the copy of jQuery that comes with WordPress, but I learned from digwp.com that a better method was to load jQuery directly from Google. Here’s how to do it. Open up your functions.php file and add this:

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2');
   wp_enqueue_script('jquery');
}

Now you will need to specify where you’d like jQuery to be called in your theme by adding this to your header.php file:

<?php wp_enqueue_script('jquery'); ?>

You will want to do this before any jQuery plugins you use and before your <?php wp_head(); ?> as well.

I was skeptical this change would speed up the loading of my site, but I am a believer now. According to Pingdom Tools, all 70kb of jQuery from Google consistently loads in .2 seconds. It sometimes takes my 11.7kb logo .9 seconds to load. That’s fast! Plus it uses Google’s bandwidth which saves me money.

Use Conditional Loading

Typically if a WordPress site requires a script on one page, it loads them on all pages. I realized if I wanted to optimize my site, then I would only want to load scripts on the pages that needed them. On my theme detail posts for example, I use the excellent Nivo Slider, but I don’t need it in my blog or home page. So I use this code to load it only when the current post is in the “themes” category:

<?php if(in_category( 'themes' )) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.pack.js">
<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider({
		effect:'fade',
		animSpeed:500,
		pauseTime:5000,
		directionNav:false
	});
});
</script>
<?php } else {
}
?>

The WordPress codex offers several conditional statements you can use in your site here. You can also use the Art Direction plugin to selectively load code on individual pages or posts.

Use a Faster Server

Like most of us, I started out with a shared server. As I took on more clients and especially as Organized Themes grew I quickly changed to a virtual server from one of the big box hosting companies. In looking at my site’s load breakdown, I noticed that quite a bit of time was spent on the latency of my server. I began looking at the various “cloud” hosting sites to see if one of these solutions could help me with a faster server. I ened up giving VPS.net a try and I’ve been thrilled with the results. They moved my sites for me (a big plus). They charge the same as my previous host (also important). And last of all, the latency of my site has dropped significantly. Plus I can now add server resources as I need them and even remove excess ones when I don’t. Their customer service has been top notch as well. I can’t recommend them enough.

W3 Total Cache

A good cache plugin can effectively cut your page load time, but which one should you choose? W3 Total Cache’s list of sites using it on WordPress.org convinced me to give it a try. Here’s the client list:

Trusted by many popular sites like: mashable.com, smashingmagazine.com, makeuseof.com, kiss925.com, lockergnome.com, tutsplus.com, johnchow.com, ilovetypography.com, webdesignerdepot.com, pearsonified.com, css-tricks.com, yoast.com and others

If a plugin is trusted by sites as high profile as these, then it’s a worth a look. W3 total cache provides several ways to speed up your site. First it offers database caching–it keeps a record of queries run by your database server and loads them instead of re-running the query again. This reduces load on your server and gives a speedier response. Secondly it can minify your site’s content. This involves removing line breaks, comments, while combining javascript and css files. By combining your files, load times are reduced. Removing line breaks from your html also makes it smaller and quicker loading (look at the source code of this site to see what I mean). The last addition is a Content Delivery Network (CDN) which is a way to serve static files from additional locations allowing browsers to load your pages more quickly. Lastly it offers page caching that can compress your pages as they are delivered making the amount of data transfered smaller and your site faster.

So here’s my experience with W3 Total Cache. I set up a CDN using Amazon’s S3 storage. I had wanted to set up a CDN for some time, but it seemed like a hassle before W3 Total Cache. This plugin handles the uploading of your files to S3 and changing your links to match. I used it to upload many of my theme files, the wp-includes folder as well as all my uploaded images. As I add new images, they are automatically added to S3 for me. Now when one of my pages is loaded, the images, stylesheet and much of the javascript comes from S3 instead of my server. This gives more servers for an individual browser to load from speeding up load time.

I did run into some problems with the minify settings and my membership plugin. Every time I enabled the javascript and css minify settings, my home page would say you had to be a member in order to view this site. Clearly that is not good for anyone. Some of the settings would not allow users to login, which was also not acceptable. The end result was I could use the HTML minify options, but not the ones for javascript and css. Your site may be different, so experiment and see what works for you.

Overal, using the CDN and various caches saved about a second on my page loading. What’s more remarkable is that when a visitor goes to a second page, the load time is even shorter. I’m gathering data now to see if quicker second pages will lead to more page views on average. Hopefully it will, but only time will tell.

The Drop in My Page Load So Far

So combining the techniques here with the plugin edits I detailed in this post, cut my page load time from around 8 seconds to just over 2 seconds. Now that Google is planning on using site load times in calculating their search rankings, we all have a larger responsibility to ensure our sites load faster than ever. I hope you found these techniques helpful and that your site will be faster as a result.

If you’re having success using certain techniques to speed up your site, share them with us in the comments.

WordPress Plugins and Site Speed

More than a month ago

No one likes a slow website. Have you ever wondered if the plugins you use in WordPress affect your site’s load time? Recently I began a quest to reduce my page load time significantly by making changes and checking the results with Google Webmaster Tools and Pingdom Tools. Here’s what I discovered about the plugins I used here at Organized Themes.

At first my page load time was way too long–averaging 8 seconds. According to Google, that put me in the bottom 20% of websites in terms of load time. Yikes! I didn’t realize that my site was loading that slowly, since my own visits were quick due to the browser’s cache of my site’s content. To get a better look at what was loading on my site, I used an online tool from Pingdom that measures how every element in your site loads. It’s similar to the developer’s tools in Chrome or Safari, but it doesn’t rely on your internet speed to determine the times (think improved consistency).

Pingdom Tools Chart

Pingdom Tools shows you a chart listing every element, its load time, plus its size. What I discovered shocked me. First of all, I use Download Monitor to keep track of the downloads of my themes and it works well for me. I noticed that it has a few graphics that are loaded via it’s css file–and they were taking around 2 seconds a piece to load! Also the javascript and images from Sexy Bookmarks social media links were also taking around 2 seconds to load. I removed the bookmarks plugin and edited out the graphics (that I wasn’t using anyway) from the Download Monitor and suddenly my site was loading in the 6 second range.

The next thing I noticed was the plugin that I use to properly display code snippets loaded a high number of javascript files to handle each possible type of code. While that added a lot of flexibility to the plugin, it slowed the loading of my site because a browser can only load two to four items from any one server at a time. Since I only needed to display XML, CSS and PHP, these other files were unnecessarily slowing me down. I edited the plugin and removed the extra code types and made my site faster again.

My advice for you:

Know what your plugins load. I’m not saying you should avoid plugins, but you should be aware of what they are doing to your site. You can compare the results from Pingdom Tools to your plugin list to determine which ones are slowing you down. You can then decide to either edit the plugin, find a faster alternate, deactivate it, or leave it alone.

Deactivate unused or unnecessary plugins. Many plugins load files even if they are not being used at that moment. Did you at one time use a slideshow that you’re not using anymore? Deactivate it. It will not only make your site potentially load faser, it will free up server resources for the plugins you do need.

Consider integrating some functions into your theme. If you know your way around WordPress, you can include your plugins directly into your theme. One advantage of doing it this way is you can combine your CSS and javascript which will result in fewer server requests. This is what I’m ultimately going to do to replace Sexy Bookmarks on this site.

These are simply options for you to consider. The plugin functionality is one of the best features of WordPress. Just be aware of what effect the plugins you use have on your site. In my next post I’ll explain how changes I made to my theme and using a plugin decreased my page load time to under 2 seconds. If you’ve found a speed secret share it in the comments below.

Using Sliding Doors With WordPress Navigation

More than a month ago

Here is a version of the sliding doors technique that doesn’t require php expressions. Just use this code in place of your theme’s current page menu.

<ul class="navigation">
    	<li class="">Home

	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&link_before=&link_after='); ?>
</ul>

All this does is give you the spans of “nav-left” and “nav-right” for you to use with your starting and ending images and code. The code above gives us the framework for the effect, but you’ll need to style it to fit your theme. Here is some CSS to get you started. This version of the technique uses a left, middle and right image with the middle image set to repeat.

#navigation a, #navigation a:visited {
    display:block;
}

.current_page_item {
	background-image: url(images/navigation-repeat.png);
	position: relative;
}

#navigation a:hover {
	background-image: url(images/navigation-repeat.png);
	position: relative;
}

.current_page_item .nav-right {
	position: absolute;
	display: block;
	right: 0;
	background: url(images/navigation-hover-right.png) right;
}

.current_page_item .nav-left {
	position: absolute;
	display: block;
	left: 0;
	background-image: url(images/navigation-hover-left.png);
}

#navigation a:hover .nav-right {
	position: absolute;
	display: block;
	right: 0;
	background: url(images/navigation-hover-right.png) right;
}

#navigation a:hover .nav-left {
	position: absolute;
	display: block;
	left: 0;
	background-image: url(images/navigation-hover-left.png);
}

That’s it. You’ll want to use your own images and tweak the css to fit your theme, but now you can have some great navigation effects that will work in all browsers. I recently used this technique on a redesign of a2 Church that we have been developing. I could have created individual buttons, but this is so much more flexible, plus if we ever want to make a change, it will be a piece of cake.