The site I was working on today had just such a case. Facebook and Twitter sharing buttons were causing the home page to take approximately 28 seconds to load until the sidebar could appear. It was agonizing!

With a little brainstorming, I came up with a solution by investigating the code for each button. In most cases the code was a pairing of visual text/CSS elements followed by a script. Here is an example using the “official” Twitter button:

<a href="http://twitter.com/jpetersen" data-button="blue" data-text-color="#222" data-link-color="#D27A26">Follow @jpetersen</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

The page doesn’t require that the script be buddies with the other part in order to render, so I posited that I could put the script at the end, just before the closing tag, which is ‘thesis_hook_after_html’ for those not familiar with Thesis’ hooks. I separated the scripts from the other code next, and discovered that, by doing so, I eliminated several requests to that script on the individual posts that requested the same scripts at the top and the bottom of the post as a nice side benefit.

add_action('thesis_hook_after_html' , 'add_scripts');

function add_scripts() {
	global $post; ?>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#appId=131237106886864&xfbml=1"></script>
<?php }

This made the content in the post more efficient, especially on the sites where the client wants to list all of their Twitter IDs in the sidebar: you need only paste the display portions in the sidebar and call out the scripts once at the end of the pageload. Here is what the code that gets paired with both the Twitter and Facebook display codes:

function add_tweet_top() {
	global $post; ?>
<div id="social-top"><div id="twitter-top"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>"data-count="horizontal" data-via="jpetersen">Tweet</a></div><div id="facebook-top"><div id="fb-root"></div><fb:like href="<?php the_permalink() ?>" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like></div></div>
<?php }

Note that I wrap my buttons in DIVs and the entire area in a div so I can move it around any way I want. This technique also works with the Twitter follow button because it uses the same .js file from Twitter. I was disappointed that this doesn’t work with StumbleUpon because that entire display is created with the script, however, that script loads so fast I don’t care. It’s instantaneously there while the Twitter and Facebook buttons take an order of magnitude or more longer to display.

I’m sure this isn’t the only way and I’ve got a feeling that it may not be the best way to speed up the display of these social share buttons, but it’s what I’ve come up with and it’s getting the job done very nicely. I hope you enjoy the process of implementing it into your next (or old) Thesis install.

1. Google Sitemap Generator – plugin link – Cost: FREE! – You want to be found, right? This plugin creates a list of all of your pages, posts, tags, and categories (based on your theme and the plugin’s settings) and notifies Google of your content and places that list on your site for the search engine bots to discover.
2. DB-Manager – plugin link – Cost: FREE! – WordPress content is stored in a database – the posts, pages, comments, and all of the settings in place to make it work with your plugins. If something happens to the database, you have nothing! It’s better to lose your files than your database, hands down. This plugin can automatically backup (and optimize) the database and both (or either) store it on the host or e-mail it to an address. This plugin is so vital, I think it should be a built-in feature. Note: this one can be hard to find when searching within the dashboard’s plugin search, so be sure to pick the one by GamerZ.
3. WordPress Backup – plugin link – Cost: FREE! – Why lose your files when you can prevent that, too? This baby backs up the three folders vital to the preservation of the look, the visual content, of your site. That includes your themes folder (or just the active one if you prefer), the uploads folder for images and music, and the plugins folder. Like DB-Manager, these can be stored on the host or e-mailed so long as the zipped files are smaller than your single message limit for e-mail. For Gmail, it’s 20MB per message with 7GB of storage… that’s a LOT of backups if you want to create a Gmail account just for backups.
4. Scribe SEO – plugin link – Cost: subscriptions starting at $17/mo. for 15 content evaluations per month – If you don’t have a lot of organic traffic (traffic coming in via the search engines), then you may be doing something wrong each and every time you publish a post or when you created your static pages. This plugin reads your content on the page or post you’re working on and ensures that it adheres to the best practices of SEO and even makes suggestions about how to fix the shortcomings. One thing that I noticed was that I became a better writer for traffic as a result of using it. I own the 300 evaluations/mo plan and it’s become a required expense for us because I’d cut several other things before I cut this tool out.
5. Gravity Forms – plugin link – Cost: $39 for one site, $99 for multiple sites – This is form management dream material. One of the most-requested features for sites is a contact form, but so many of them are clunky, don’t allow for decent customization, or they let spam through. With point and click form creation, easy entry notifications, and even the ability to have someone post guest content to your blog or guest page, this plugin can pretty much do it all. It’s an excellent way to gather a guestbook/fan list and export those people into a database or a mailing list, too.

