Over the past year, I’ve had some great experiences working with friends who were messing around with WordPress, but just needed me to help them get everything configured and customized. These weren’t folks who needed a highly customized website solution, but folks who needed their sites to fool people into thinking that they cost a fortune to build.

The How

Since these were people who were open to getting their hands dirty with a little simple technology, we had a great time working together either via Skype or in person updating the site together, changing a color here, adding an image there, adding a page here, changing the text there, etc. Since WordPress makes it so easy to get a website live, we could just play around and have fun with it until we ended up with what my friends wanted to see, all the while cracking silly jokes about all sorts of sundry (but family-friendly, of course) topics.

The End

At the end of our little WordPress jam session, my friends ended up with a website that would have cost potentially thousands of dollars if they had paid for a custom design built from the ground-up. Of course, sometimes fully-custom is absolutely the way to go. But many other times, it’s just a waste of money, since you can always expand onto your website as your business/hobby grows.

Since these types of collaborations are such a blast and have such awesome results, I figured that I’d build into my business as a service for those looking for a website along with the ability to update and customize it without having to hire an expensive designer every time they need to change a phone number or modify the sidebar.

I’ve added on to the package access to a library of WordPress how-to videos so you don’t have to remember everything we’ve gone over, and slapped on a price tag of $325.

Anyhow, this is probably one of my favorite things that I do in my business, so if what I’m describing sounds good to you, you can learn more at the official page for this package known as “Launch and Learn.”

Until next time…

Create a Home for your Plugin

1. Go to your wp-content/plugins folder, and create a new directory with the name of your plugin. For our purposes, let’s call the plugin as well as the directory it lives in “Hello Hello.”
2. Inside this new directory, create a single PHP file which will contain the code for your plugin. For our purposes, we’ll call it “Hello-Hello.php.”

Set Up your Plugin’s Basic Information

Here’s a broken-down version of the PHP code that goes at the top of your new file, Hello-Hello.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*
// obviously, the name of your plugin
Plugin Name: Hello Hello
// a link to the specific page where your plugin is located
Plugin URI: http://magneticwebworks.com/hello-hello-plugin
// obvious...
Description: Hello Hello plugin, created for tutorial purposes
// obvious...
Author: Doron Orenstein
// Update this with each version of your plugin.
Version: 1.0
// the link to your website
Author URI: http://magneticwebworks.com
*/

See your Plugin in the Plugins Screen

“Look Ma, I’m a pro now!” The code at the top of your plugin file is now showing up on the plugins screen.

Create the Function that Calls your Plugin’s Functionality

Here we’re setting up the code to display the words “Hello Hello.”

1
2

