Skip to content

Add the ‘type=date’ field to inputs from Contact Form 7

August 31, 2012

iPhone Date Keyboard on a mobile formWhen using Contact Form 7 for a mobile site (for iPhone primarily) I found that I wanted to make use of the built-in datepicker keyboard for a few form fields.

I saw articles on integrating the standard jQuery datepicker into CF7 and further articles on styling this for mobile… but it all seemed like overkill when there was an arguably better solution sitting right there on my phone.

So after giving up on Google I dove into the source code of the plugin and made a few amends to allow for a [date] shortcode that outputs an <input> field with type=”date” as default.

NOTE: Any changes made to these files will be overwritten if you auto-update the plugin

Here’s what to do:

1) Find text.php in the CF7 Plugin folder

This is the only file you need to amend for this, you could technically alter one of the others but as this is the most straight-forward it seems like the best option.

2) Create a new shortcode handler

At the top of the file is the code to create a new shortcode for text, email and their mandatory equivalent fields. Add a fifth line to this as so:

wpcf7_add_shortcode( ‘text’, ‘wpcf7_text_shortcode_handler’, true );
wpcf7_add_shortcode( ‘text*’, ‘wpcf7_text_shortcode_handler’, true );
wpcf7_add_shortcode( ’email’, ‘wpcf7_text_shortcode_handler’, true );
wpcf7_add_shortcode( ’email*’, ‘wpcf7_text_shortcode_handler’, true );
wpcf7_add_shortcode( ‘date’, ‘wpcf7_text_shortcode_handler’, true );

3) Define the default type option

After this (around line 17) there are some variables defined that are used to output the selected html, add one in that sets a variable called ‘inputtype’ to ‘text:

$type = $tag[‘type’];
$name = $tag[‘name’];
$inputtype = ‘text’;
$options = (array) $tag[‘options’];
$values = (array) $tag[‘values’];

We will use this variable to change the input type as required.

4) Define the input type when the [date] shortcode is used

if ( ‘date’ == $type )
        $inputtype = ‘date’;

Add this under the line where the attributes for email validation are defined.

5) Amend the line which outputs the input field

$html = ‘<input type=”text” name=”‘ . $name . ‘” value=”‘ . esc_attr( $value ) . ‘”‘ . $atts . ‘ onfocus=”if(this.value==\”;

Needs to be changed to:

$html = ‘<input type=”‘ . $inputtype . ‘” name=”‘ . $name . ‘” value=”‘ . esc_attr( $value ) . ‘”‘ . $atts . ‘ onfocus=”if(this.value==\”;

This will output our variable, text by default and date when we use our new shortcode, into the input field.

And on a very basic level that’s it, you can now use an input field that has ‘type=date’ included by simply using [date] in your form rather than [text]. There is a lot more that could be done such as creating validation for the field and adding it into the tag generator interface… but this meets my needs for now!

Adding jQuery Mobile transitions to WordPress Custom Menus

July 11, 2012

jQuery mobile is a fantastic resource and generally it’s quite easy to use it alongside a WordPress installation.

One of it’s fancier client-impressing features is animated transitions between pages. These are easy to add to any link if you can directly edit the url, you just add data-transition=”flip” or whatever animation you are aiming for (see the full list on the jQuery Mobile Documentation) like so:

<a href="http://yourpage.com" data-transition="flip">Fancy flippin' link</a>

Appending WordPress Custom Menus

However the place where most people would like to use them in WordPress, their Custom Menus, is not directly editable.

Fortunately as you are already using jQuery Mobile it’s easy to add transitions to your nav links using some original flavoured jQuery, all we need to do is append the nav links with our data-transition attribute using the .attr function:

$(document).ready(function(){
jQuery('a').attr('data-transition','flip');
});

This little snippet will add the data-transition attribute to all of the links on your mobile site, if you want to narrow down your focus you simply need to change the ‘a’ selector. Note that as this is WordPress we’re using the ‘jQuery’ syntax rather than ‘$’.

This change is applied after the document is loaded so you won’t actually see it in your source code, to test it either use the DOM inspector or just click the link!

Now go and flip, fade and pop your WordPress Mobile site to your hearts content.

UPDATE:

After testing my mobile site some more I realised that if you are using a persistent header or footer menu in jQuery mobile the above code will only append your custom menu on first load.

To make sure it works on every page a user visits we need to change the commands a little (thanks to the people on this forum post for some pointers on this):

$(document).ready(function(){
('#wrapper').live('pagecreate', function(){
jQuery('a').attr('data-transition','flip');
});
});

Here I’ve added a additional nested function that targets my main wrapper div (‘wrapper’ this needs to be a div present on every page of your site to function correctly) and called the ‘pagecreate’ function in jQuery, this ensures that the code is run on first load and then on each subsequent page visit within your site.

Adding a tap to call button to a mobile site

July 10, 2012

Just a quick tip on how to add a tap to call button to your mobile website when the button text isn’t the number itself like so…

Mobile tap to call button example

Instead of your standard href tag with a http:// protocol you can use the following:

<a href=”tel:01619682041″>Tap to call us now</a>

The “tel:” part will cause the following to pop-up when a user taps your link or button (note: this is the default behaviour on an iPhone 4S, other devices will differ):

Tap to Call in action on iPhone

Hope this helps, there are more advanced ways to trigger your button tap activity but this is the basics for tap to call.

Making jQuery scripts work in WordPress

July 6, 2012

Most front-end developers working in WordPress are too lazy to code their own jQuery animations and functions when they want to do something they know has been done hundreds of times before.

So we grab jQuery code from a website and shove it into WordPress… and usually nothing happens.

Assuming you’ve already loaded in the jQuery library correctly this can be very frustrating. To save you lots of time fiddling about, this is probably the reason:

Where you have a function such as…

$(document).ready(function(){
$('body').addClass('something');
});
});

