Setting the ‘to:’ address in Contact Form 7 from a custom field

This does assume you have the Contact Form 7 and Dynamic Text Extension plugins installed. If you don’t, this article will mean bugger all.

On our works web site, we use Contact Form 7, about 30 in all, and after being asked to change the ‘to:’ address once too often, I thought ‘fuck this’ and came up with a solution where the content editors can do it themselves without pestering me all the time.

The quickest way is to simply set a custom field on the page/post you want the Contact Form 7 to appear on. At the bottom of the editor screen, there is the option to Add New Custom Field. For the sake of this tutorial, I’m going to call the key cf_email_to_address and then enter the email address you want to test.

Click Update or Save depending on what you’re doing, and now head over to the Contact Form 7 that you want to edit and in the Form tab, add this at the top:

[dynamichidden recipient-email "CF7_get_custom_field key='cf7_email_to_address' obfuscate='on'"]

This is a CF7 dynamic field that put the value of the custom field cf7_email_to_address that we created above, and puts it into variable recipient-email.

All we have to do now is click on the Mail tab and in the To address, add this:

[_post_title] <[recipient-email]>

Will send an email with the post title name to the email address we specified in the custom field.

Simple.

WordPress Contact Form 7 Postcode plugin

Edited: 18/3/2018 with screenshots and to recognise an update.

Some genius at work pointed out that the contact forms on the works web site weren't validating properly.

Whoops, my bad.

So I changed the email and telephone inputs to their proper HTML5 types, but there was the postcode box that the spammers where filling in with crap, so I wrote this little plugin for Contact Form 7 that adds postcode validation.

Once installed, it adds the Postcode option to the form builder:

Add the usual id, class and required options.

It's free to use and abuse as you feel necessary, just a link back to the original would be nice.

Congrats to MrJoshFisher for adding placeholder support, I LOL'd and LOL'd when that came up 🙂

Download here.

WordPress plugin to replicate Pluralsight’s search

The development team are being reskilled (NOT retrained) to use technologies for mobile apps like AngularJS and MVC5 and as we’re MSDN members, we get Pluralsight free 🙂

So we all get our subscriptions through and the first thing I notice is the search.

live-search-pluralsight

That’s nice, so my mind is already writing the code in my head, but I’m a lazy shit so can I rip it? Nope, it’s in ReactJS.

Bollocks.

Ok, let’s break down each step and write it in jQuery. For WordPress. As a plugin. Piece of piss.

Ta dah!

Ta dah! If I could get my own domain URL right. Duh.

This is provided as is. It’s very basic, no responsiveness, no options and written and tested in Chrome. Sure it can be improved greatly, but this was just me messing around more than creating a finished project.

Download it here, add it to your site and activate.

After a little bit of tidying, I’ve added it to GitHub along with other shite I’ve done.

If you want to reconfigure it, you’ll have to edit the files and colours and stuff.

Try the search box on the left hand side on this blog and you’ll see it in action.

Yop Poll WordPress plugin: Changing class of button and add FontAwesome

Since moving over to a new theme on the works web site, it’s been my mission to change the INPUT and BUTTON tags to match, and sometimes it’s just not possible without massive duplication of CSS.

In this morning’s example, I wanted to get rid of the styling imposed by Yop Poll and put Twitter Bootstrap’s btw classes in it’s place, and I’m not in the mood for a little thing like a lack of customisation or specifying classes beat me.

We want to look at this section.
jQuery(document).ready(function(){
runOnPollStateChange_%POLL-ID%();
});

The id button is #yop_poll_vote-button-%POLL-ID% in the template so the jQuery script is:

jQuery( "#yop_poll_vote-button-%POLL-ID%" ).removeClass( "yop_poll_vote_button" ).addClass("btn btn-default");

Ta-dah! But we’re not going to stop there. We use FontAwesome, it would be nice to have that as well wouldn’t it? Well let’s do it, using the same ID, we can just prepend to the HTML in the button.

jQuery("#yop_poll_vote-button-%POLL-ID%").prepend('<i class="fa fa-check-square-o"></i>');

And if you are going to ask how to put the icon AFTER the text then you should be ashamed of yourself and step away from WordPress!

And in the words of Jimmy Saville (whoops, probably triggered someone there), “how’s about that then.”

Is your WordPress site running slow on an IIS server?

I’ve been working on an internal IT support board and after moving it from the local test server to a remote live server sending the URL out for test, we noticed how damn slow it was, for example, it was taking 10 seconds on every page to connect to a clicked link.

As it was Active Directory secured, changing it to the local AD controller to the server didn’t speed it up as much as I had hoped.

Someone then suggested changing the DB_HOST in the wp-config.php to 127.0.0.1 instead of localhost.

facepalm-single