function hellohello_display_text() {
	$output .= "Hello Hello";

Create the Short Code to Make Your Plugin Easy to Implement

This makes it easy for any non-technical person to call up the words “Hello Hello” by simply adding [hellohello] into any page or blog post. Otherwise we’d have to put a PHP function in the page or post template file, which is not very user-friendly or useful for the average user.

1
2

// Add shortcode
add_shortcode('hellohello', 'hellohello_display_text');

The Complete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
/*
Plugin Name: Hello Hello
Plugin URI: http://wordpress.org
Description: Hello Hello created for tutorial purposes.
Author: Doron Orenstein
Version: 1.0
Author URI: http://magneticwebworks.com
*/
 
function hellohello_display_text() {
	$output .= "Hello Hello";
	}
 
// Add shortcode	
add_shortcode('hellohello', 'hellohello_display_text'); 
 
 
?>

Implementing the Plugin on your Web Site

As mentioned above, thanks to the shortcode we created, this is exceedingly simple. To do this, all we need to do is add [hellohello] in your blog posts and pages as shown below.

The Spectacular Final Result

Obviously, this is merely scratching the surface of what’s possible with WordPress plugins, but the point here is to provide an launching point that’s not too overwhelming while also encouraging any WordPress development newbie to take their own plugin development skills to the next level.

Kudos go out to Benjamin Robert Mueller and Brandon Dove, my WordPress compadres who I got to geek out with at the WordCamp LA Developer’s Day a couple of weeks ago. Thanks to these two fellows, I learned a great deal more about plugin development than I knew coming in, so big ups to those two fellas.

Happy plugin-ing…. (?)

To quote from the WordCamp LA web site:

WordCamp is a conference type of event that focuses squarely on everything WordPress. Everyone from casual end users all the way up to core developers show up to these events. These events are usually highlighted by speeches or keynotes by various people.

For those of you in the WordPress community who’ve never been, I highly recommend you check one of these out, as they are jam-packed with great people and super-informative presentations.

And a super-special kudos to Austin Passy and all of the amazing volunteers who made sure that the event ran as awesomely as it did.

Although there was a ton of actionable information given, here are just a few great tidbits from the event that I think would be worth sharing.

Practical exploits of jQuery with WordPress

Presenter: Bill Heaton

• Displaying photos, videos, static HTML content, “forward to a friend” boxes, and really anything else inside of an overlay window, the jQuery plugin called Pretty Photo is a rock solid option. For those less comfortable with JavaScript code, there’s a WordPress plugin you can use to get those overlay windows going.
  • jQuery plugin (JavaScript files and code that you implement yourself): http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone
  • WordPress plugin (for easier implementation): http://wordpress.org/extend/plugins/wp-prettyphoto
• Use the jQuery.noConflict() function to avoid conflicts with other libraries.

Optimizing the performance WordPress

Presenter: Josh Highland

• Only load server modules that you need.
• Things to cache include:
  • database queries
  • PHP code
  • page requests
  • assets (images, javascript, css)
• W3 Total Cache is becoming known as the best WordPress performance optimization plugin.
• Not all WordPress themes are created equal when it comes to site performance. Things to be aware of when choosing a theme:
  • Number of CSS/JS/Images being loaded
  • Is the CSS/JS minified out of the box?
  • Are the images optimized?
  • Is the code optimized (too many database calls)?

• Images:
  • How many are you loading?
  • look into LazyLoad juery plugin
  • Use CSS sprites (create theme automatically at http://spriteme.org)
  • Are the images optimized?
  • Dont resize the image in using the image size percentage in WordPress’ image upload/gallery tool
• Watch out for the “Yet Another Related Posts Plugin.” It queries every single blog post every time the user lands on any blog post.

Advanced Use of Custom Fields

Presenter: Thom Meredith

• Magic Fields is a much more user/client friendly alternative to Custom Post types. It allows you to set up post types that are not necessarily standard WordPress pages or posts, but special entries made specifically for your site. For example, if you have a site that lists movies, you don’t necessary want to create a blog post or a static page for each movie. Perhaps all you need for each movie listing is the name of the movie and the URL. Magic Fields allows you to create the equivalent of a custom post type that adds a simple form to the bottom of the post or page edit screen with text fields where a non-technical client can easily enter the name and the URL for the movie.
• The Pods CMS plugin does the same thing as Magic Fields, but is a bit more flexible, but also a bit more complex to set up.

Introduction to posting on the go

Presenter: Austin Passy

• The Postie plugin is a great option for those who want to update their blog via email. It allows simple uploading of photos and blog content, and is also great for clients who don’t want to mess with the WordPress admin.

Photographic Highlight

Now THAT'S dedication! Notice the killer WordPress tattoo on John Hawkins of 9seeds and vegasgeek.com!

While working on a client site which used both the W3 Total Cache plugin as well as the Facebook Share plugin, I came across a bug where the Facebook Share icon that was to be placed at the top and bottom of each blog post was disappearing, only to be replaced by a “Share” link that linked to nowhere.

After playing around with the Facebook Share settings for quite some time, I started deactivating plugins one by one to see if there was a conflict causing this. I noticed that the culprit was the W3 Total Cache plugin, which was crucial to the stability of this highly trafficked web site and could not be deactivated nor replaced, as it really is the best plugin for WordPress caching.

Solution #1:

I was able to fix the issue by changing a single W3 Total Cache setting. By going in my admin to Performance > Minify, I scrolled down to the JavaScript settings, unchecked the “Enable” checkbox and clicked “Save changes.” I was also able to leave the global Minify setting for the plugin (found by navigation to Performance > General Settings) enabled for CSS minification.

Voila! My Facebook Share icon was now appearing on the site again and functioning properly.

It is my feeling that the Facebook Share plugin is not the only plugin out there being impacted by W3 Total Cache’s minify settings. I would venture to guess that there a good number of other JavaScript-based plugins that could be broken by JS  magnification, so keep this in mind for future plugin bugs and conflicts.

Solution #2:

On my own site, I am running W3 Total Cache with Minify enabled globally (to reduce the memory imprint of both CSS and JS code) while also running a Facebook Like button plugin with no problems.

The W3 Total Cache-compatible Facebook plugin that I’m running is simply titled “Like” and can be found at http://wordpress.org/extend/plugins/like.

By default, the WordPress sidebar remains identical on every single page of your web site. However, sometimes we need to be able to have a specific sidebars for different pages. For example, maybe you have a “Products” page that needs testimonials along the sidebar while your “About Us” page sidebar needs to display a listing of awards.

Solutions:

The Advanced Way:
Create a separate page template with it’s own sidebar widget function. Alternately, you could include a conditional statement in your sidebar.php to display different sidebars depending on the page that’s being displayed.

If none of what I’m saying makes any sense to you, then you’ll probably want…

The “Regular Folks” Way:
Simply download the Per Page Sidebars plugin at
http://wordpress.org/extend/plugins/per-page-sidebars.

Once it’s installed, you’ll notice that at the bottom of each of your pages is a box titled “Custom Sidebar” (see image below). To set up a unique custom sidebar for the page that you’re creating, simply check the “Activate Custom Sidebar” box, and select which of the sidebar widget areas you’d like to replace. In the screenshot below, we’re replacing the “Primary Widget Area” – which is the sidebar that goes at the upper right-hand side of every page.

Now go into the “Widgets” page of your admin, and you’ll see a new widget area labled “PPS-” followed by the name of the page with the page-specific sidebar.

A couple of things to consider:

• At this time the plugin only allows you to set up custom sidebars for pages, and not for posts or custom post types.
• Removing a custom sidebar widget was a little bit unintuitive. To do so, simply go to the page with the custom sidebar, and uncheck not only the “Activate Custom Sidebar?” checkbox, but also the radio button next to the name of the sidebar that your custom sidebar was replacing.

In experimenting with Wazala in conjunction with a WordPress website, sadly, at the time of this blog posting, the WordPress plugin simply did not work for me, and I had to refer to the inaccurate instructions on Wazala’s web site to get the thing working (long story short, you need to paste a bit of code directly before the </head> tage of your site.)

However, once you get the code into your header, then it’s smooth sailing without another lick of code necessary to get your store up and running.

How it Works

To quote from Wazala’s web site:
Add a “store” button to your blog or website, and your store will simply pop-up over your content — no more sending your customers elsewhere to make a purchase. Wazala functions as a part of your existing site.

Wazala Store Button on the upper-right hand side. Upon mouseover, it slides down just a little bit to display checkout information.

Once you click on the store button, you get a clean and attractive overlay window with containing your entire store. By default, the window is styled in a neutral manner so that out of the box it integrates pretty seamlessly into the look and feel of your site.

Here's what the store overlay looks like.

The store in the screencap above allows for multiple categories, which is not possible with the free plan, but comes with the least expensive of the paid plans. The free plan restricts you to 5 products and limited functionality, while the paid plans run anywhere from $9.95 to $29.95 per month, with significant discounts if you pay for the entire year up front. Click here to see full pricing details.

Adding Products

Adding products is done on Wazala’s web site using a set of super-easy and intuitive forms that allow for a good amount of flexibility in terms of product, payment, and shipping options. I actually found this much easier than that the ubiquitous E-junkie shopping cart where the interface for adding products is much more cluttered and involves jumping through some relatively unintuitive hoops for adding product variations.

(Click to enlarge image) This is where add, edit, and delete individual store products

(Click to enlarge image) This is where you control store-wide options.

Other Integration Options

Some other cool things that you can do to make your store integrate more seamlessly and effectively with the rest of your site:

• Replace the default “Store” button on the top of your screen with your own button or text link to be placed anywhere you want on your web site
• Link directly to individual products
• Add an “Add to cart” button or link anywhere on your site
• Add an “Add to Favorites” or “Wish List” button or link anywhere on your site
• Add a “View Shopping Cart” button or link anywhere on your site
• Replace the black semi-transparent overlay which surrounds the store window with a custom background image
• Add a custom page to your store which is accessed by clicking on a link at the bottom of the store overlay

Compatible Payment Processing Options

• Paypal Premier
• Paypal Business
• Google Checkout
• Paypal Website Payments Pro
• Authorize.net

SEO Considerations

While the overlay makes for very easy integration, keep in mind that your products will not be indexed by the search engines, so if SEO of your individual products is a deal-breaker, then this is may not be the solution for you.

One possible workaround would be to create individual product pages within your web site. On each product page you could include a button that spawns the store’s overlay opening to that exact product’s page.

Conclusion

After playing around with the store quite a bit, I found it to be rock-solid and super-easy to use. Unless your intention is to build a site that is completely centered around e-commerce (a la Walmart.com or BestBuy.com), then I highly recommend Wazala.

For more details, see Wazala’s web site.

Here’s a special quick post this week to solve a problem I’ve been seeing around the web, but with no solution.

I was recently working on a high-traffic site that that uses using the W3 Total Cache plugin in conjunction with an Akamai CDN. This is a great way to optimize site performance and stability, but I did run into the unfortunate side effect of the NextGen Gallery plugin’s slideshow ceasing to work as soon as the CDN was integrated.

Thanks to my favorite WordPress hosting guru Willie Jackson, there is now a solution.

Following Willie’s lead, and as seen in the screencap above, here’s how you fix this issue:

1. In the settings box for the W3 Total Cache plugin, labeled ’Performance,’  go into the CDN screen.
2. At the bottom of the page, there is a box for rejected files.
3. In that box, add the path to the image rotator .swf file (will be “wp-content/uploads/imagerotator.swf” in most cases)

And voila, your slideshow and CDN live together happily ever after!

Inspired by the supa-talented Portland-based designer Deb Pang Davis‘s recent blog post What I Learned this Week #19 2010, I’ve decided to follow suit with my own list of things I learned, last week, but just about WordPress (otherwise we’d be here all month, as I obviously know very little and each week is a completely new adventure in all areas of my life).

1) The Easiest Way to Add a Thumbnail Photo Gallery to your Posts and Pages

While I’ve always been a big fan of the unbelievable WordPress image gallery plugin NextGen, if I want a simpler (but more limited) solution, the Shadowbox JS plugin is an awesome alternative.

For those of you who don’t know, WordPress gives you the option of creating a thumbnail gallery of images right on your blog post or page. However, the default behavior of this gallery is that upon clicking on each thumbnail, a full-size version of the image appears in your browser’s main window, taking the user away from your post or page. Pretty lame in my opinion.

Shadowbox JS makes it so that upon clicking a thumbnail, a dark but transparent overlay with the full-size version of your image appears. Inside this overlay area are navigation buttons so you can flip through your full-size images very easily. This way users quickly see the full-size version of your image without being taken off of the current page.

Get the plugin here: http://wordpress.org/extend/plugins/shadowbox-js/

2) WordPress 3.0′s Custom Post Types Rule.