You need to change the ‘$’ to ‘jQuery’ like so…

jQuery(document).ready(function(){
jQuery('body').addClass('something');
});
});

WordPress doesn’t like the ‘$‘ sign being used to denote a jQuery action, but it’s quite happy if you spell it out. It took me a long time to figure this out first time around and has often caught me out since!

The case for compelling content

May 18, 2012

Content is king. That must be one of the oldest cliches around in online marketing. How about another? Build it and they will come.

Sounds simple in theory (and in swooshy agency presentations) but it is in fact one of the hardest things to do as a small online business. When I first joined The Data Octopus they were doing what many small businesses do, outsourcing their blog writing just for the sake of getting keyword stuffed content out there.

The penguin and panda extinction fightback

Some of that content worked to get the brand up there in the SERPS but it was a fairly pointless exercise. It might get people into the site, sure, they may even explore a little once they get there, but the majority will bounce out as soon as they see it’s not the useful information they were searching for.  It’s not a compelling enough reason for them to stay and not authoratitive enough to make them trust your brand.

It’s also becoming less and less effective as Google releases more updates like Penguin and Panda. These changes to their already advanced algorithm are trying to make the internet a better place by penalising content and links for content and links sake. What is more interesting than the technical updates however is the increase in the human element of Google policing. It’s much harder to fool a human than a machine as many SEO experts are discovering to their black-hat peril.

Content by numbers, the secret to creating compelling content

So low-quality content is useless for your potential customers and increasingly redundant for your organic search results. But what is the secret to creating compelling content? I’m afraid there isn’t one. It takes time, effort and a lot of people to get it right. You need to consider who will do the following:

  • Research: If your content is not well researched it’s just opinion and opinions are like arseholes (everybody has one), yours may actually be particularly compelling, but it takes quite a wordsmith to make it stand-out without research.
  • Writing: Strip back all the decoration and read the words on the page, are they worth reading? Can you get to the end of the article without nodding off? It’s a myth that anybody can write content for the web, it’s a skill that requires refinement and practice.
  • Design: People are impatient online and you need to deliver content to them in bite-size chunks, the look and feel of your website will contribute as much to the confidence factor of your article as the words.
  • Optimisation: You shouldn’t create content purely for SEO but you should certainly consider it. This requires research into trending keywords and Google-friendly pages.
  • Analysis: There is no point just throwing content out there and seeing what sticks no matter how compelling you think it is, you need to see what is keeping people on your website and what is getting people to call you.
  • Sales: Do you have the people on hand to answer the call once somebody is convinced by your content? Not everybody wants to complete their journey online and you need to be able to take advantage of the opportunities you are creating.

If you want to do compelling content correctly you need somebody (perhaps more) dedicated to each of these tasks and this is why it’s so difficult for a small business to get right when they are starting out.

Why you shouldn’t outsource content

So if it requires more people than you have you should just outsource it to an agency right? Wrong. This is the trap many small businesses fall into.  They can produce the content but it will never contain the insight of somebody working within your business who knows it inside out. It’s that insight that makes it compelling.

