Web Design

Use WordPress Themes and Functions on Other PHP Pages

WordPress is a great content management system but there are still times when you either just want to add a page to your website that is not a part of WordPress or when perhaps you just want to give make sure all the pages on your website whether they are in WordPress or not all have the same look and feel. Thankfully WordPress has made it easy to make WordPress functions available on other PHP pages.

I recently wanted to redo Free Favicon and make sure the blog and the website all had a new fresh look. I had a theme in mind for the blog and want to make sure the rest of the pages had the same theme and look.

The first step is to include the WordPress wp-load.php file. This is the key to using WordPress functions, like loading theme files, outside of WordPress. For Free Favicon I simply added the code to load the wp-load.php file in the header template that the site was already using by adding a line similar to the following:

include($_SERVER['DOCUMENT_ROOT'].'/path to your wordpress install/wp-load.php');

Once wp-load.php was included you can access all of the WordPress functions so I could call the header and footer functions from the theme and have the site themed using the same WordPress theme the blog was using.

//call the theme header
get_header();

//call the theme footer
get_footer();

The only problem I ran into after getting the pages themed with the WordPress theme was how to change the title of the PHP pages with the new header. The original PHP pages had a section at the top of each of them that defined the title for the page. I just ran the WordPress filter wp_title and assigned the defined page titles from the PHP pages to be displayed using the WordPress theme.

function assignpagetitle() {
  global $documenttitle;
  return $documenttitle;
}
add_filter('wp_title', 'assignpagetitle');

Overall it was a pretty painless upgrade to Free Favicon, and a very easy way to make sure the whole site had a consistent look and feel. There are still some pages I left without the new theme and eventually I will probably getting around to fixing them as well.

Unsplash WP Plugin

Photo by: Ryan Mcguire

I am always on the lookout for new and interesting photos for use in websites, blog posts and to pass on to clients. There are several places you can get free photos to use, in fact here is a list of 30 of them, but finding the perfect photo, downloading and uploading it again in your WordPress website gets tiring. This is where the Unspash WP plugin comes in.

Installing the Unsplash WP Plugin gives you an easy way to find a great photo to add to your website and the plugin takes care of adding the photo to your local media library so you just have to click and select the photo you want. The image is automatically downloaded and you just need to insert the photo from your media library.

While the selection of photos from Unsplash is still limited the selection is constantly getting better and the ease of adding the photos to enhance your website is worth taking a look the the Unsplash WP plugin.

How to Build a Website in Under 60 Minutes

Building a website used to be extremely difficult. You had to know HTML, cascading style sheets, possibly javascript and graphic design. Things have changed, now it is possible to build a website in under 60 minutes. Don’t believe me? Here are the steps you need to create your own website in 60 minutes.

Step 1: Register a domain. Using GoDaddy or your other favourite domain registrar get your own domain name registered. Time required 5 minutes.

Step 2: Get hosting. You can spend hours and days researching web hosts. To do this as fast as possible look at a decent WordPress host. I recomend Hostgator, but there are several good WordPress hosts. If you already have a hosting account somewhere you can probably skip this step and simply use an addon domain on your current hosting account. Time required 25 minutes.

Step 3: Change nameservers. This step only takes a few minutes. You need to login to your registrar and set your new domain name nameservers to point to your web hosting account. Time required 5 minutes.

Step 4: Login to your web hosting control panel and use their script installer to install WordPress. Most cPanel hosts have Fantastico to quickly install WordPress. Time required 10 minutes.

Step 5: Login to your new WordPress install and start writing! You have 15 mins left to spare to write your first post.

Now of course this only gets you the bare bones of a website. There is still a great deal more work to do like finding a new theme for your website and customizing it. Adding some plugins to help with different website tasks. Creating a Twitter account to help promote your new website. Creating a Facebook page. Taking the time to update your website regularly with new content. Well, you get the idea, but setting up the core of a website can be done in less than an hour.

Landing Page Design

I have been doing more research on best practices for landing pages recently and came across this great video on YouTube. I have watched and listened to this video several times now and thought I would share it. It has given me some great ideas to improve some landing pages for some of the pay per click campaigns and websites I work on. I am amazed at how some of the little things that he talks about makes such a huge difference in conversions.

If you don’t have the time to watch / listen to the video here are the seven deadly sins that Tim Ash talks about.

