How to Guides – Page 9 – Reverb Studios Design

Optimise Your Site for iPhone – VERY Simply!

Here’s a quick method of fixing some common problems with your site that might cause it to display weirdly in the now ubiquitous iPhone/iPod devices. My own lovingly crafted main site and blog design were nearly fine on the iPhone but there was strange resizing of both the background image and some of the navigation links & text. The background image is central to my design so I had to do something!

For WordPress powered sites and blogs there are many great plugins to automatically render a stripped down version of the site but I really wanted my design to be visible. I found out that the iPhone Safari browser automatically resizes elements on a web page including text and background images so to combat this simply add the following to your body tag:

-webkit-background-size: 2000px 1024px; (The exact size of my background image in this case)
-webkit-text-size-adjust: none; (Stops the iPhone from resizing any text on a page)

“webkit” is specific to the Safari browser so adding this code will not mess up anything in other PC based browsers.

You could take this a stage further and try to detect iPhone visitors with the following code and give them an iPhone specific stylesheet and viewport:

This goes in your <head> section:

<!– iPhone Detection –>
<?php
if (ereg(‘iPhone’,$_SERVER[‘HTTP_USER_AGENT’])) {
$iphone = 1;
}
elseif (ereg(‘iPod’,$_SERVER[‘HTTP_USER_AGENT’])) {
$iphone = 1;
}
else {
$iphone = 0;
}
?>

<!– If it’s an iPhone, show the Viewport Meta tag and iPhone CSS –>
<?php if ($iphone == ‘1’): ?>
<meta name=”viewport” content=”width=320px” />
<link rel=”stylesheet” type=”text/css” href=”iphone-style.css” media=”only screen and (max-device-width: 480px)” />

<!– If it’s NOT an iPhone, show the normal CSS and no Viewport Meta tag –>
<?php else: ?>

<link rel=”stylesheet” type=”text/css” href=”normal-style.css” media=”screen” />

Leon.

Using NextGen to Power an Animated WordPress Header

I’m annoyed this hadn’t occured to me before today despite having used WordPress and the NextGen Gallery plugin for years now! I was just about to knock together a custom flash header for a wordpress site and client who wanted a few banner images rotating to liven up his site when I realised it might be possible to do it easier with NextGen AND give the client the ability to change images himself directly from the wordpress admin.

Here’s how to do it:

With a recent version of standalone WordPress and the NextGen Gallery plugin both installed and activated and using a HTML editor like Dreamweaver, try to locate the lines/div’s in your WordPress template’s Header.php file or Stylesheet that control the template’s banner image sizing and position. Inside this div replace the existing image code with the following NextGen php hard code and upload to the server:

<?php echo do_shortcode('This slideshow requires JavaScript.
'); ?>

Replace “Gallery not found” with “slideshow id=x” where “x” is the ID of the gallery/slideshow you wish to display.

If you just want to display the slideshow on the home page, use this code:

<?php if ( is_front_page() ) {
echo do_shortcode('This slideshow requires JavaScript.
');
}
?>

This gallery should be created beforehand using images that match precisely the dimensions of the template’s existing banner image.

Next, go to the NextGen options in wordpress and specify slideshow dimensions that match the width and height of the template banner image. You can specify other options here such as order, image display time, next/previous controls, etc..

That’s it! Refresh your front end and hopefully you now have a flash banner!

Here’s an example of it working – www.Gaelink.ie

Leon.

Use your own Short URL’s for maximum Branding Effect!

URL shorteners are used a lot these days, mostly on the likes of Twitter and Facebook to make sometimes ridiculously long urls short and sweet. I, like a lot of social media contributors, have my business blog setup to auto post to both Twitter and Facebook and Twitter in particular with it’s 140 character limit really requires some compression when you are linking back to a blog post.

I’ve been using Dlvr.it for a while to take my Blog’s RSS feed and articles and distribute them out to other social media sites and they’ve recently introduced the ability to brand their short links with your own custom domain so that instead of people on Twitter seeing a link to your blog post like “dlvr.it/12345” they will see (in my case) “rvb.ie/12345” (rvb stands for Reverb Studios!).

All you need to do to set this up and running is purchase a new domain name and add a DNS record pointing to the Dlvr.it site, then login to Dlvr.it and add the new custom short url to your RSS sources. Here’s some simple instructions on how to do it:

http://support.dlvr.it/entries/171525-how-do-i-set-up-a-custom-short-domain

How to Transfer a .ie Domain to a new Owner

I’m writing this article to document the process I’ve just gone through for the first time to transfer a .ie domain I owned to someone else. I’ll probably need to do this again some day so I can refer back here! It’s not the simplest process.. Continue reading How to Transfer a .ie Domain to a new Owner

External/Affiliate Link and Download Tracking in WordPress

I write reviews on my WordPress blog here and obviously link to the website of the product or service I’m reviewing and it recently occurred to me that it might be handy to know exactly how many people I’m sending to these websites for free! I tried manually adding tracking to links in articles but that’s a bit tiresome. I tried one or 2 other plugins also but nothing has worked as well as the Google Analyticator plugin by Ronald Heft. Continue reading External/Affiliate Link and Download Tracking in WordPress

Twitter Poll: About People or Search Engines?

This post was prompted by something I read on an email list and on Linkedin the other day where the author seemed to have the view that Twitter was more about Search Engines than People. His argument was that Twitter is far too ‘noisy’ for people to actually read and interact but that Google could find it’s way around Twitter a lot easier and index content from it. It was therefore good practice in the author’s eyes that businesses auto feed to twitter in the hope of getting indexed and neglect the social aspect altogether. Here is the author’s summation at the end of his article: Continue reading Twitter Poll: About People or Search Engines?

WordPress Visual Manual

In addition to the many WordPress Video Tutorials I have on this Blog, I’d like to provide a simple, downloadable and printable PDF instruction manual on how to do some of the most common and basic things in WordPress. The PDF is a series of 12 annotated screenshots from version 2.9.1 of WordPress which is the latest version at the time of writing this article.

Download the WordPress Manual PDF

Get the Free Adobe Reader to view this PDF if you havn’t already.

Add a Contact Form in WordPress

Here’s a video tutorial on how to add a contact or enquiry form to a wordpress page or post using the Contact Form 7 plugin.

* Update: The value pasted into the “Mail – From” field and the “Message Body” should be [name] and not [text* name] as outlined in the video.

Add a Gallery to WordPress using NextGen

In this tutorial, I’ve tried to explain the relatively simple process of adding a nice, pro looking photo gallery to a WordPress Post or Page using the well known and excellent NextGen Gallery Plugin.