I’m going to keep this as un-technical as possible, but make a long story short, Custom Post Types allow you to have content on your site that’s not just limited to standard WordPress pages or blog posts. Basically, this makes WordPress a much more powerful and flexible content management system that will also be ultimately much easier for non-technical folks to update.

For example, you could have special movie review pages, photo feature pages, podcast episode pages, etc. Each of these special content types can be on specially-formatted pages separate from your blog posts or pages. And that’s just scraping the tip of the iceberg…

However, setting up custom post types on your WordPress site is likely to take some mucking around with PHP code, so definitely be aware of that.

Here’s the best article on the topic that I’ve seen yet: http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress

3) The Magic Fields Plugin also Rules.

For a long time, this plugin has basically done what the newly-introduced Custom Post Types functionality is doing but using a different technological approach. However what this plugin brings to the table is setting up a much nicer user interface for a non-technical user to update their custom pages and posts.

For example, I am currently working on a project where the client needs to create highly-configurable mini-sites which are not blog posts or pages. In fact, each and every mini-site needs to have its own unique header graphics, page backgrounds, and sidebar content.

Magic Fields allows me to set their site up in a way that the admin section for each mini-site comes complete with an additional form at the bottom of the page that’s super-easy to use, thereby allowing my client to establish a totally custom look and feel for each individual mini-site.

