Use Google AdWords Advertising for Data Driven Design and Strategic Planning

Your strategy choices and design decisions should be data driven. Here is an inexpensive way to get started with a new web site that is not yet getting much traffic. You need to formulate hypotheses about your target audience and then be able to collect real data to test those hypothese and thus drive the direction of your strategy and design.

Before you invest a lot of money in either development or advertising, you should do some hypothesis testing. With Google AdWords you have complete control over your budget and you can target who sees the ads, e.g. geography and your choice of keywords. After you have made a small purchase of AdWords you’ll be able to use Google Analytics to observe the behavior of site visitors based on how you have configured the demographics you’re experimenting with and of course you can do A/B testing, e.g. comparing the effectiveness of two different wordings of your message on conversion rates.

YouTube Preview Image

Navigation for Mobile

Navigation Open
The navigation bar often becomes an issue when creating a responsive theme. As the width of the browser window shrinks it gets harder to fit it across the top, and the text and clickable area get smaller and smaller. If we keep them large and organize the navigation tabs in columns they push the content down. There is an alternative, however. We can place a simple menu button at the top. Click it and it expands to reveal the menu tabs. Click it again and the navigation items disappear Continue reading

Custom Post Types

Setting up Custom Post Types | Setting up Custom Fields | Templates

Setting up Custom Post Types

I was recently asked to create a custom post type for members of an association. Each member should be able to enter various kinds of information about themselves. Parts of this information would be pulled into other pages.

I will give a summary of what I did to accomplish this. If you need a more in depth tutorial read Justin Tadlock’s excellent article.

In order to create the custom post type I first created a folder in the ‘plugin’ section named ‘Partner Custom Posts’. Inside the folder I created a php file with the same name where I wrote all my code. The plugin needs to be activated in the plugins area of the dashboard.The code could also go into functions.php instead.
Continue reading

Drop Shadow with Transparency

Aside

If you use CSS3 dropshadows you can specify the color with a hex-number, but if you need a transparent shadow, use this:

box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
   -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
   -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);

Making Layout Easy With Box-sizing

The default CSS box model can be tricky to deal with. The ‘width’ of a box does not include the padding or borders. Those are actually added on to the declared width to make up the final width of what you see in the page. So if you want a box to span half the page and you simply give it a width of 50% and then a padding of 20px, you end up with something wider than half the width of your page. Now you could do some math to figure out what percentage width you need to declare to make your box and padding span half the width of the page … or you could use the box-sizing property.
Continue reading

JQuery Tabs Not Working

Adding jQuery tabs to a website doesn’t seem all that hard – until you run into an unexpected problem.

First you need to go to the jQuery website and find the source code on the tabs page. Make sure that you copy the html into your page. Grab the bit of javascript in the script section and paste it into a .js file in your js folder. Then open your functions file. Since WordPress already includes copies of jQuery and jQuery-ui you don’t need to download them. Just enqueue them like this: Continue reading

Is_home: Conditional for Blog Page

Aside

It is counter-intuitive, but yes, you have to use is_home if you want to refer to your blog page in a conditional – even if the blog is not in your home page.

Lets say you want to add a different image to the header only on your blog page. You would write something like:

1
2
3
if ( is_home()) {
    <img class="header-image" alt="" src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/myimage.jpg" />
}

What I would call the ‘home page’ is actually called the front page, as in ‘is_front_page()’.

Remove Unwanted Profile Fields

Aside

Below is the code you would use to hide unwanted Profile fields.

1
2
3
4
5
6
7
8
add_filter('user_contactmethods','hide_profile_fields',10,1);
 
function hide_profile_fields( $contactmethods ) {
	unset($contactmethods['aim']);
	unset($contactmethods['jabber']);
	unset($contactmethods['yim']);
	return $contactmethods;
}

Add HTML Elements Using Hooks

You can use hooks to add html elements such as wrapping divs to your templates. Here is an example that I used in a Woo theme. You have to adapt it according to your theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Add footer widget container
add_action( 'woo_footer_top', 'footer_widgets_container_start', 8 );
function footer_widgets_container_start() { ?>
	<!--#footer-widgets-container-->
    <div id="footer-widgets-container">
<?php	
}
add_action( 'woo_footer_before', 'footer_widgets_container_end' );
function footer_widgets_container_end() { ?>
    </div><!--/#footer_widgets_container_end-->
<?php	
}
?>