WordPress has become a standard content management system for many corporate websites, and for good reason – it’s powerful, easy to use and it’s free! However, since it was built to be a blogging system, rather than a “real” CMS, WordPress lacks some features that many organizations require to be able to manage their content properly.

Specifically, WordPress out-of-the-box lacks:
• A revision system – Functionality that allows editors to view previous versions of pages, and roll back to one of them instantly.
• Preview/draft features for “pages” – Most people use the “pages” functionality in WP-ADMIN to create the content pages that establish the main site structure (About Us, Products, Services, etc.). Unfortunately, you can’t make a change to a page that’s already live without publishing this change, or making the page “dead” when you have it in preview mode (ugh!).

We’re sure we’re not alone in tackling these issues, but we thought our readers would like to see our solution.

Revisions & Version Control

Here’s a screenshot of the version control section of the page editor UI:

So, this system allows editors to do the following things:
• Store all previous versions of page/record.
• Compare any 2 versions, which is facilitated by color-coding the differences.
• Restore any version.

Preview Feature

For the pages preview feature, here’s our solution architecture:
• In wp-config.php disable the autosave (set autosave time to 10,000 seconds) and WordPress’ versioning default
  define(’WP_POST_REVISIONS’, 0);
  define( ‘AUTOSAVE_INTERVAL’, 10000 );
• Replace the standard WP block that contains the save/publish buttons with our own block.
• Create a table where we will store versions of pages. Only title and content fields are versioned.
• At the bottom of the page users will see a large form & table supporting roll-backs, version comparison, etc. (see screenshot above).
• When users hit the Save Draft button, the page does not get updated. Instead this new revision gets stored in our table with a special flag. The next time a user goes to edit the page, the system checks if this page has a draft. If it does, the system serves the draft and allows the user to edit/preview/publish it.
• With our solution, when you hit Preview, the record does not get saved into the database (as was the case with Wordpress’ default implementation). Instead the title and content gets submitted into a form, and passed to a new window (with the address of the page on the frontend). A special function then replaces the actual values of title and content with the values from the form (i.e. the draft values).

We hope you find this useful! Also, we would love to get any feedback or other ideas you may have for this particular WordPress content management issue.

Yours, Gleb Aksyutchenko

The trouble with tracking PDF downloads (or any other file, such as PPT, MP3, ZIP, etc) with Google Analytics is not necessarily getting Google Analytics to track them. Google tells you exactly how to do it. The problem is automating the tracking so you have the flexibility to upload any type of file through your CMS (like WordPress) or via FTP without requiring website admins to do anything special or using a dedicated upload field within your CMS interface.

Here’s what Google says to do:

1. Set up Event Tracking in your Analytics Tracking code (very easy –just add a line of code).
2. Add a JavaScript method in the head of your document to delay the outbound click by a fraction of a second.
3. Update your outbound links to call the new function without first following the link.

This seems simple, but #3 means that you have to modify each link to each document on your website to make sure they are tracked. This is where developers usually turn to a specific upload field in the CMS interface, but that doesn’t address FTP uploads or text area uploads. And, since some solutions cover all outbound links (like to other websites, for example), you might end up tracking links to other websites in addition to the files you are hosting, which may not be your goal. So, here is Workbox’s solution for WordPress:

Rather than editing the links themselves, we use jQuery to intercept every click on every link. Then our code checks to see whether the link is outbound or points to a document (like a PDF, MP3 or any type you specify). If it is the type of document specified, the Google tracker is launched, so this info is sent to Google Analytics before the browser redirects to the link. Here’s the code we are using for your reference:

Red – inclusion of the tracker script;
Blue – launching the tracker;
Black – detecting the links we need;

We think this is a fast and efficient way of handling this because:

1) It allows you to use an existing and trustworthy statistics service (Google Analytics).
2) You don’t have to add code to every link.
3) It is highly customizable since you can easily change what kind of links you want to track.
4) Installation is easy and the code is free!

We implemented the solution in the form of a WordPress Plugin so we can configure the settings such as the domain name, the file extensions, etc. in the admin panel.

Have thoughts or other ways of tackling this issue? Let us know!

Thanks, Eric Weidner & Gleb Aksyutchenko

Your website design may include images with rounded corners – products, product thumbnails, team photos, customer logos … well, you get the idea. Because the corners are rounded, you had to crop, scale and round the corners using Photoshop, then upload them into your website. Now, with Jcrop, you can not only crop and scale inside your CMS (like WordPress, for example), but apply templated rounded corners so you don’t have to even think about it anymore – the corners are rounded automatically – it’s super easy and your images are all consistent.

See the quick demo here:

See the full demo here:

From a technical standpoint, the solution is really simple and is integrated with the Jcrop plugin that we discussed previously. The good thing about our solution is that you can see the resulting image with rounded edges before you publish it.

So, here’s the technical solution and some script to play with:

We pass the rounded corners parameters to the script: the radius and the background color of the corners.

The script works as follows:

1. Creates a transparent image 3 times larger than the cropped image (which is ready by this time).
2. Draws 4 90°arches in each of the 4 corners of the image. Those arches serve to produce rounded corners.
3. Fills the rounded corners with the background color passed to the script as a parameter.
4. Reduces the image size 3 times – this helps achieve the anti-aliasing effect.
5. Places the cropped image onto the image the script created.

Another important aspect of the feature is the preview of the image with rounded corners which is available before the page is saved. Here’s how it was done:

1. On the admin panel page where you upload and crop the image we add a div. As the background for this div we use the dynamically generated image with rounded corners and transparent center (we use the image that we receive as a result of points 1-3 – see above).

2. Over this div we place the resulting cropped image. So, in reality we see 2 images at the same time: the cropped image with right angles and the transparent image with rounded corners over it. In other words, we save resources and time by using the mask. Here’s how the mask is created:

$im_temp = imagecreatetruecolor($thumb_width*3,$thumb_height*3);

$black = imagecolorallocate($im_temp, 0, 0, 0);

imagecolortransparent($im_temp, $black);

$bg = imagecolorallocate($im_temp, hexdec(substr($backcolor,0,2)),
hexdec(substr($backcolor,2,2)),hexdec(substr($backcolor,4,2)));

$arcsize = $corner_radius*6;

imagearc($im_temp, $corner_radius*3,
 $corner_radius*3, $arcsize, $arcsize, 180,270,$bg);

imagefilltoborder($im_temp,0,0,$bg,$bg);

imagearc($im_temp, ($thumb_width-$corner_radius)*3,
 $corner_radius*3, $arcsize, $arcsize, 270,360,$bg);

imagefilltoborder($im_temp,$thumb_width*3,0,$bg,$bg);

imagearc($im_temp, ($thumb_width-$corner_radius)*3,
 ($thumb_height-$corner_radius)*3, $arcsize, $arcsize, 0,90,$bg);

imagefilltoborder($im_temp,$thumb_width*3,$thumb_height*3,$bg,$bg);

imagearc($im_temp, $corner_radius*3, ($thumb_height-$corner_radius)*3,
 $arcsize, $arcsize, 90,180,$bg);

imagefilltoborder($im_temp,0,$thumb_height*3,$bg,$bg);

$im_temp1 = imagecreatetruecolor($thumb_width,$thumb_height);

$black1 = imagecolorallocate($im_temp1, 0, 0, 0);

imagecolortransparent($im_temp1, $black1);

imagecopyresampled($im_temp1, $im_temp, 0, 0, 0, 0,
 $thumb_width,$thumb_height,$thumb_width*3, $thumb_height*3);

header("Content-type: image/png");

imagepng($im_temp1);

imagedestroy($im_temp1);

imagedestroy($im_temp);

This is just one way of handling this particular issue (rounded images), and there are lots of other ways of formatting and templating how images appear by using Jcrop.

Do you have a clever script for handling images inside your CMS? We’d love to know about it!

Workbox is extremely pleased to announce the relaunch of Ampio Pharmaceutical’s corporate website – http://www.ampiopharma.com. This website replaces the temporary site we launched a few months ago – that website acted as a placeholder while branding, design and content was being refined.

We think online marketing professionals will be interested our choice of content management systems: WordPress.

Check out the design:

You really can’t tell whether this site’s content is managed with WordPress or any other CMS. That’s because we can create amazing designs and customize the administrative interface, while keeping all of WordPress’s built-in features and maintaining access to the amazing abundance of plugins.

This isn’t WordPress out-of-the box, but it isn’t on steroids, either. It’s just efficiently customized to meet Ampio’s online marketing needs – and it will keep costs in check as the site evolves to keep up with Ampio’s rapid growth.

Of course, we think the product pipeline and the stock ticker is pretty nifty, too.

Please let us know if we can help in any way with your online projects.

Cheers,

Eric Weidner

Our previous post, #1 – Tell Your Story Quickly, showed how to present what your company does as rapidly and effectively as possible. Now, we describe the kind of content you need to keep your site up-to-date – a process that simultaneously makes your company look dynamic, tells your story and makes search engines happy.

#2 UPDATE REGULARLY

Regularly update your website and you will convey two things to viewers: First, they will feel that your company is dynamic; if your site is dynamic it means your company is, too. Conversely, if nothing is happening on your site, maybe nothing is happening in your company.

