Custom fonts are something that, as a designer, we cherish. Often, we’ll have to dig deeply to find the best font for our designs.

Acquiring the Custom Font

The best format for the custom font is TTF

If you can’t get a TTF variation of your custom font, there’s a number of font converters that’ll do the job for you. I’ve used Free Online Font Converter in the past with some success.

So you need to make sure you’ve added your TTF font file to your project by clicking File >> Add Files…

The font added to my project. I’ve created a Fonts group to keep them organised

Adding the Custom Fonts Array to Your PLIST

You need to ‘activate’ the custom fonts within your Info.plist file.

The key you need to add is called ‘Fonts provided by application‘, or ‘UIAppFonts‘ if you’re viewing via Source Code.

Add the full name of the custom fonts file including the extension to this plist.

Adding the Custom Fonts in the Info.plist – PLIST view

Adding the Custom Fonts in the Info.plist – Source Code view

Including the Custom Font via UIFont

You’re now able to use the custom font as a UIFont in the same way that you’d use any of the system fonts.

[UIFont fontWithName:@"OpenDyslexic-Regular" size:16.0];

It’s great that Apple are finally allowing developers to add additional customisations to their apps, it’s about time!

This is because WordPress can be customised to such a degree that it matches pretty much any requirement exactly; so as a Web Developer, it makes WordPress the perfect CMS. I can hone my skills in a specific CMS, to attain expert status, and I can then use that CMS to serve a huge range of clients.

There are certain tools and skills that I rely heavily on when developing with WordPress, and here I hope to catalogue them for future use, and even for your use throughout your WordPress development.

5: Organisation of Functions and Theme Directory

Arguably the most important aspect of development for large WordPress installations.

Usually, when I’m creating a theme, my first step will be organisation of my theme’s directory. I’ll create an ‘images’ folder to hold all the static, theme images (like company logo, or header banner, or static background), then a ‘scripts’ file where I’ll do the majority of my customisation, and lastly a plugins directory; not plugins in the WordPress sense, but things like JQuery plugins, external WordPress libraries and things of that nature.

This allows me to stay focused from a development point of view. Keeping my assets organised is a big part of my theme development.

I’m a big fan of code cleanliness and my problem with the functions.php file is that it’s just a single file. Sometimes there will be some quite drastic modifications to the internal functions of your template that you’ll find your functions.php file reading in at upwards of 1000 lines. This simply won’t do.

In the ‘scripts’ directory that I mentioned previously, I’ll create different files for different purposes. For example, if I’m working with custom post types and taxonomies, I’ll create a php file specifically for that purpose. I may, by the end of the development journey, have between 4 and 10 of these files in the scripts directory.

My functions.php file will then only hold ‘include’ statements for the specific script files.

The biggest advantage of this, is that if I have to amend a specific function, I’ll know exactly where it is, instead of trawling through hundreds of lines and 50 or so separate functions to find the one I want.

4: Visual Form Builder

Visual Form Builder Screenshot

Visual Form Builder is exactly what it says on the tin, it allows you to visually build forms for quick and easy deployment across your WordPress site. It almost serves as a storage and data collection tool for your installation.

It has a number of features that sets it apart from other form building plugins such as allowing you to select different validation methods on a field by field basis.

One of the main ‘winning’ features of Visual Form Builder is it’s ability to store submissions and allow easy export. This means that contact forms are able to keep a record of submissions, and the CSV export tool allows future analysis of the data.

Download Visual Form Builder for WordPress

3: Toolbox Theme

Toolbox Screenshot

Depending entirely on the complexity of your WordPress installation, it may make more sense to develop onto a base theme by creating a Child Theme. More often than not, I’ll do this based on the Toolbox theme.

This theme provides a semantic baseplate for your own theme development. Usually, with development, whenever I need to customise an aspect of the theme, I’ll copy the file into my child theme and make minor modifications, keeping the semantic mark-up intact.

I always find that themes I’ve developed with the Toolbox parent always fare a little better with regard to SEO. I can develop themes much faster with the aid of Toolbox.

Download the Toolbox Theme for WordPress

2: WordPress SEO by Yoast

I’ve been using this plugin for a while now and it’s so useful and beneficial for websites! Comparing two websites of similar scale, one with and one without the plugin produces some stark results; you’ll see a noted boost in the arrival of visitors from search engines almost immediately.

