Here is a look at their old website design.

The design I did for Graphic Creations.

And the final design for their new website.

…

As you can see the final design has but one major change to it which is the background color is completely green with some shadow edges for the content of the site. I’m guessing that the client, like so many others that I have had experience with, wanted to have a rigid structure and definition for what is the actual website area and the free space that one sees with a larger monitor. Since most design now used a fixed width layout I seem to be getting this request more often. Although, in my opinion, flanking the content with super bright green tends to be very garish especially when viewing the page on a 27″ monitor.

To see larger images and some more detail about this website and a link to get there check it out in my work gallery here.

Thanks to Printing Storefront Solutions for making this design and development possible.

I wonder where Google will index that last statement..?

Anyway, If I was making a 6 million dollar man I would really make sure that I stitched the bionic parts on correctly to avoid any conflicts with current body structure. The same is true with Jquery and WordPress. You don’t want your awesome bionic enhancements to fail after uploading the latest super awesome plugin that uses MooTools or Prototype. The main reason why Jquery would conflict with other libraries like Prototype is the “$”, which is used to replace getElementById(), Prototype uses the same symbol but in different ways, Its as if Jquery and Prototype are fighting for control over that id. Or, comparatively its like the 6 Million Dollar Man battling it out with the 6 Million Dollar woman. The resulting barrage of bell-bottoms, hairspray and bionic sound effects may just rip your face off!

None of us want to see that happen so read on.

Jquery loaded correctly

After reading several posts on the subject, listed at end of post,  I came up with the ultimate way of calling Jquery into WordPress. Here is what the following code will do for you.

• Deregister the local copy of Jquery used by wordpress
• Call Jquery hosted from Google
• Register Jquery from Google and place it in the footer
• Register your other external js files and place them after Jquery

[php]
<?php
// Footer scripts
function jquery_init() {
if (!is_admin()) {//load scripts for non admin pages
wp_deregister_script(‘jquery’);//deregister current jquery
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’, false, ’1.3.2′, true);//load jquery from google api, and place in footer
wp_enqueue_script(‘jquery’);

// load a additional js files
wp_enqueue_script(‘my_script’, get_bloginfo(‘template_url’) . ‘/js/my-script.js’, array(‘jquery’), ’1.0′, true);
wp_enqueue_script(‘my_script2′, get_bloginfo(‘template_url’) . ‘/js/my-script2.js’, array(‘jquery’), ’1.0′, true);
}elseif (is_admin()){//load scripts for admin page
wp_enqueue_script(‘my_admin_script’, get_bloginfo(‘template_url’) . ‘/js/my-admin-script.js’, array(‘jquery’), ’1.0′, true);
wp_enqueue_script(‘my_admin_script2′, get_bloginfo(‘template_url’) . ‘/js/my-admin-script2.js’, array(‘jquery’), ’1.0′, true);
}
}
add_action(‘init’, ‘jquery_init’);
// END :Footer scripts
?>
[/php]

Ok, there area couple of things I want to go over here.

1. You should always always put all of your scripts in the footer. Why? Because, when a web page loads the markup it loads from top to bottom. So, if you have several scripts at the top of the page your users have to wait for all that stuff to load in the background before any of the lower content will load. That’s almost as unbearable as Steve Austin running in slow-mo. Also, most of your javascript is no good unless it has content to play with, so just put the scripts at the bottom of the page and it will load faster with every thing working correctly. If you don’t believe me just view the source on my website and see, all the scripts in the footer.
2. Let google host it, its faster. Google provides AJAX Libraries API hosting for most well known javascript libraries and we can definitely take advantage of this CDN.
3. Have WordPress place your external scripts according to their javascript library. The wp_engueue_ascript() function allows for an argument called $deps, which you can use to attach any other external scripts to its library and then WordPress will place it on the page accordingly.

Loading inline scripts

One of my scripts needs to be loaded from another external file and it needs to go below the previous scripts on the page. Here is how you can do that.

[php]
<?php // Banner Footer scripts
function alt_footer_files(){ ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
//my javascript here using $
});
</script>

<?php } }
add_action(‘wp_footer’, ‘alt_footer_files’, 10);
// END :Footer scripts
?>
[/php]

