jQuery Delay

I often get asked about a delay in jQuery. Unfortunately, at the time of this writing, jQuery doesn’t have a delay function. However, this is a simple little clever workaround you can use. It involves using the “animate” function. You should recognize this as the function that simple animates something via element styles.

For example, If you have a div colored black and run .animate({background-color:#ffffff}, 2000) on it, in 2 seconds it will have faded to white. If you use this function to modify something to the same over the period of time, you effectively get delay. For example, why not use opacity?

$(document).ready(function() {
  $(".message").show("slow").animate({opacity: 1.0}, 4000).hide("slow");
});

Doing this would show a previously hidden div classed “message” for 4 seconds, and then hide it again. Play around with it to get the effect you want. You don’t have to use opacity either, its just not a commonly used CSS element.

Developing A Wordpress Magazine Theme – Part One

This tutorial is going to teach you how to build some of the functionalities that are commonly found in magazine style themes. I am going to stick with pretty generic concepts as the pertain to Wordpress only. And mind you, I will not be teaching you how to build an entire theme from scratch, we’ll just focus on building the homepage with the classic magazine theme functionality.

Recent Posts Boxes Image Preview

A common feature in a Magazine theme is those 1/3 columns with thumbnails of an image in the post. The CSS is actually pretty easy, we’ll just divide the width of the total area into three sections. Let’s make it easy and say its 960px wide, so we have 3 boxes with a width of 320px each. Let’s also make them square, and they need to float to the left to stack horizontally. This is the ideal HTML and CSS:

This should pretty much prep us for what we want to do, let’s make the WP_Query to grab this data. There is obviously no use in repeating ourselves like we did with the HTML with PHP at hand, in fact, lets just use a standard loop, like this:

Well that’s close, but let’s get those standard Wordpress tags in there, otherwise they’ll be uselessly looping on a worthless box, with no appropriate content gracing our Wordpress magazine theme. Let’s try:

That’s much closer, however, we’re missing our thumbnail. Let’s make this simple, we can get fancier but this technique works well for new blogs. If you’re moving your blog, this type of Wordpress magazine theme might not be right. You’ll want to go into your Wordpress Settings->Media section and set the thumbnail dimensions to 128×128 (or whatever you set it to) and check the crop checkbox.

This code grabs the first image URL, adds the -128×128.jpg to the end of the file name, calling the file created by Wordpress when you upload the image originally.

You can explore some more options for the WP_Query by browsing the official Wordpress site. You can select only certain categories, and go off of other more choosy criteria. Whatever you do, tune in for the next edition.

Prepping Joomla! For Deployment

Joomla! is an extremely popular open source CMS, and one that is used in production environments the world over. We’ve set up quite a few Joomla sites in our day, so I thought I’d share our handy guide to prepping your development installation for a live launch. The topics will cover anything from basic server side security to specific plug-ins we find useful. In no particular order…

1: Choose a good password, for everything.

Your database password, your admin password, your FTP password, etc. should be solidly locked down with good passwords. I mean no dictionary words and simple acronyms. Use some symbols in there as well. Honestly, this can make all the difference and for goodness’ sake DO NOT use anything as simple as ‘123456′ or ‘password.’ If you neglect this, you deserve to be hacked. You should even change the admin user name to something else.

2. Use the most recent version of Joomla!.

Try very hard not to use an old version because you’ve use it before and are familiar with it, or because a plug-in you’d like won’t work in the new one (there is a Legacy mode for that, though you should try not to use it if you don’t absolutely need to). Also, update it often.

3. Optimize your URL structure.

The newest version of Joomla! has some nice SEO optimized URLs right out of the box, but you can improve this even further by simply renaming the htaccess.txt file in the installation’s root to .htaccess. Now hop in the Site’s configuration and enable ‘mod_rewrite’. If you’d like even more overriding control with your URL structure, try the plugin named ’sh404sef.’

4. Secure your folders with an index file.

This one is a general tip that most guys running a web server already know about. Make a blank html file named ‘index.html’ and upload it to each of the folders that you feel may be left open to prying eyes. A good example is the template folder and all subsequent folders.

5. Use SEO improving plug-ins.

My favorite SEO plug-in is JoomSEO. This plug-in allows for auto generated meta tags based on keyword density, titles, and categories for each article. This is a must have because otherwise the meta tags are for the most part site wide. (Please note that if you use sh404sef that you may have to disable its meta generating feature to make this work correctly.)

6. Perform a health and security audit on Joomla!.

Use Joomla! Tools Suite to do a quick audit of your site and try to plug all the holes that it finds. This tools suite is a great asset.

7. Prepare regular backups.

There are many ways to do back-ups, including off site backups using Amazon’s S3 service, but the fastest and simplest way to protect yourself should something go south is to install a plug-in like ‘JoomlaPack’ to do automated backups for your site. This plug-in packs your current site into a redistributable zip file ready to be installed just like a new Joomla! site. Great for cloning sites as well.

8. Set up your cache.

The cache is a standard feature for Joomla!, make sure its working by checking out the ‘cache’ folder in the root install directory. There should be a bunch of files in there, if not, make sure the folder is writable and that you’ve enabled the cache in the ‘Site Configuration’.

—

This should pretty much cover all the basics, you can always further optimize your server using compression, CSS sprites, image optimization and far-future headers, but those are all high effort/low return ideas that are best reserved for sites with extremely high traffic.

What else do you do to prep your site for production?

The Death of the Yellow Pages

It’s no secret, the yellow pages (and all other brands) are on their dieing breath when it comes to delivered, paper based telephone books. You may or may not know that they still charge for ad placements in a medium that is all but forgotten in the internet generation. Simply ask anyone under the age of 30 when the last time they used a phone book. You’ll either hear an “I have no idea” or a “probably 5 or 6 years ago”.

If they can’t Google you and find your website, you simply don’t exist to those prospective customers, to say the least.

The impact on local marketing:

This shift away from mediums like the telephone book and to online search has had significant impact on local marketing. Gone are the days when college students bust out their Yellow Book to find a pizza place or local hair salon. They simply Google it, the results with phone numbers and addresses are up top, and away they go.

In short, for the younger generation, Google is the new Yellow Book.

Don’t worry, this is good news.

This puts you, the reader, in a unique position to utilize this new found knowledge. Let’s list a couple reasons on why this is good news for you.

• You’re early to the party.

You get to hop on the bandwagon early and position yourself competitively in an emerging market. We both know how saturated the yellow pages are.

• Fast results, instantaneous adjustments.

Not only will Google pick up your site within a day or two, you can make adjustments that affect your site’s performance instantaneously and see their results in a day or two. No more waiting around on the next edition of the yellow pages.

• More affordable, more effective.

Again, it’s no secret that the yellow pages ads are extremely expensive and are becoming less and less effective as every day goes past. Online marketing is cheaper (by 2 fold, on average), more effective and infinitely expandable.

• Hey, its green!

Telephone books waste an outrageous amount of paper, a website wastes none. Why not save a tree while you’re saving and making a buck?

Don’t wait, act.

We can help you succeed online. Because we’re local, just like you, we equate our success with your success. Contact us today and let’s talk a little bit about it. The sooner you act, the sooner your business will flourish.

Sources: 1, 2, 3

Our Special Wordpress Theme

If you’d like some customization done on the theme, I highly recommend going to our sister site GazelleThemes.com for an awesome and affordable Pro Package for Clean Home. Right off the bat, this has blurb customizations, new color schemes and an improved design (not to mention full customization support)! Unfortunately, due to time constraints, we cannot help users with the free-use GPL theme you’ll find on Wordpress.org.

Today marks a big day for us, we’ve released the same custom theme that cloaks this very site! Well, it is a very heavily modified version of this theme, but it retains the style that we’ve got going on. I am rather partial to my minimalism themes (just check out my personal site) but this way it remains clean and sparkly.

Without further ado, I present Clean Home (v 1.2.1), our house theme. You can download it for free now right here. So what’s special about this theme? Let me list the ways:

• Lightweight - A grand total of two images, both 2×6. The rest is XHTML and CSS.
• Minimalistic - No more distracting of your users, with our theme, your content stays king.
• Attention Grabbing - With a semi-customizable (1.1.3) blurb, you can say something right away that people just have to read.
• Full Widget Support - I even took care of some all (1.1.3) of the standard widgets’ CSS for you.
• Valid XHTML and CSS - As long as you stay valid on your end…
• GPL License – New! – Do what you will with the theme!
• Multiple Widget – Now with three sidebars (1.1.4) for maximum customization: top navigation, blurb, and sidebar.
• (Pro) Fully customizable blurb - select between hidden, random phrase, image, and per-post assigned text.
• (Pro) Adsense - three separate locations for Adsense integration.
• (Pro) Color selection - Over 7 color schemes.
• (Pro) Style selection - 2 distinct styles, selectable from inside the options.
• (Pro) Feedburner integration - an email subscribe button plus automatic feed redirection.
• (Pro) Fully customizable Home Page - select different categories and how many articles to showcase!

If you’d like some common custom options, visit our sister site Gazelle Themes for cheap purchasing options for the Pro Package. Otherwise, this is just our way of giving back to the wonderful open source community that makes our business possible.

Go ahead and download it now! Feel free to let us know what you think in the comments! Enjoy!

Check out our home page for any Missouri Web Design help you may need!