My next article about plugins will strictly be about must-have premium/paid plugins. You won’t want to miss that one, either.

Step One: Domain Name

I only use GoDaddy for domain name registration. People say what they may about their TV ads, but they do one thing superbly: register domain names. Whatever you do, don’t sign up for any of their add-ons at first. 95% of what they offer is available elsewhere and executed far better. Let them stick to the domain name registration only. If your checkout page has anything other than the domain name for a specified number of years, remove those extras and save yourself financial face-palming later.

Step Two: Hosting

The biggest decision you’ll make in the entire process is who to choose to host your site. I’ll make that decision easy for you, since I’ve had several hosts and dealt with several dozen hosts over the last decade. Dollar for dollar, HostGator is the best deal going with superb performance and customer/technical support. I’ve been using them for over two years and host over a dozen sites on my account and have migrated several dozen people to their services from other hosts, each one responding with positive things to say about their site performance. Here are the steps to get started:

Select Web Hosting at the top. The plan to choose is “Baby Plan” with the second option on the next page: “I will use My Existing Domain and update My Nameservers only” and enter the domain you have registered with GoDaddy already without the www or http:// in the field (I’ve had clients try for hours to get hosting because they were putting the www in there).

If you go that route, that hosting will be able to handle your blog you have now, as well as an unlimited # of domains and blogs. It will be a Linux box running cPanel (for those of you who knows what that means) and can host unlimited domains, databases, and a ridiculous number of e-mail addresses that can be accessed via an e-mail client or forwarded to a web-based service like Gmail.

Please ensure you’re around the phone number you register with to verify the account or they will lock it down until it’s verified and I won’t be able to work on it while it’s locked.

That’s it! You now have hosting, so congratulations. After you receive a welcome e-mail from them, take note of the section called “Your Nameservers:” and head back to GoDaddy. There is a button/section under Domain Management for changing your nameservers (also referred to as DNS, depending on the view your GoDaddy account is using) where you enter those two nameserver numbers to tell GoDaddy where your site will be located.

Step Three: Fantastico

The only thing left to do to get off the ground with a WordPress-based online presence is to scroll all the way down in your cPanel area (see the “Your Control Panel:” item in the welcome e-mail or navigate to http://www.yourdomain.com/cpanel) to “Software/Services” and click the smiley-faced Fantasico De Luxe icon. This is your ticket home and takes what used to take a geek to get WordPress installed and put it in the hands of anyone.

Click “WordPress” in the sidebar to bring up the installer. I’ll take a moment to warn you now and forever to never, EVER upgrade any WordPress installation from this screen. You’ll be contacting me to try to get your site restored if it’s not damaged beyond repair. Click “New Installation” and be sure to enter an administrator username other than “admin” (unless getting hacked is your idea of a fun day) and a very secure password. Use an online password generator if you want to be safe. The rest is fine auto-filled as-is, but you may change any of it if you want. The next screen confirms the settings and you’ll see the site URL and the login URL on the screen after that, along with an option to have the login sent to an e-mail address of your liking.

All of this can be done for around $150 with roughly $100 in annual upkeep with the hosting and domain prices, however if you find yourself stuck or desiring some more “umph” to your design and presentation, please don’t hesitate to contact me for a quote for my services.

Congratulations! You’ve got a working WordPress site, now go and conquer your market.