The Data Octopus recognised this and expanded it’s team to get the right people doing the right jobs. They now produce worthwhile blogs on a daily basis and send out a monthly newsletter crammed full of all their latest research and insight.  They share the wealth of their knowledge because it builds trust and generates leads. On a regular basis a call will start out with “I just read your blog on…” or “Your newsletter arrived at just the right time…”. That’s the ultimate return on investment and the reason why you should never take shortcuts with your content.

A guide to not being Socially (Media) Awkward

March 23, 2012

Did you see that message I left for you? What on my facebook? No I tweeted it. Oh I didn’t see it. Sorry I meant via linkedin.

There are too many social media networks to keep track of these days, that’s an unavoidable fact. You want a presence on all of them but you don’t have time to keep them all updated. So just use a tool that updates them all right? Wrong. I think this is a cardinal sin for using your personal (and to a lesser extent, business) social media effectively.

Social networks are not all the same thing branded differently, they were created for different reasons and what you might want to share on one is not necessarily suitable for the other.

So here is my simple etiquette guide for how to use the major ones, ignore it and continue to be socially media awkward if you prefer.


FacebookFacebook

The biggest and for a long time most closed off social network.  It started out just being for your friends and people who you would like to be your friends but had only actually met once in the kitchen at a party.  It’s opening up more and more now (unless you are savvy with your privacy settings) but the rules still largely apply.

Your audience: You have a lot of control over who is in your facebook network, you could keep it to friends who will forgive you no matter what you say. In that case feel free to tell them about that weird dream you had last night. The game changes when you let in acquaintences, work colleagues and family. That’s when it’s time to reconsider that awkward sexual reference.

Do: Share cool new bands you’ve heard, photos about interesting things you are doing, statuses about what’s new (and preferably interesting) in your life.

Don’t: Allow games and countless other sites to post to your wall, use hastags, think your mum won’t see that thing you did.


Twitter

How you use twitter really all depends on how concerned you are with gathering followers. If you really want them then you should set about developing an in-depth social media strategy that will drive key users to your profile and generate the ego boost you are looking for. If you are a normal person just view it as a stream of consciousness (but only for the interesting thoughts, not every single one).

Your audience: The whole Twitter using world. Bear in mind that if it’s easy to locate your Twitter account then potential employers, friends and lovers probably will… and then they’ll have access to every single one of your past tweets. You can lock down your account but that really defeats the whole point.

Do: Learn the etiquette, hashtags can be wonderful things but you don’t need to use one for everything. Keep to a narrow range of subjects if you want more followers and say what they are in your profile, people like to know what they are getting.

Don’t: Retweet big news companies or well-known blogs all the time, people already know about them and probably already followthem. Don’t clog up peoples timelines with unwanted swathes of tweets or you’ll soon find yourself unfollowed.


Linkedin

A social media site that’s also a CV? Whose crazy idea was that? Linkedin could be the easiest social network to be socially awkward on but should also be the easiest one to get right. You can see what it’s supposed to be for, there’s no need to figure it out for yourself. Keep it work related, keep it professional and don’t view it as a way to make friends (just influence people).

Your audience:Potential employers and past employers who may want you back.

Do: Keep it updated and make yourself look interesting, contribute to groups and follow businesses you like. Linkedin is growing rapidly as a genuine source of candidates for recruiters and you’d be foolish to miss the opportunity.

Don’t: Treat it like Facebook.


So that’s my whirlwind guide to the major social networking players. Of course they is also Myspace, Pinterest, Bebo, Instagram and several others, not to mention blogging sites such as this one and Tumblr, but if you can’t play right with the big boys don’t even bother with the others.

Enabling PHP sessions in WordPress

March 7, 2012

When running an advertising campaign on The Business Octopus website we wanted to present a unique contact telephone number to customers to help us to track successful calls generated by the campaign.

This number needed to follow the customer around the site but only for as long as their current browser session. The most obvious PHP solution for this was to use a Session, I wanted to avoid using cookies if possible.

So that’s easy right? Not in WordPress! They are disabled by default! Agh!

After a lot of unsuccessful Googling where I was told to change various .htaccess settings (which did not work for me as our server is Windows hosted rather than Apache, I know, I know) and repeatedly told there was no default setting or plugin for this.

But there is! It’s called WordPress Session Enabler and it works a treat, download, activate and play with sessions in WordPress to your hearts content.

Hopefully this will save somebody some time.