At this time, the developers of Magic Fields are updating the plugin to integrate with WordPress 3.0′s Custom Post Types.

Check out the plugin for yourself here: http://wordpress.org/extend/plugins/magic-fields/

4) I’m Learning Way More Than I Thought

As I write this post, I’m having a difficult time keeping it brief, and also having to leave out a good amount of information. Working full-time as a self-employed WordPress and UI developer forces me to squeeze an insane amount of new information into my brain on a daily basis…and for that I’m very grateful.

The WordPress community is notorious for being totally cool and supportive of any and all who use WordPress and are looking to improve their skills as well as the reach of the online efforts. This past weekend’s WordCamp in Orange County (California, not New Jersey with all due respect…) most certainly embodied that spirit with 145 friendly and impassioned fellow WordPressers participating in the event.

In addition to the great instruction, included in the dirt-cheap price of $40 was a t-shirt and an awesome Hawaiian BBQ catered lunch.

The event consisted of seminars broken into 2 tracks taking place simultaneously in 2 separate classrooms. One track of seminars was geared towards the more entry-level WordPress users while the other more advanced set of seminars was geared more towards the developers.

I personally split my time between the 2 different tracks, since some of the entry level sessions seemed too interesting to pass up, such as “WordPress for Marketing” and “WordPress as a CMS.”

