Michael Gunner

Michael Gunner

© 2014 Michael Gunner. All rights reserved.

Author Archives: Michael Gunner

  1. Using PHP to fix database irregularities

    Leave a Comment

    We often have to use databases in our projects, and sometimes these databases have been sourced from elsewhere. The problem we often find is that these databases can be incomplete,  missing information, or not formatted how we want.

    Let’s say for example that you’re pulling strings out of a database, but some of them are missing a word that for some reason or another, is critical to our application. There are ways to comb through databases to fix these issues, but if for some reason you can’t get that working, you can always use PHP.

    You can use either stripos or strpos to check for missing words from a string. The difference is stripos is non case sensitive, whereas strpos is case sensitive. Simply replace “word” above with the word you are looking for. The script will then check the first value of the string for the presence of the word, and if it is missing it adds it in. If you need to check a different value in your string just change the parameter. For example, to check the second value, use [1] instead of [0].

  2. Use WordPress get_template_directory function in external JavaScript

    1 Comment

    Here’s a useful snippet. If you develop for WordPress, you’ve probably found you either have to hard code URLs in your external JavaScript…or put the JavaScript in line. Neither of these is ideal because the first won’t work when the theme is installed on a different URL, and the second will make your header look bloated and possibly slow your site down. It’s just not good practice to have JavaScript in line.

    But there is a way, and it’s very simple. First, you need to declare a JavaScript variable in your Head.

    Make sure this is before your external JavaScript. Now, where you need to echo that function in your script, you simply echo the variable instead. E.g:

    If you ever find yourself needing to use other WordPress theme functions in your Javascript, there’s no reason you couldn’t use the same principle with other functions.

  3. New Website

    Leave a Comment

    I have just updated my website with a new design. I hope you like it! It is, as expected, fully responsive, so by all means do enjoy visiting on your mobile or tablet.

  4. Elliptical Rounded Corners CSS3 Browser Support

    Leave a Comment

    So you want rounded corners, but you don’t want them perfectly round. Seeing perfectly rounded corners everywhere looks almost as rigid as plain ole’ square boxes can. But if you didn’t know already, you will now – you can do elliptical rounding in CSS. You simply specify two values, the horizontal radius and the vertical radius.

    Unfortunately, each browser engine decided on different ways of interpreting these values, leading to some seriously bloated code, which is probably why you haven’t seen much about it. The good news is the code has got simpler, and updates to Firefox, Chrome and IE means the latest versions of these browsers (and IE9) don’t need vendor prefixes and use the same standardized syntax.

    Old Code

    Short-hand old code (FF)

    Argh. What a mess! But now we can settle with just the following.

    New Code (Chrome, FF, IE9+)

    As I say though, this is with the latest versions of these browsers so if you’re concerned about users stuck on old versions of FF and Chrome you may want the prefixes anyway. And of course as you’d expect, there’s no IE8 or below support. I also can’t get my copy of Opera working so if you’re bothered about Opera support you’ll have to test that for yourself! Here’s the Codepen: http://codepen.io/anon/pen/hyErL

  5. MailChimp API cURL

    Leave a Comment

    Please note, this article assumes you have a basic understanding of PHP.

    If you’re looking to integrate MailChimp subscription into an existing web form you’ve written yourself in HTML and PHP, hopefully this will help. Firstly, make sure you have a list setup in MailChimp for addresses to be added to. Also make sure when you set up the list, you add the relevant “Merge” tags you need. Examples include first name, last name, address etc.

    We’re going to use the cURL method, which I find is the easiest. We’re essentially using cURL to send the information we want to MailChimps servers.

     

    1. In your Mailchimp account, sign up for an API key and note it down.
    2. Go into your list settings, at the bottom is a unique ID. Note it down too.

     

    In this example, I’m assuming your form script has something like this going on:

     

     

    In other words, assuming the information validates, we’re then displaying a page that confirms the submission. We ideally only want to fire off our MailChimp request after we have sent the form, so we’re going to place the MailChimp code inside our success statement.

    The code above also checks a check box we have in our form that allows the person submitting the form to choose whether they subscribe or not. So they only get added if they want to be. The id of the checkbox in this example is “Subscription” but yours may be different, so change it as appropriate.

    If you are asking for peoples names in one field, rather than separate first/last name fields, use PHP’s explode function to split the name, you can also write it to exclude middle names etc.

    Replace the API-KEY and LIST-ID with your relevant information. You’ll also need to setup your MERGE tags. In this example, I have two tags for “FNAME” and “LNAME”. If you have the same tags you can leave the code, but if you have different tags or need to add more, what you need to do first is add them to the array at the top. When you have done that, you can add them to the URL.

    Place that in the URL (after the other Merge tags). Then you reference your array after the URL, using:

    That should basically be it. It took me a lot of trial and error to get this all right, as I’m not a PHP developer, but if you use this code it should be fairly straightforward for you to setup.

  6. Expanding Excerpts the non-Ajax way

    Leave a Comment

    A lot of blogs have this feature whereby posts are listed as Excerpts, the full post can then be dynamically loaded by the user. If your full post is still only text and small images, then I feel AJAX is overkill as loading this content on page load is not likely to slow the site down significantly, and whilst AJAX is great, it can be annoying for the user to have to wait for the content to be fetched and loaded.

    Click here to see the result

  7. Pass multiple values from one option through the WordPress Settings API

    Leave a Comment

    What happens if you want to pass multiple values through the WordPress settings API with the user only making one selection? Just because the user selects a single option, it doesn’t always mean you only want to pass one value. For example, when adding Google Fonts to my WordPress dashboard plugin, I encountered a problem. For fonts comprising two words, Open Sans being an example, the font name would be passed with a + sign between the two words in the URL. So for the font to load, the value needed to be Open+Sans.

    But of course, the font-family name is without the +, and you can’t change the font-family name when using Google Fonts. Essentially, I needed the user to be able to choose “Open Sans”, but two values be passed – Open Sans and Open+Sans.

    So how do you do this? If you know PHP you’ll already know how more than likely, and it basically involves the explode command. First, put both values in your Option value field, separated by a comma, or whatever delimeter you prefer. Because you’ll want the selected option to be displayed, make sure you amend your IF statement to include the whole array.

    Second, when you pull through your Option value, you’ll then need to separate the values so you can use them separately – this is where explode comes in handy.

    We can then pass the variables separately, using $url[0] and $url[1].

    The numbers represent which value in the array you want to pass. If you need to use large arrays, this is fine, just change the numbers to reflect the values you want. For example, if you have six values in your array, and you only want the fourth, use [4].

  8. Proposed responsive images syntax

    Leave a Comment

    Here’s the current proposal:

    However, the W3C community group suggests this instead:

    My initial thoughts are this. The first proposal is much shorter, it would also be easy to update existing sites without adding syntax. However, myself and others in the comments section find the “set” tag is quite confusing, as is the markup for adding the responsive images.

    The second suggestion seems to be garnering greater support from stalwarts such as Chris Coyier. However, I also have reservations regarding this.

    The first is that it’s a complete replacement of the img tag. This is going to make updating existing websites a bit of a chore, to the point you may not bother. The second is that it’s a fair amount of code. I can see what were previously simple image galleries becoming incredibly bloated with code. This brings about the question, how badly will the extra code bloat counter-effect the file size savings of serving responsive images? I suspect not much, but it’s still a point to be considered. I also dislike the source tag, it basically means the syntax reads out as “source source”. Way too saucy for my liking.

    Now, here’s my suggestion, were it to be my decision.

    Why is this better? For a start, it would make updating old code a breeze as all you’d have to do is a find and replace on your img tags, replacing them with “picture”. The src attribute inside the picture tag would be the default image to display. This means your initial code, and non-responsive code, could be like this:

    You then just add in your extra responsive images as you wish. I also replaced “source” with “media”. To me, “media source” makes a hell of a lot more sense than “source source”. This code also works better because the picture tag isn’t just serving as a wrapper. We should be moving away from adding extra tags to “wrap”, by giving the picture tag default functionality it becomes more useful, easier to replace your img tags, and the code is less bloated.

    There is probably some gaping obvious reason why my idea is nonsense and couldn’t work, but it’s just a thought.

  9. How to move your WordPress website

    4 Comments

    1 Using FTP, download all your files. This includes your wp-admin, wp-includes, wp-content folders as well as everything in the root.

    2 Login to your phpMyadmin. Download an export of your database.

    3 Upload all your files via FTP to your new hosting.

    4 Login to phpMyadmin on your new hosting. Import your database. If your database is too big, you have two options to try. First, ask your hosting provider to temporarily increase your PHP upload file size limit. Secondly, you can split your database, importing it in sections.

    5 Open up your wp-config.php file. Change your old database details to the new ones. Upload.

    If you are not changing your domain name, all you now need to do is point your domain to your new hosting. If you are changing your domain name, read on.

    6 Upload Eris’s migrate script and run it according to the instructions found here.

    This how to was written with help from Renaissance Design and Miniman Web Design.