It’s fully equipped to take you through global website settings (permalink settings, sitemap configuration, registering with Google/Bing/Alexa webmaster tools), right down to allowing you to customise your content on an individual post basis.

I’ve written a post previously about writing content that specifically satisfies the WordPress SEO plugin by Yoast, called Yoast for Writing SEO Friendly Content.

1: Gizburdt’s WordPress Cuztom Helper

The WordPress Cuztom Helper has been a firm addition to my WordPress arsenal for a while now.

Essentially, it streamlines the registration of Custom Post Types, right down to taxonomies and meta boxes in a simple, easy to use manner.

The below code is to register a custom post type without the use of the helper:

register_post_type( 'product',
		array(
			'labels' => array(
				'name' => __( 'Products' ),
				'singular_name' => __( 'Product' )
			),
		'public' => true,
		'has_archive' => true,
		)
	);
register_taxonomy(
		'category',
		'product',
		array(
			'label' => __( 'Category' ),
			'rewrite' => array( 'slug' => 'category' ),
		)
	);

Now with the Helper:

$product = new Cuztom_Post_Type( 'Product', array(
    'has_archive' => true,
));
$product->add_taxonomy('Category', array(
    'rewrite' => array( 'slug' => 'category' )
));

Obviously, this streamlines the process quite a bit, but the magic really comes into effect when you try and add Meta Boxes from the range of custom types that Gizburdt has developed.

You can download and use the helper, and even contribute to it’s development on it’s Github page.

Setting up your Custom Delegate

Here’s the scenario. I want my UITableViewCell subclass to effectively communicate with it’s containing UITableViewController. The intention is that a button within the DocumentTableCell will trigger a modal view controller on UITableViewController, as the DocumentTableCell doesn’t have access to this method. This is a perfect scenario for the use of a delegate.

First of all, I need to define my delegate method within my DocumentTableCell.h:

@protocol DocumentTypeDelegate
- (void)buttonAction;
@end

I also need to create a custom delegate property on this class which makes a reference to the protocol name I just defined:

@property (nonatomic, weak) id <DocumentTypeDelegate> delegate;

Using Your Custom Delegate Method

Once you’ve successfully defined your method, you can add the actual method function to any view controller you want.

In your UITableViewController, ensure you’ve imported your DocumentTableCell.h to the page and also, give the interface declaration the name of your protocol like so:

#import "DocumentTableCell.h"