Some of the really cool things I learned:

(CAUTION: Geek-speak ahead):

Online marketing guru Lucy Beer presenting the group with her own brand of web wisdom.

• Upgrading WordPress MU 2.9.2 to WordPress 3.0 (which makes WordPress MU obsolete as it natively contains all of MU’s multi-site functionality) is not a super-easy process unless you’re a developer
• WordPress is no longer referring to WordPress sites as “blogs” but rather as “sites.” This makes sense as WordPress is truly coming into its own as a full-fledged CMS and not just a blogging tool.
• For integrating a forum into a WordPress site, vBulletin seems like the most hassle-free way to go.
• vBulletin can allow your WordPress site to function as a paid membership site
• If you edit a pre-made plugin and want to make sure that your changes are never overwritten by a plugin update, you can find out how to do that here: http://markjaquith.wordpress.com/2009/12/14/excluding-your-plugin-or-theme-from-update-checks/
• Theme frameworks such as Hybrid and Thesis save you time by offering TONS of different page templates that you would otherwise have to integrate yourself as well as adding individual classes to just about everything in the DOM, but the fact that there’s a good amount of PHP involved in making even simple tweaks can slow you down if you’re new to PHP. So those are the factors to weigh when considering going the framework route. (Always been on the fence whether frameworks save or add extra time)
• I was reminded how cool the PageMash plugin is (I got away from it for a while)
• Google Analytics provides a “heat map” showing what portion of your site visitors are clicking where on your homepage
• MailChimp can automatically create a newsletter for you based on your blog’s RSS feed (good if you’re feeling to lazy to create an original newsletter)

I also wanted to give big thanks to the organizers of the event Brandon Dove & Jeffrey Zinn of Orange County-based hosting and web services company, Pixel Jar. They, along with a small army of volunteers really put a lot of work into making this event as successful as it was.

For WordPress users and developer of all levels of experience, these events a certainly not-to-be-missed.

Website for the event: http://www.ocwordcamp.com

Website for upcoming the Los Angeles WordCamp: http://la.wordcamp.org

To find out when WordCamp comes to your neck of the woods: http://central.wordcamp.org

Chillin' at lunch with my friends (L-R) Zeke Franco, Lucy Beer, and Melanie Orndorff

• Non-Designers and WordPress Newbies – Because you, or the designer you’ve hired have gotta put something in your sidebar, this guide will remove all of the guesswork from the process and give you a visual image of what each widget will actually contain and how it will add to your site’s functionality.
• Web Designers Working with a Client – You may have already accounted for the sidebar content in your design mockup, but in case you’d like to give your client the opportunity to decide which widgets they’d like to use based on their particular goals for the site, a guide like this can save you hours of email and telephone back-and-forth explaining and finally finalizing this absolutely crucial part of the design and development process.