Here I use add_action() to load scripts into the wordpress footer at position 10, which will be below all of the previous script links. You should also notice that I am calling Jquery using “jQuery(document).ready(function($)”. This replaces the normal “$(document).ready(function()” and allows jquery to function in a no conflict mode but still being able to use the $ in your markup.

Awesome posts about the subject

• Eric Martin, most of the information comes from this great post.
• The WordPress Codex on this subject.
• Using Jquery with other libraries, from the jquery site.
• Including Jquery the right way from the diggwp site.
• Wow the original TV intro of 6 Million Dollar man brings back memories of my childhood

Annotate and image with ImageMagic and PHP

Original test image

Simple annotate

How its done

Here is the code used for the above image annotation.

[php]
<?php
header( ‘Content-Type: image/jpg’ );
system("convert saob.jpg -font AvantGarde-Book -fill black -pointsize 20 -gravity center -annotate +0+0 ‘Senseless Acts of Beauty’ jpg:-");
?>
[/php]

Code Breakdown

• saob.jpg (The location of the original test image)
• -font AvantGarde-Book (The font command sets the font family, I chose AvantGarde-Book which is already used by my server)
• -fill black (fill is the command that sets the fill for the font, I set the color to black)
• -pointsize 20 (set the size of the font to 20)
• -gravity center (tells the font to be placed in absolute center of the image, vertically and horizontally)
• -annotate +0+0 ‘Senseless Acts of Beauty’ (command to apply text to image, you can use the +0+0 as x and y coordinates)
• jpg:- (output a jpg file)

See reference and tons of example here.

Why can’t I get ImageMagick to work?

Either its not installed on your shared host, or its installed and crippled so you can’t use php functions like “exec(), or system()”. Its good to mention that if you are running into this problem you may want to check out some API’s that hook into ImageMagick like Imagick for PHP, or MagickWand.  Both are very good API’s but, you will find less examples working with them then the original ImageMagick documentation.

Now, before we get into an example, I would like to point out that most of the examples around the net are using personal installs of ImageMagick, or from a person that has root access to a dedicated server. This allows these code guru’s to edit the Apache server to accept functions that most shared hosting has turned off.

The first time I tried ImageMagick I installed a virtual machine on my computer running Linux(Umbuntu) and I used and SSH connection to run bash commands on the local server that had the perfect install of ImageMagick that let me do whatever I wanted. Here the bad thing about that, It took FOREVER! And not only was I unsure about the security of my server but I also didn’t know how it would effect and actual server CPU, of even if all my code would work on the server that I moved it to.

So, the perfect solution came to me the other day when I ran phpinfo() on my current host HostGator, and found that ImageMagick was installed. Within minutes I was running ImageMagick commands on my development domain, AWESOME!

So, Long story short, don’t try installing ImageMagick unless you have all the time in the world and your an Apache guru, just use HostGator!

Is ImageMagick installed on my current host?

The first thing you want to do before you begin working with ImageMagick is make sure that its installed on your host’s server, along with what font’s you can use and what convert commands are installed on the server.

note: The following code will assume that you have FTP access to your server and have basic knowledge of PHP.

Just create a page called magicktest.php and paste in the following code

[php]
<?php
header(‘Content-Type: text/plain’);
system("exec 2>&1; type convert");
system("exec 2>&1; locate */convert");
system("exec 2>&1; convert -version");
system("exec 2>&1; convert -list type"); // << before IM v6.3.5-7
system("exec 2>&1; convert -list font");
?>
[/php]

This will run a few of commands on your server to see what is present.

• header (tells the browser what type of content will be displayed, nothing before this or you will get a header error)
• type (Tells you if convert is available on the command PATH and where it is)
• locate (finds all convert commands that exist on the server, including ones that are NOT ImageMagick commands)
• convert -version (prints the version number of convert)
• convert -list type (lists fonts for an older version of ImageMagick)
• convert -list font (lists the fonts that ImageMagick has access to)

If all you see ar errors, then “convert” is not on the command line path, and your ISP provider did not initialize the web server PATH properly to include it. If this is the case you will need to find out exactly where it is located and use something like this for you PHP scripts, which makes your script less portable. For example suppose the “convert” command is in “/opt/php5extras/ImageMagick/bin“, then you can set that in a variable at the top (for quick changes for different ISP hosts), and directly specify its location. For more explanation on this see the master of all things ImageMagick Anthony Thyssen and this post.

Now once you have all that information save it somewhere, you will always need to reference the convert path or fonts installed.

Can I use exec() to run commands on my host?

An easy way to test and see if exec() is available and working on your server is to run the following code provided by php.net.

[php]
// outputs the username that owns the running php/httpd process
// (on a system with the "whoami" executable in the path)
echo exec("whoami");
?>
[/php]

If you see your user name then its all working fine. If not, you may want to try system(), and/or passthru(). Actually in most cases if your code doesn’t work try system() or passthru(), I will be using a combination of the three in my post examples.

Difference between ImageMagick images and normal image files

The basic idea of ImageMagick is that you want the server to adjust your images just like you could do in photoshop. But, you won’t be referencing your images the same as <img src="myimage.jpg" />. With photoshop you edit and image then save it as a file then reference the file, src=”myfile.jpg”.  With ImageMagick, you ask the server to do the image edits and then it returns code that builds the image in the browser, this is the main reason why we need header() at the top of your php file. If you didn’t specify headers before your code you would get a bunch of crazy characters all over the page.

Here is how its done. You create a file called rotateImage.php, then you reference it just like and image, <img src=”rotateImage.php” />. So you pull the php file in through the image tag and it displays your image as if the php file WAS an image file. Very cool right!!

Examples!! Rotate

Original test image

Rotate image 45 degrees

The magick! Rotate and image with just two lines of code!

[php]
<?php
header( ‘Content-Type: image/jpg’ );
system("convert saob.jpg -rotate 45 jpg:-");
?>
[/php]

Example:  Annotate, negate, resize…

Several commands in one!

The magick! Annotate, Negate, Resize, swap, composite

[php]
<?php
header( ‘Content-Type: image/jpg’ );
$color="white";
$image="saob.jpg";
$scale="200%";
$size="140×96";
$string="Senseless Acts of Beauty";
passthru("convert -background none -fill ‘$color’ -gravity center" .
" -font AvantGarde-Book -size ‘$size’ caption:’$string’" .
" \\( ‘$image’ -negate -resize ‘$scale’ \\) -swap -2,-1 -composite" .
" jpg:-" );
?>
[/php]

Its almost limitless of what you can do with ImageMagick so, that being said, I plan on making a bunch of short posts just showing examples of ImageMagick usage along with the code on how you can do the same. As always if you have any questions just post a comment. THANKS!!

Optimize: Contact Form 7

One of the top WordPress plug-ins to download is Contact Form 7 (best form plug-in in my opinion). One great thing about this plug-in is that it automatically moves its JavaScript to the footer of your site. But, the JavaScript is still used on every page as well as the style sheets. Now, if your like me you just need these styles and scripts to run on one page, not throughout the entire site. Here is how to fix this.

First things first, make sure you set up Contact Form 7 and its working 100% correctly out of the box before you begin editing its current functionality.

Step 1

Open the main PHP file for the plug-in, in this case its wp-contact-form-7.php located in the plug-in’s root folder. What I usually do is search for any reference to the scripts or styles that I want to move. If you do a search for .js you will come to several lines of code seen in the image below.

As you can see above wp_enqueue_script() is being used to queue the JavaScript into the WordPress loop. The most important part of this function is the name of the script that is being queued, “contact-form-7″. Make note of this.

Step 2

Now one of the most important parts of moving this code around, so we can speed up our page, is to do it without editing any of the original plug-in files. And you ask “WHY?”.

Well, lets say you do all kinds of edits to this plug-in’s php files and you get your page to humm like a top and your all super happy eating ice-cream and smiling. Then the next time you open up your WordPress dashboard you see a warning to update your plug-in because it has a security bug or something, put down the ice-cream, update your plug-in and watch all your awesome work go away…

Yeah sucks doesn’t it?

So, how can you edit what a plug-in does without touching it? MAGIC!! No, just kidding, all you need is your functions.php file in your child theme, or if you don’t have one just create it and add the code below.

[php]
<?php
function my_deregister_javascript() {
if (!is_page(‘contact’)){
wp_deregister_script( ‘contact-form-7′ );
}
}
add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
?>
[/php]

Step 3

Now you can paste that code in your functions.php file and wonder why its not working or you can continue reading. Here is what this function is doing.

function my_deregister_javascript() {

The above line begins your function and names it, you can make it say whatever you want, as long as it is unique, but I like my_deregister_javascript().

if (!is_page('contact')){

This is very important! The above line looks for the pages that ARE NOT! named “contact”. So, if you have Contact Form 7 on a page called “snuffalupagus” then this line should read,

if (!is_page( ‘snuffalupagus’ )){

If you have multiple forms on different pages then it would change to,

if(!is_page(array(‘page1′,’page2′,’page3′)){

wp_deregister_script( 'contact-form-7' );

The above line is the action line. It de-registers the script from the loop, kills it, stops it from running, EXTERMINATE! Sorry, was just watching some Doctor Who….

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

The above last line just ads our new function into the queue at position 100.

Step 4

Check to make sure that the scripts used for Contact Form 7 are no longer in the footer for every page except for the page/pages where your forms are being used, and pick up your ice-cream again.

Step 5

Paste the code below into your functions.php file. This will remove the Contact Form 7 style sheets from the head of all your pages except for the page named “contact”. Essentially, this is the same code as above, and you should adjust accordingly.

[php]
<?php
function remove_contact_style(){
if (!is_page(‘contact’)){
remove_action( ‘wp_head’, ‘wpcf7_wp_head’ );
}
}
add_action(‘wp_head’, ‘remove_contact_style’, 9);
?>
[/php]

Your Done!

Hopefully that wasn’t too hard .

Optimize: WP-Cufon

WP-Cufon is a great plug-in that i use on my site to turn all heading into a no web safe font. The JavaScript used for this plug-in is needed on every page but, using the code below you can remove the JavaScript from the head and put it in the footer where it belongs.

[php]
<?php
function remove_scripts() {
remove_action(‘wp_head’, ‘wpcufon_init’);
add_action(‘wp_footer’, ‘wpcufon_init’, 9);
}
add_action(‘init’, ‘remove_scripts’);
?>
[/php]

That’s all for now, more to come later…

Just add the script below to your functions.php file in your WordPress installation and the queries will appear in the bottom left or your browser as long as your logged in (and only if you logged in).

[php]
<?
php if (is_user_logged_in()) {
?>
<div id="speed-test" style="padding:10px;background:#F66;color:#fff;font-weight:bold; position:fixed;bottom:0;">
<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.
</div>
<?php } ?>
[/php]

If you like this script or need help installing it please leave a comment.

So after building my site locally and testing it on a development domain I consistently find that multiple plugins, tons of server queries, and large content size will slow my site to a crawl, and as we all know, load time is disastrous to traffic. Hell, I wouldn’t even visit my old site because it took way too long to load.

Now, there are a ton of tutorials online that talk about different ways to speed up your WordPress site but as I like to keep my posts short and sweet I will just focus on two. Using .htaccess to add expires headers to content, and using Wp Super Cache to cache up pages.

Just in case though here is a list of ways that you can speed up your site, you will have to search for tutorials on these, or maybe I will cover some info on them later.

Short list of WordPress speed tips

• Use Css sprites for images (cuts down on http requests)
• Use a CDN (content delivery network) like Amazon S3
• Add expires headers to page content
• Gzip components (Just found out that Host Gator only does Gzip on dedicated servers…crap!)
• Move all javascript to the footer (wow this helps out a ton, unfortunately most plugins don’t do it.)
• Minify Javascript and Css (if you want to reduce the size of your css i love this tool)
• Delete any Plugins your not using
• Replace the header.php file with static elements removing PHP functions (controversial see here )
• Optimize database with phpmyadmin (super easy to do)
• Keep your images small or optimize them
• Reference your script libraries, like Jquery, through google source (more info)

Super Tip

Here is a great tip. If you want to see how may queries your site is making to the server and how long it takes for you site to load just paste  my super awesome script into your functions.php file and when your logged in (and only when your logged in) you will see a count at the bottom left of your site.

[php]<br />
<?php<br />
if (is_user_logged_in()) {<br />
?><br />
<div id=&quot;speed-test&quot; style=&quot;padding:10px;background:#F66;color:#fff;font-weight:bold; position:fixed;bottom:0;&quot;><br />
<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.<br />
</div><br />
<?php } ?>[/php]

Now on to the .htaccess and Wp Super Cache

So i did a bunch of research on how to insert expires headers in side of you .htaccess file and the only thing that i found that would work with my host and on word press was the following.

[text]<br />
# Expire images header<br />
ExpiresActive On<br />
ExpiresDefault A0<br />
ExpiresByType image/gif A2592000<br />
ExpiresByType image/png A2592000<br />
ExpiresByType image/jpg A2592000<br />
ExpiresByType image/jpeg A2592000<br />
ExpiresByType image/ico A2592000<br />
ExpiresByType text/css A2592000<br />
ExpiresByType text/javascript A2592000[/text]

Just upload the .htaccess file to the website directory where WordPress is installed and you should see that items now have expires headers by using a firefox plugin called Yslow.

That was the hard part, the easy part is just installing Wp Super Cache and configuring some settings. Wp super cache will do the rest and you should see results on Yslow right away!

I am sure that there will be places on my site that will looked trashed while I write the backend code but I’m fine with that. I really feel like stripping off the exterior and showing everyone whats under the hood. Also, I’m going to use this as a repository/tracking for my code process. Hope you enjoy it, if you have any questions just use my contact form… er, when I build it that is, which should be soon.