Much to my amazement, the 10 second delay disappeared in an instant. So there you go, a quick fix to the problem and another reminded why I hate using IIS!

Change the ‘Howdy’ in WordPress admin bar

“Howdy, Mark Hall!” Oh please WordPress.

I changed it to ‘Hi, Mark Hall’ on the corporate web site, while looking through the functions.php for the IT Support Board, I decided to enhance it a little. What about a random selection?

[code]
/**
* Replace ‘Howdy’ with a random welcome message… because I can 😉
*/
function replace_howdy( $wp_admin_bar ) {
$my_account = $wp_admin_bar->get_node(‘my-account’);
$welcome_text = array(
‘Hi ‘, // So boring!
‘Well hellooooo there ‘, // too creepy
‘Ding dong! Hellooooo ‘, // Leslie Thomas
‘Another visitor, stay awhile. Stay FOREVER! ‘, // Impossible Mission
‘Howdy-doodly-do ‘, // Talkie Toaster
‘LTNS! HRU ‘, // chat room b*llocks
‘Uh oh, here’s trouble ‘, // no reason
‘Ah I’ve been expecting you ‘, // thanks Mark 🙂
‘Hello! is it me you’re looking for? ‘, // Lionel
‘You say goodbye, and I say Hello, hello hello ‘, // Hello goodbye
‘Sorry I can’t do that… Daisy, Daisy… ‘, // HAL
);
// could use array_rand(), but that would be too easy
$welcome_message = $welcome_text[mt_rand( 0, count($welcome_text) – 1 )];
$newtitle = str_replace( ‘Howdy,’, $welcome_message, $my_account->title );
$wp_admin_bar->add_node(
array(
‘id’ => ‘my-account’,
‘title’ => $newtitle,
)
);
}
add_filter( ‘admin_bar_menu’, ‘replace_howdy’,25 );
[/code]

Well that killed a couple minutes of working day 😉

Adding custom fields to your WordPress RSS feed

Our website uses the WP Job Manager plugin to manage the recruitment side of the web site, and after much hacking of the template, we’ve got it nailed now for the different job types in different job categories.

When asked to submit an RSS feed to AllTheTopBananas.com it came back as a fail as they need the salary and location fields. Hmmm, ok no problem. Add an action to put those custom fields into the RSS like this.

What could possibly go wrong?

Hmmmm guess who forgot how picky XML validation is and forgot to encode the $value.  Schoolboy error, so wrap the string with wptexturize():

And bingo. Validation finally. Maybe I should have checked with the W3C XML Validator first before sending it off again.

CSS styling the BUTTON, Anchor and INPUT

When we released version one of the WordPress of works web site, we were using the7 theme from Dream Forest, not my first choice but just because it’s what they thought looked fantastic at the time. On the plus side, anything was better than the god awful CakePHP version, which looked like Moses brought down from the mountain with him along with the ten commandments.

By the time I was involved with the development, the content was pretty much complete and while I plugged away adding the new features to the site as they were requested, one thing really got on my wick more than anything else, and that is … buttons. Combine Contact Form 7, Visual Composer and the7 theme‘s own additions and you have a disaster when it comes to a uniform look across the web site. Let me illustrate what drove me crazy.

When you add a button in Visual Composer, you get this:

anchors-buttons-inputs-example-2

Looks fine, and my preferred look (pretend you can’t see the  different fonts, letter spacing and font weight). However, add a poll or Contact Form 7 and the submit button looks like this:

 

anchors-buttons-inputs-example-1

Oh look at the glorious over the top CSS gradients and shadows. It’s a good lesson for “designers” that just because you CAN do something, doesn’t necessarily mean you SHOULD. And I have to ask… what is that shit doing in the flat version of the theme anyway?

Rant over, of course I missed off the graphic buttons we used on the web site all over the place because there was no method for adding them in the backend. So over the entire site, you have three different styles of buttons and no consistency between ANY of them, but luckily not everyone is as anal as I am so no one  noticed or mentioned it.

So when I decided on my own initiative to create a new theme that was more lightweight than the bloated piece of crap that is the7 theme (I can feel another rant coming on about that theme!), it was my dream to have <BUTTON>, <A> and <INPUT> look visually identical in ALL browsers, yes even Internet Explorer 8. Yes I know, but people still use that pile of crap in the company so it has to be supported.

I also wanted to stop using PNG images as buttons as it’s a waste of resources, plus it means myself or the designer would have to do work which don’t have time to do.

With the CSS done, the HTML is unremarkable.

Hey presto, uniformity with buttons, input and anchors across the web site.

This code as used as the basis for writing an extension plug-in for Visual Composer which allows users to add a kick ass button with FontAwesome support without harassing the poor developer. Or designer, but I’m out of sympathy for designers (Sorry Matt! :)).

Click here to download the zip file