Sin #1 – Unclear Call-to-action
Sin #2 – Too Many Choices:
Sin #3 – Asking For Too Much Information
Sin #4 – Too Much Text
Sin #5 – Not Keeping Your Promises
Sin #6 – Visual Distractions
Sin #7 – Lack of Credibility and Trust

I was also so impressed by the video I ordered his book “Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions” from Amazon.

Color Scheme Designer

I have talked about my problems picking colours in the past. Fortunately I have found several tools that can help me, and today I found another one. Color Scheme Designer is a Javascript, browser based application that you can use to create colour schemes based on the various colour rules (are they rules?), such as mono, complimentary, triad, tetrad, analogic and accented analogic. It is an easy to use tool to help pick colours and allows you to preview your colour selection on a light and dark examples. The site even offers an API for those that want to tap into it. One of the more interesting features I discovered is the ability to simulate different colour deficiencies that people have. You can see what the colour scheme for your website looks like for someone that is completely colour blind for example.

If you are looking for a new tool to help pcik colour schemes for websites, or any other design projects take a look at Color Scheme Designer. It might be just the tool you need to pick the right colours for the job.

P.S. I know I used color and colour through out the post. I am Canadian, to me spelling it as color is wrong, so I only spelled it that way when I referred to the site because that is the way they spelled it.

Add a Google Website Search

One of the things I have had on my to do list was to replace the WordPress search with the Google Custom search. The WordPress search gives decent search results, but it is hard to compete with the accuracy of Google website search. I was reminded about that today when I was searching for a post I knew I had written about url canonicalization but I could not find it with the WordPress search quickly. I have written about Google custom search in the past and decided that this was the time to add it to the site.

Adding a Google Custom Search to your website or blog is a very easy thing to do. The first step is to visit the Google custom search to create your new custom search. Click the nice big button that says “Create a Custom Search Engine” to get started.

You will then be presented with a screen similar to the one below. Follow the simple instructions to setup you website search engine by giving your search engine a name and description. You probably want to skip the keywords box for a website search engine. It is important to select “Only sites I select.” under what sites you want to search, unless you have network of websites that you want to including in your results. In the select some sites input box make sure you take a look at the “Tips for Formatting URLs. You need to enter the URL correctly or your search engine might not search your entire website. For example to search all of a website you need to enter it like this:

Entire sites: Specifying www.mysite.com/* will include all the pages on www.mysite.com.

Once you agree to the terms of service you can then try out your new website search engine and manage many if the smaller details about it. Some of the sections you might want to pay attention to to manage your website search include the look and feel tab and the code sections. The look and feel options allow you to customize the search box, colors and add your custom logo to the Google hosted results pages. Whether you choose to host the results on your website or let Google host the results it is always nice to blend the results with your colors and logo.

The code tab allows you to setup the search to host the results on your own website or blog instead of relying on Google hosting the results. This is great to keep people on your website and blog as well as blend the website search even more with your website. In order to host the results on your own website you need to create a new page for it. Depending on what content management system you use or blogging software this can be different for everyone. The basic requirement is you need to create a new page to host the results with the Javascript code that Google gives you. For example using WordPress I created a new page called Search Results and I published it. I hide it from the menu using the Page Link Manager plugin. Once you have the URL for the page, paste it into the Google Custom Search Code page then you can copy and paste the search results Javascript code into the search results page you just created.

You will also need to include the search box on your site somewhere. An easy place it to copy it into a sidebar text widget or place it directly into your theme like I have. Once this is all done you can use your new search engine to search your website.blog and make it easy for people to find what they are looking for all with them not leaving your website. The added bonus is that the the Google Custom Search can also be linked to your Adsense account, making you money every time someone clicks on an ad on the search results.

I took me roughly 20 minutes to add a Google custom search to the LGR Internet Solutions website and blog but it has already been a benefit to my users. I have noticed people doing searches in my statistics and reading more pages on the website. As a result my overall bounce rate has gone down and my page views have increased. While that is not just because of the search box, it has helped to keep people here and reading. Take a look at adding a Google custom search to your website/blog. It could help them find exactly what they are looking for.

Smush It!

Optimizing images for the Internet can be a pain staking task to make the image as small as possible while still making it look as good as it can. Back in the day when everyone was on dialup web developers used to spend lots of time to make sure those images were as small as possible. With more and more people on high speed DSL and cable connections it is easy to get lazy about image compression. There is also the reality that web publishing has become much easier with content management systems such as Joomla and WordPress. No longer do you have to be a total web geek to be able to run a website or blog, as a result image compression has often been forgotten about. Smush It! is about to change all of that.

While I use Photoshop or the GIMP for my graphic work, I have to admit I don’t take as much time as I used to to make sure images are compressed as much as possible. Smush It! makes it easy to squeeze those images down as much as possible without sacrificing image quality. The site it easy to use and you can upload an image from your computer or through a URL. They also offer a Firefox add on that allows you to upload any image from a URL with a click on the icon in Firefox.

How well does it work? Here are some examples I tried:
Original Video Rambler logo:
Size: 8.5 KB

After Smush It!
Size: 6.87 KB
Savings: 1.60 KB
% Savings: 18.84%

Original Photo:
Size: 164.6 KB

After Smush It!
Size: 156.47 KB
Savings: 8.17 KB
% Savings: 4.96%

I can see Smush It! being very useful for people that want to compress images for their website or blog to make it load as fast as possible. No longer do you need to spend countless hours fiddling with Photoshop to make the image as small as possible, now all you need to do is Smush It! Bloggers that regularly add photos to their posts can use Smush It! to compress the images and save on bandwidth and file size making their websites load faster. Combine Smush It! with Aviary or Splashup and pretty soon you won’t need Photoshop any more to create and compress images. Give Smush It! a try and see how much it can compress your images.

51 RSS Buttons For Your Blog

It has been a very crazy week trying to get things done, so I have not had a chance to post as often as I wanted to this week. One of the many challanges of running a business and being a work from home Dad. I wanted to quickly point you to these 51 RSS buttons for your blog. I came across it thanks to this post on Jeffro 2.0.

I thought this huge RSS button was fun. Do you think people will notice it?

There are smaller ones available as well.

Colour Lovers

If you have been visiting for a little while, or have browsed through some of the older posts (Color Combinations & Color Combinations Update) you know that one of the areas I struggle with is colour for websites. Because of this I am always on the look out for new colour ideas and tools to help me come up with attractive looking colour schemes for the sites I work on. That brings me to ColourLovers.com. I found the site thanks to Search-This, one of the blogs I like to read occasionally.

First off I have to say, what a great site! I don’t say that very often, ask my wife. Usually when I talk about a website with her I will list off four or five things that I do not like about the site. With ColourLovers I honestly can say that my first impression was very good. It was very clear what the site was about and why you were there, you are looking for colours. You can easily browse the colour palettes by preset sorts such as top rated and new, as well as search the colour palettes by colour.

Once you register you can download different colour palette combinations in a number of different formats including Photoshop, Illustrator (I think the one is Illustator, I could be wrong), CSS, HTML and as a Zip file.

There is also a whole colour section, where you can browse and search for individual colours and see the various palettes combinations that have been created with that colour. I could see this section being very useful since often I have clients that have one colour they want to see in the website, and this way I can quickly see what colour palettes have been created. The only thing I would like to see in this section is a way to search for a specific colour, for example, let me enter in a RGB or Hex of a colour and find the different colour combinations for that colour.

Overall a very useful colour website. I know where I will be heading to when I start my next website design and I need some inspiration for colours.

Internet Explorer – How I Loath Thee!

I have been back for just over a week now from a great week off up at Waskesui, in Prince Albert National Park.

In the week I have been back I have been busy doing a redesign of a website for a client. The redesign is going well but there have been some problems with Internet Explorer. While the problems have not been unsurmountable yet, it did get me started on my list of reasons why I hate Internet Explorer.

PNG Alpha Transparancy: Sure Internet Explorer 7 has it, but there are tons of people out there on Windows 2000 and Windows 98 still, not to mention those that just never upgrade there computers. Have you ever tried to update a Windows XP computer on dialup? I did not think so, and I doubt Microsoft ever has either.
Box Model: I really hate hacks to fix the Internet Explorer box model.
Disappearing Floats: Why does that image keep disappearing?
Insecure: People should not have to worry about misspelling Google.
CSS Support Incomplete: While I try not to do fancy things with CSS, I just wish Internet Explorer supported some more CSS features. Things like hover on elements other than a:hover.

Those are the major things I dislike about Internet Explorer. What other Internet Explorer oddities can you add to the list?