Of course, this list represents just a teeny-tiny micro-fraction of the possibilities for WordPress sidebar widgets, as the total number of available WordPress plugins goes well into the thousands. This is simply meant to be a basic starting point.

For the newbies out there:

• Keep in mind that the images of the widgets below are taken from one particular website, and these widgets will not look exactly like this on your site. Instead, they will be styled to fit your particular site’s design.
• You can make the title of your widgets whatever you’d like. If you’re working with a designer, make sure to let them know what you’d like each widget to be titled.

ID #	Name	Notes	Image
PA01	Pages	Displays a list of the pages on your website. Usually unnecessary if you have a navigation bar at the top of your site with all of the pages already listed. Built into WordPress
LI01	Links	Displays a list of links to other websites that you’d like to promote or share on your site. If you’re working with a web designer and you’d like to use this sidebar, make sure you include the links you’d like to use when you request this widget. Built into WordPress
TE01	Text	This is a just simple text widget that allows you to display any text you’d like to include. Built into WordPress
TE02	Text (with image)	This is the exact same widget as TE01, but I’m simply showing you another way to use it. In this case, we can place an advertising banner in the widget. You could even have BOTH an ad AND text in this widget. Built into WordPress
SE01	Search	This widget allows users to search your website. Built into WordPress
NL01	Newsletter Signup	This widget only comes into play if you are sending out an email newsletter Usually this is done using an outside email marketing service such as Constant Contact, MailChimp, or iContact to name just a few of the myriad of companies offering this service. This signup form is created using code provided by your email marketing service which is simply pasted into a standard WordPress text widget (TE01) Built into WordPress
FP01	Featured Page	This widget allows you to take an excerpt from an existing page on your website and feature it in the sidebar. Since you’re only displaying an excerpt of the page’s content here, the widget will provide a link for your website visitors to go to the page that’s being featured. You can also specify a small thumbnail image to go inside the widget, but this is optional. Web-designers and do-it-yourselfers: Download plugin here.
SM01	Find Me On	This widget allows you to display your various social media profiles on your WordPress site to offer visitors to your site another way to connect with you online. You can use this to link to every major social network, and then some (Facebook, Twitter, LinkedIn, etc etc etc) You can also use this as an RSS link to allow people to subscribe to you blog. Web-designers and do-it-yourselfers: Download plugin here.
SM02	Social Media Page	This widget is very similar to “Find Me On” (SM01), but also give you the option of including the name of each social network. Doesn’t allow you to change the order of your social media profile listings, and also does not allow you to include an RSS link. Web-designers and do-it-yourselfers: Download plugin here.
TW01	Twitter for WordPress	If you’re a Twitter users, this widgets automatically displays your most recent WordPress tweets You can specify how many of your most recent tweets you’d like to display. Web-designers and do-it-yourselfers: Download plugin here.
PH01	FlickrRSS	If you have an account with the photo sharing site, Flickr, this widget allows you to display your most recently added images. You can decide how many images you’d like to display here Web-designers and do-it-yourselfers: Download plugin here.
RP01	Recent Posts	This widget only comes into play if your website is going to be including a blog. This simply lists the most recent blog posts You can select how many of your recent posts you’d like to display here Built into WordPress
RC01	Recent Comments	This widget only comes into play if your website is going to be including a blog. This lists names of your most recent commenters and the name of the blog post that they commented on You can select how many of recent comments you’d like to display here Built into WordPress
RC02	Get Recent Comments	This widget only comes into play if your website is going to be including a blog. This lists names of your most recent commenters and an excerpt of the comment that they left You can select how many of recent comments you’d like to display here Web-designers and do-it-yourselfers: Download plugin here.
BC01	Categories	This widget only comes into play if your website is going to be including a blog. This lists names of all of the categories for your blog posts Built into WordPress
SU01	Subscribe Here	This widget only comes into play if your website is going to be including a blog. This widget allows your website visitors to subscribe to your blog via RSS This also allows website visitors to enter their email address and have blog posts automatically emailed to them as soon as their published. Web-designers and do-it-yourselfers: Download plugin here.

If you feel that I’ve left out any basic widgets that a high percentage of WordPress users would need on their site, please leave a comment and if I happen to agree with ya, I’ll add it to the chart!