Second, the most effective way of telling your company’s story is to post “news” items or stories about your company’s successes.

It turns out that Google also rewards websites that have fresh and keyword-rich content. This is particularly important for newer or smaller websites. Adding content on a regular basis gets you noticed by Google, and as you build up a catalog of content in your website, you are naturally adding depth.

Here’s a tip: Don’t get discouraged if something profound doesn’t happen every day at your company. The content that appears on your homepage doesn’t need to be earth-shattering. The point is to keep the homepage fresh, so try to add something at least once a month. And, at the end of this article, we show an alternative to “news.”

Technique A – Brag About Yourself  - Media Venture Partners

The web is no place to be bashful. Use your website to show how effective your company, products or services really are. This kind of content is the typical company news or “What’s New” stuff.

An example is San Francisco private equity firm Media Venture Partners (http://www.mediaventurepartners.com). In the left column (1.), they feature a little block titled “Our Successes”. The content links to a gigantic list of deals the company has completed – and very often the value of the deals. Talk about “walking the walk!”

Technique B – Brag About Your Customers or Clients – Cardinal Venture Capital

Silicon Valley’s Cardinal Venture Capital (http://www.cardinalvc.com) keeps its homepage and news section fresh with news about its portfolio companies (1.). Once again, this not only shows what they do and the type of investment they make, it shows that their investments are successful.

Keeping a “news” or “what’s new” section up-to-date is the most effective way to tell your company’s story because it gives real-world, solid examples of your successes. However, since you can’t always generate “news,” there is an alternative.

Technique C – Look Like A Genius – Garcia Interactive

If things are a little quiet around the office and nothing “newsworthy” is happening, another way to add content to your site is to write blog post, article, white paper or “thought-piece” about a topic that is of interest to your market.

Many companies utilize this technique because it accomplishes some things a news item can’t. First, an article can be used to position your company or an individual in your company as an expert in your industry. Timely or in-depth analysis shows that your team is on top of the issues and is confident enough to share their thoughts with the world.

Also, an article can be used as a way of promoting a particular area of expertise that may be extremely popular or in great demand. For example, at the beginning of April every year, you will see a plethora of tax-related articles written by accountants.

Mario Garcia, the world-class designer and chief of Garcia Interactive (http://www.garciainteractive.com), uses blog posts (1.) to keep his site alive and show that he has deep understanding of his industry. This type of blog post accomplishes many things:

- Positions Mario as a thought leader in his industry.

- Gives him a reason to email and post a link to his Twitter and Facebook accounts.

- Adds SEO juice to his site by keeping the site fresh and adding indexable content with important keywords.

Conclusion

Regularly updating your website accomplishes three goals. First, it keeps your site looking dynamic, which implies that your company is also dynamic.

Second, the content that gets added to your site shows people exactly what your company does and why they should work with you rather than your competition.

Finally, for smaller and younger websites, Google rewards fresh and deep content.

All the posts in this series:

4 Things Your New Marketing Site Must Do: #1 – Tell Your Story Quickly (http://blog.workbox.com/4-things-1-tell-story-quickly/)

4 Things Your New Marketing Site Must Do: #2 – Update Regularly (http://blog.workbox.com/4-things-your-new-marketing-site-must-do-2-update-regularly/)

4 Things Your New Marketing Site Must Do: #3 – Collect Contact Information (http://blog.workbox.com/4-things-3-collect-contacts/)

4 Things Your New Marketing Site Must Do: #4 – Measure Results (http://blog.workbox.com/4-things-4-marketing-measure-results/)

We at Workbox know how difficult it is for content people to get a video player to work properly and look nice on a site page. So we have come up with a simple and powerful solution that works with our CUT content management system.

Created with the help of MooTools and VideoBox javascript, the new video player plugin makes it easier for content managers to add nice-looking video popups to their site on their own! VideoBox is a script that plays videos on the page with an overlay, MooTools javascript makes the video popup look nice and user-friendly, while videos are being played from your server or, say, YouTube.

Highlights:

• can play Flash videos stored on the client server or from a video sharing system like YouTube
• has its own CSS file and works independently from the rest of the site
• easy to control width and height of the player
• takes almost no time and almost no HTML skills to add a player to a page
• video can open by clicking on a textual link or image placeholder
• the software is very easy to install on your server, you just need to download the assets from here, put them somewhere on your server, then include them in your page/template header
• all these assets/scripts are free!

The video can live in a public or password-protected site page. With the new plugin you don’t have to store the movie in many different places - YouTube, or another video sharing service is enough. YouTube will also track video hits from the site for you!

>> See a sample video popup that was created in less than 30 seconds.

By: Gleb Aksyutchenko