Using jQuery to Animate Icons

Saw this code a long time ago and thought it would be useful, tweaked it a little. The icons are held in a <div> inside another <div> with the class of .post-social.

//the social icons at the bottom of single posts;
$(".post-social div img").hover(function() {
  $(this).css('clip','rect(0 48px 48px 0)');
  $(this).parent().parent().css('margin-top','0');
}, function() {
  $(this).css('clip','rect(15px 48px 48px 0)');
  $(this).parent().parent().css('margin-top','-15px');
});

WordPress Admin Profile Fields

Thought I’d share this great little bit of code I’d found a year or so ago, but a tremendous update it is: adding profile additions to the WordPress admin.

Using just a bit of backend functions.php code, you can add as many as you like, and it’s really easy. First, open up your functions.php file, then add this in, it makes sure the user with the correct authority can do this:

function save_extra_profile_fields($user_id) {
 if (!current_user_can('edit_user', $user_id))
  return false;
}

Then add this line of code, with the name of ‘ambition’ as an example, below the return:

update_usermeta($user_id, 'ambition', $_POST['ambition']);

Great you can save a profile field, but you have to tell it to save it as that. So we need to add this outside the function:

add_action('personal_options_update', 'save_extra_profile_fields');
add_action('edit_user_profile_update', 'save_extra_profile_fields');

Now if only you could actually -see- the field in the fields in the first place to be able to edit it! So let’s add this little bit of code, it’s tailored to my design, but you can enclose your field in <div> if you please:

function extra_profile_fields($user) {
 <h3>Details</h3>
 <table class="form-table">
  <tr>
   <th><label for="uk_personal_best">Ambition</label></th>
   <td>
    <input type="text" name="ambition" id="ambition" value="<?php echo esc_attr(get_the_author_meta('ambition', $user->ID)); ?>" class="regular-text" /><br />
    <span class="description">What do you really want to achieve?</span>
   </td>
  </tr>
 </table>
}

And finally add in the functionality to make it editable, and saveable, putting this outside of the functions.

add_action('show_user_profile', 'extra_profile_fields', 10);
add_action('edit_user_profile', 'extra_profile_fields', 10);

AngularJS, Constant & Currency Symbols

I have been creating an AngularJS set of pages that handle stock; this started out as a conversion from straight PHP/MySQL/HTML to now using AngularJS with a much cleaner PHP/MySQL backend. One problem that I was running into though, was how to display currency symbols – just putting &pound; in wasn’t doing it. Then I tried various other incarnations of this, until finally I found out how to do it, like so:

app.constant(‘CONFIG’, { ‘CURRENCY_SYMBOL’:’\u00A3′ });

So there you go – it shows the pound symbol properly when you use the constant in your AngularJS code. This is for the &pound; of course, but there are, obviously a variety of other currency symbols, which I will be putting into the package in comments, like so:

US Dollar:  app.constant(‘CONFIG’, { ‘CURRENCY SYMBOL’:’\u0024′ });
Euro:  app.constant(‘CONFIG’, { ‘CURRENCY_SYMBOL’:’\u20AC’ });
Yen:  app.constant(‘CONFIG’, { ‘CURRENCY_SYMBOL’:’\u00A5′ });

Adding Custom Fonts to WordPress Theme via functions.php

One of the nicest ways to add in custom fonts for a theme is to use the functions.php file. You can easily find a url for Google Fonts for example, and switch it out in the file with no hassle. First you’ll need to add in the function to tell the theme what font file you want. I’m using Open Sans Condensed here:

function custom_fonts() {
 echo '<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">';
}

Then to make sure that it gets included in the header add this in below it:

add_action('login_head', 'custom_fonts');

Of course, change the font by substituting the url.

Tip for Showing Pounds in HTML/JS

Frustrating this may be, but you might have come across such annoyance in your creative journey.

Today I was rewriting some PHP/MySQL code into AngularJS and came across a part where I had a default currency set. So I learned a bit more about setting constants in AngularJS (no day is lost if you learn something!), then got to a point where I had to display said constants.

One of those in question was the pound symbol. It could be &pound; or &#163; or as I found out today from this Special Characters page, there is one other way. The pound can be written like so: \u00A3;

The same thing will apply for other currency symbols, or in fact for any of the other hundreds of symbols on that page that I’ve never seen before!

Site Moved to New Host

After humming and hawing for several months I’ve (finally) decided to move the site over to a new host. Luckily I also do work for the new host, and I know he’s -very- reliable. In fact, one of the best I’ve ever seen. If I have a problem, it gets fixed, no ifs or buts about it.

So for now, the Dreamhost will be used for non-UK sites I host, or for testing purposes. The new host, NinjaHosts, will be my main host from now on.

Thank you for your patience as I move over. You might have also noticed I’m ditching the old theme, it will be changed over the next few days as I get moved in (sounds like a house move?!). Yes, I will be making my own as usual. And yes, the wordpress themes I have created will get a spruce up and fixes to be more current.

Site Work, GRS Signs

After several iterations over the years, GRS Sign Company has had its site updated once more.

This time there is a lot more jQuery in than previous versions, and the general theme, colours and layout is a lot more compact and clearer, not to mention cleaner, than earlier versions of the site.

A lot of SEO has been built into the site (“on”, white hat), which has already started showing proof (aluminium signs: #5, modular signs: #5, engraved signs: #3, as examples). Not to focus on just that but GRS is now embracing social media a lot more with a twitter and facebook accounts linked into the site.

Taking Images, Creating Unordered List

One of the problems with the average user of WordPress is that they might not know how to (or when to) create lists, or when or where to put images in a post. Some themes might require a list to convert into something else via code, for example.

This is the case with Advanced Angling Solutions; the product pages were built ‘on the fly’ and added or removed when needed.

I used the Basic jQuery Slider as the slider creator once the list was created. It’s just a simple <script> tag in the header.

Rather than have a strict regime of how to order a post or page, I used this code to order images in the post:

$(".single a[href$='jpg']").removeAttr("href"); // Don't want the images clickable!
$(".single img.size-full").each(function() {
  $(this).wrapAll("<li class='img'><a href='"+ $(this).attr('src') + "' rel='lightbox'></a></li>");
});
$(".single li.img").wrapAll("<ul class='bjqs'></ul>");

If you want to see this in action, try one of the product pages on Advanced Angling Solutions, the image slider you see is this in action.

Thanks!

Site Work, Advanced Angling Solutions

This has been a site that has had a lot of work over the past few months, tweaking every so often to get pieces to work just right.

Based on the great WordPress CMS, this custom theme is built just for Advanced Angling Solutions, and wholly just for them. Lots of CSS3, HTML5, and jQuery as you might expect. This is a great company too btw, if you’re a carp fisherman. The owner is a fisherman himself, one of the top ones in the country, and he has designed all his own equipment that he sells.

The eCommerce side of the site uses the WP Simple Paypal Shopping Cart plugin, which has been slightly altered to fit the site and work with the design layout. I will also add some more posts on this subject as it works with some jQuery to convert unordered lists into an image slideshow.

NB: The video still appears wonky on some browsers, can anyone verify?