@interface DocumentTypeViewController : UITableViewController <DocumentTypeDelegate>{

Now, in the corresponding .m file, you need to ensure the delegate is linked up properly. In my case, where I’ve used the DocumentTableCell, I’ve added a reference to the custom delegate property:

DocumentTableCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {
    cell = [[DocumentTableCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier];
}

cell.delegate = self; //this is the important line

Now all I have to do is write the actual function for the method within my uitableviewcontroller implementation file.

- (void)buttonAction{
    NSLog(@"Success");
}

Summary

This is an effective method of controlling communication between several classes. It keeps it all neatly kept and organised.

This isn’t the only method of communicating between classes, there are many different ways that serve different situations – I personally tend to use this one a lot.

Existing ivar '_delegate' for property 'delegate' with assign attribute must be __unsafe_unretained

It’s a quick fix, but it took some digging.

Fixing your Delegate

I had mine declared as a property:

@property (nonatomic, assign) id<SettingsChoiceDelegate>delegate;

Note the ‘nonatomic, assign’ properties.

In order to replicate this functionality (as close as) in ARC, you should use ‘strong’ to make the error miraculously disappear:

@property (nonatomic, strong) id<SettingsChoiceDelegate>delegate;

Credit for solution: Stack Overflow

Go to your permalink settings after you’ve created your custom post type.

Choose Default as your choice.

Save.

Choose your previous setting as your choice.

Save.

Done.

Why does this work?

Basically, whenever a permalink setting is selected it saves to the database. By deselecting your option and re-selecting it in this way, you effectively flush the rewrite rules.

There’s a function in WordPress that does this automatically – flush_rewrite_rules() – however you don’t really want to do this on every page load – if you’re getting 404′s on Permalinks to Custom Post Types then you’ll only need to do it once.

Think of it as a hard-refresh for your permalinks.

I could access the Theme Options page, but I couldn’t reference any Theme Options from my scripts or even from within the Theme Options page – i.e. it wouldn’t save.

I searched for ages to find a solution, digging through my htaccess files and my WordPress Network settings (in my case it was set up as a network of sites), I even tried looking through my server settings and switched to a new server.

I Found A Solution to the Theme Options Debacle

I have to credit Sayontan Sinha on the WordPress forums for this fix.

Basically, Sayontan explained that when Theme Options are entered to the database, they aren’t encoded with the usual key=>value style approach, but more of a type:length:value.

This length variable was the crux of my problem.

Let’s take an example from my database:

s:9:"headerurl";s:58:"http://path/to/old/url/wp-content/uploads/2012/08/logo.png";

s:9: is the length of the string “headerurl”

s:58: is the length of the string “http://path/to/old/url/wp-content/uploads/2012/08/logo.png”

The issue is that when I migrated my database, I did a search for “path/to/old/url” and replaced it with “brand/spanking/new/url”

Now, my problem is that “http://path/to/old/url/wp-content/uploads/2012/08/logo.png” has less characters than “http://brand/spanking/new/url/wp-content/uploads/2012/08/logo.png”

Essentially, what I’m doing is telling my theme that “http://brand/spanking/new/url/wp-content/uploads/2012/08/logo.png” has 58 characters, but it doesn’t, it has 65 characters.

Because ALL theme options of a particular type are stored together, any error causes the whole set of data to become corrupted.

I had to manually update my database so:

s:9:"headerurl";s:65:"http://brand/spanking/new/url/wp-content/uploads/2012/08/logo.png";

Fixed!

You can use the ER Browser app to re-format any page you are viewing with the tap of a button which strips it down to its bare bones.

ER Browser Themes

The ER Browser iPhone and iPad apps come equipped with several themes designed specifically to benefit those with dyslexia and allows you to apply these themes directly to any page on the web. Your browsing experience is no longer limited by specific designs.

Colour Overlay Treatment

Colour overlay testing is a standard, widely accepted way of assisting those with dyslexia or Meares Irlen syndrome. Placing coloured sheets of plastic over reading material and even opticians prescribing coloured lenses has been proven to improve the reading and understanding for those with dyslexia or Meares Irlen syndrome.

The ER Browser allows you to emulate the colour overlay tests by instantly converting any web page to a standard, coloured output. We’ve also taken into account the contrast between background and text colours to hopefully improve reading ability.

The ER Browser can be used to improve the users’ reading ability on any website

User Involvement

The ER Browser is an organic project. We aim to learn from and build upon any comments or features requested by our users. We’re committed to delivering a solution that is user-led, so we’d appreciate learning how we can improve your experience.

Visit the Website and Download it now!

The basics of Theme Options is that you can create an options array to store a certain amount of data, then whilst developing your theme, you can account for these changes.

Adding A Theme Options Menu Item

On a Theme that has Theme Options available, you are able to hover over ‘Appearance’ and see additional entries. Here’s an example:

The menu item doesn’t necessarily have to say Theme Options; the Twenty Ten theme has two options; ‘Header’ and ‘Background’.

The first thing that you need to do is create a ‘theme-options.php’ in your theme directory (it can be named whatever you choose really, but I’ll be using theme-options.php thoughout).
Then at the very top of your functions.php file, add this line.

require_once ( get_stylesheet_directory() . '/theme-options.php' );

This tells your functions.php file to include whatever is in the theme-options.php file. I like to keep the theme options separate for clarity.

Now open theme-options.php and add this:

add_action('admin_menu', 'theme_options_add_menu_item');

function theme_options_menu_item() {
    add_theme_page('Theme Options', 'Theme Options', 'edit_theme_options', 'theme_options', 'theme_options_build_page');
}

The basics of the above area, is creating a function to run on the ‘admin_menu’ pre-defined function.
Within this function we can add our menu item.

In the ‘add_theme_page’ function the arguments are as follows:

• Page Title – this is the full title of the page
• Menu Title – usually the same, but can be an abbreviated version
• Capability – this is for administrative permissions. “edit_theme_options” means that anybody who is allowed to change theme options, can access this menu item.
• Slug – simple, the menu slug.
• Function – the function you wish to execute when the menu is clicked.

We’ll be looking deeper into ‘theme_options_build_page’ soon.

Setting Up the Theme Options array

The theme options array is the way in which your theme options are stored in the database. This impacts how Theme Options are stored, how they’re accessed on the Theme Options page and how they’re accessed through the front-end.

We need to add another action now, but this time we want to attach a function to the ‘admin_init’ action – so it runs automatically when admin pages are accessed.

add_action('admin_init', 'theme_options_init');

function theme_options_init() {
    register_setting('my_options', 'my_theme_options', 'theme_options_validate');
}

Normally, when you register a setting, you do it on an individual option by option basis. However, I prefer to create all options under an array, so I can access them all with one call if I want to.

In the ‘register_setting’ function the arguments are as follows:

• Group Name – this is what you’re calling your options. You give them a unique name so you can make multiple groups if necessary
• Options Name – this is the name of your option. In my case, the name of the array
• Sanitise Function – this is a function you will create (or utilise) to prepare your data for database submission. More information on sanitisation.

I’ve created a function to sanitise the Theme Options data.
This function will be specific to whatever options you choose to make available, but I’ll add mine to the end of this post so you can see how I’ve handled it.

At this stage, we can access a ‘Theme Options’ menu item and modify a ‘my_theme_options’ array which will hold all my data.

The Theme Options Form

We now add a HTML form to the ‘theme_options_build_page’ that we mentioned earlier.

This HTML form will allow our admin user to directly access the variables we want them to.

function theme_options_build_page() {

}

Everything contained in the above function will be executed when our menu item ‘Theme Options’ is pressed.

We can create any sort of HTML form here, though I like to keep it matching the familiar WordPress feel, so I like to use their pre-defined elements.

if (!isset($_REQUEST['settings-updated']))
    $_REQUEST['settings-updated'] = false;
?>
<div class="wrap">
    <?php
    screen_icon();
    echo "<h2>" . get_current_theme() . 'Theme Options' . "</h2>";
    ?>

    <?php if (false !== $_REQUEST['settings-updated']) : ?>
        <div class="updated fade"><p><strong><?php echo 'Options saved'; ?></strong></p></div>
    <?php endif; ?>

    [FORM GOES HERE]
</div>

Above is the initial setup for the form. First we need to access a variable called settings-updated which is the variable that WordPress uses to generate the neat little ‘Options Saved’ message boxes.

The above code  opens a div called “wrap” which is styled by WordPress, and places into it a page title, ‘settings updated’ div (also styled by WordPress) and your form.

I want to allow two changes, a ‘Primary Colour’ and a ‘Header URL’.

Here is my form:

<form method="post" action="options.php">

            <?php settings_fields('my_options'); ?>
            <?php $options = get_option('my_theme_options'); ?>

            <table class="form-table">

                <tr valign="top">
                    <th scope="row"><?php echo 'Primary Colour'; ?></th>
                    <td>
                        <input id="my_theme_options[primarycolor]" class="regular-text" type="text" name="my_theme_options[primarycolor]" value="<?php esc_attr_e($options['primarycolor']); ?>" />
                    </td>
                </tr>

                <tr valign="top">
                    <th scope="row">Upload Header Logo</th>
                    <td>
                        <input id="my_theme_options[headerurl]" type="text" size="36" name="my_theme_options[headerurl]" value="<?php esc_attr_e($options['headerurl']); ?>" />
                    </td>
                </tr>
            </table>
            <p class="submit">
                <input type="submit" class="button-primary" value="<?php _e('Save Options', 'a1theme'); ?>" />
            </p>
        </form>

Open the form with the action ‘options.php’ this ensures that all options are submitted to the wp-admin file ‘options.php’ – no further action required by us. That pre-existing file handles it all.

All classes and formatting, I tried to emulate from WordPress’ own forms, just to keep it all consistent and familiar.

The main lines of note are the options setting fields (below).
They allow the form to connect to the database of options.

<?php settings_fields('my_options'); ?>
<?php $options = get_option('my_theme_options'); ?>

After adding the form, you should successfully be able to access the Theme Options page, and view/edit/update the options you’ve defined (ensure you’ve added the sanitisation function at the bottom of the page to clean the output for database submission).

Doing Something with our Theme Options

In my header.php file, I would like to add my header image and define some additional styles, to include the primary colour option.

The first line I add at the top, tells the file to read the options we set up earlier. From this point we can access the variables directly.

$options = get_option('my_theme_options');

Now, I can add some CSS styles to take advantage of the output.
Underneath the wp_head(); declaration, I can add a style tag:

<style>
#branding{
    background:url('<?php echo $options['headerurl']; ?>');
}
h1, h2, h3 {
    color: <?php echo $options['primarycolor']; ?>;
}
</style>

I inject PHP directly into the HTML/CSS Style declaration. Now the primarycolor variable, we set earlier, affects the header tags and the branding  div on our page has a background image of the headerurl variable.

Sanitisation Function

function theme_options_validate($input) {

    // Say our text option must be safe text with no HTML tags
    $input['primarycolor'] = wp_filter_nohtml_kses($input['primarycolor']);
    $input['headerurl'] = wp_filter_nohtml_kses($input['headerurl']);

    return $input;
}

Now, the user can use Theme Options to define a primary colour for the headers and add a url for an image to their header.

Hopefully, now you know the basics, you’ll be able to experiment and build upon it!

Adobe has been the victim of some criticism lately, namely at the hands of the late Steve Jobs, who refused to support Adobe Flash on Apple’s iPhone and iPad products. This meant that Adobe had to come up with something good which allowed them to stay at the top of the food chain with regard to industry software – Adobe Edge is their answer.

My only issue is that Adobe Edge still a little raw (to be expected from preview level software), and there’s a distinct lack of Adobe Edge Documentation for me to gain insight from. Most of what I know of Adobe Edge is based upon self-teaching and youtube videos.

I’m not going to talk about creating animations in Adobe Edge, because I didn’t feel I had any trouble with that side of things; but I am going to speak about what to do after these animations have been exported.

Prior to Exporting your Adobe Edge Animation

Here are some guidelines I came up with to ensure your animation is ready for the web. Much of this will be automatic (I hope) in the full release of Adobe Edge, but at present, it’s a manual task.

1. Ensure there are no spaces in any of the asset names – this prevents some browsers ‘missing out’ some assets
2. Ensure you have named your file appropriately – again no spaces
3. Ensure you have named your composition ID – this helps when managing each animation through CSS, it prevents names like EDGE-26107024
4. Ensure you have applied a poster image to the ‘Down-level Stage’ – this stage is what’s displayed to those without the capability to play the animation

Ensure all these items are looked at before saving the document and you’ll have a much easier time of implementing the Adobe Edge animation.

Embedding an Adobe Edge Animation

Once an Adobe Edge animation has been exported, you’ll find several important files.

• A pre-loader file
• An Actions File
• An animation File
• a HTML file
• an Image directory
• an includes directory

The easiest way to embed an animation is by opening the html file, taking the javascript path from the head and the ‘stage’ div from the body and copying it over to your own web-page.

The javascript file declares the pre-loader and the pre-loader declares all the other files, simple.

Note: NAME YOUR STAGE ID
This is essential for multiple animations, with IDs that clash between the animations, you’ll find that only one of them plays at any one time.

Speaking of multiple animations, you’ll only ever need a single ‘edge_includes’ directory, because

<div id="appropriate-stage-id" class="animation-name">
</div>

The animation should play provided all your paths are how Adobe Edge wants you to have your paths, but this is never the case… Read on.

Inconsistent Paths

I was adding my animations to a fairly large website with a strict structure. I couldn’t drop the animations in the root, as Adobe Edge had expected, so none of my assets linked.

I edited the Preloader and Animation file to give relative paths to the resources and updated my pre-loader declaration in my html file but this only worked for pages on this level of navigation. i.e. the animation worked on ‘/’ but not on ‘/about-us/’ because it was trying to read the files from ‘/about-us/animations/’ instead of ‘/animations/’

I had to first modify my ‘animation_edgePreload.js’ file and add a variable declaration to the ‘root’ of my website to the top of the file.

var rt = '/';

At the bottom of the file, you’ll see a path location for each of the other important inclusions. I modified it as so:

aLoader = [
    { load: rt+"animations/edge_includes/jquery-1.7.1.min.js"},
    { load: rt+"animations/edge_includes/jquery.easing.1.3.js"},
    { load: rt+"animations/edge_includes/edge.0.1.6.min.js"},
        {test: !hasJSON, yep:rt+"animations/edge_includes/json2_min.js"},
          { load: rt+"animations/my-animation/animation_edge.js"},
          { load: rt+"animations/my-animation/animation_edgeActions.js"}];

And even closer to the bottom:

dlContent={
   dom: [
   {
      rect: [0,0,720,85],
      id: 'Poster',
      fill: ['rgba(0,0,0,0)',rt+'animations/my-animation/images/Poster.png'],
      type: 'image',
      tag: ''
   }]};//simpleContent

The preceding ‘/’ that I’d earlier declared always points to the root of my website. If I wanted to store my animations elsewhere, I could modify this line and it should propagate across the file and make the correct linkages.

This should ensure that I have all the included files in the correct locations.

Now for the images.

In the ‘animation_edge.js’ file, you’ll need to modify the top line to point to the correct images directory. Precede it with a ‘/’ again to ensure it points from the root, because relative paths in Adobe Edge are shockingly bad at being consistent.

var im='/animations/my-animation/images/';

Also, I’ve noticed that if you’ve used any assets in symbols you’ll need to edit these separately because the ‘im’ variable isn’t applied to them. You’ll need to do this manually in each case:

dom: [
   {
      transform: [[10]],
      id: 'image',
      type: 'image',
      rect: [-10,0,752,83],
      fill: ['rgba(0,0,0,0)',im+'image.png'] //originally was fill: ['rgba(0,0,0,0)','images/image.png']
   },

Embedding Animations with WordPress

The most difficult part about embedding Adobe Edge animations in WordPress is staying true to the file structure. Everything else should be quite easy.

Instead of linking the pre-loader file with a html script declaration, consider using ‘wp_enqueue_script’ instead. This is always a safer way to manage script inclusions:

wp_enqueue_script('animation', home_url() . '/animations/my-animation/animastion_edgePreload.js');

The future of Adobe Edge

Hopefully, the next stage in Adobe Edge should include a much more comprehensive pathing system, so to eliminate all this manual effort, and hopefully management of assets should be tightened up.

All in all, this software is very comprehensive and allows you to achieve a great deal with your animations. One or two little issues are bringing it down, but hey, it’s a preview version so Adobe are forgiven!

Yoast is the highly informative website of SEO Specialist Joost de Valk. Since I began using this plugin, the ‘Yoast’ marque gives me a feeling of superior quality and knowledge.

Yoast’s Green Lighting

The above image is the fabled Yoast ‘Green Light’. It means your page has the maximum SEO impact.
Attaining this Green Light often means rewriting or re-wording your content. The Yoast SEO Plugin will watch, and advise you on the best choices for your content.

The Google Description

A ‘WordPress SEO by Yoast’ metabox sits on the post editing page. The General tab concerns how your website appears in Search Results. To begin analysing your content for this, you must first define a ‘Focus Keyword’.

The Focus Keyword of your article is a keyword that gives your post ‘context’. The keyword for this article is ‘Yoast’, and it allows the reader to immediately know which plugin I’m reviewing. It’s apparent, by the search listing what this article is about.

It’s clear that I’ve used the Focus Keyword where advised. This allows people to know exactly what my article is about.

You may decide to re-word any of the options to best represent the content contained within.

Reword the heading if your ‘chars left’ value shows a minus. Try to stay within the character limit, so no part of the article’s context is hidden by ellipses. (…)

Yoast’s Page Analysis Tab

The Yoast Page Analysis tab is really where the magic happens.

Not all of criteria here will be immediately relevant to your page. However, every effort should be made to get a ‘Green Light’.

Above, you can see, I need to work on my readability.
The Flesch Score needs improvement.

The Flesch score concerns sentence size. it’s better to have less words per sentence.
This doesn’t mean just unnecessarily punctuating, but rather writing your sentences to be more concise in their representative structure. Say more, with less words.
Sometimes, it’s best to really analyse what you want to say in each sentence/paragraph.

Consider your audience against the below table to gauge your score.

These guidelines want you to really look at your content, and suggests methods for improvement. Using the keyword regularly, adding properly marked images, outbound links, word limit; all contribute to a higher SEO impact.

So, reaching the end of this article, it’s now become my job to review and improve. Back to the top…

WordPress SEO by Yoast.