Before & After Photos Using the WordPress Shortcode UI

A while ago I came across the excellent plugin for WordPress, comically named Shortcake. Shortcake is a UI for WordPress shortcodes which makes using shortcodes in your content much easier. Recently I worked on a project that required the client to add before and after photos. The solution was shortcodes and thanks to Shortcake it was a whole lot easier. Here is how I went about it.

If you want to learn more about how Shortcake works and what it does I would check our the plugin on WordPress.org as well as heading over to the Github repo. Essentially it means that when dealing with adding shortcodes a user never needs to actually type out code in the editor, they are presented with a more intuitive UI in the add media popup.

First of all I registered my shortcode in the normal way that I would do with any other shortcode, using the add_shortcode hook built into WordPress core.

The above code adds a shortcode with two attributes. These are the before image and the after image and it expects and attachment ID for each. Therefore without using the Shortcode UI plugin we could now add a shortcode to our content like so:

[before_after_image before_image="100" after_image="101"]

On the front end of the site this would output the two images one above the other. I then needed some styles and some jQuery in order to make the before image show first, and the after image only show when a toggle button was clicked. The following jQuery handled the toggling of before and after images:

Perfect, this now outputs the following on the front end (there are some styles needed here of course!).

Front-end output of a before and after image
Front-end output of a before and after image

The problem of course without using the Shortcode UI plugin is that the user has to know the attachment ID and also type the shortcode into the editor. Well that is what the Shortcode UI plugin handles for you.

In order to get this working make sure you have the Shortcode UI plugin active and then you need to register your shortcode with the Shortcode UI plugin. In the case of this shortcode it was done with the following code:

Just those few lines of code allow us to create a better UI for adding the shortcode. In order to add a before after image, we can now click on the Add Media button, and choose Insert Post Element from the list on the left. On the screen are now all the shortcodes that registered shown with their chosen Dashicon. Clicking that displays a simple UI showing the fields you registered for adding the shortcode.

Adding a Before and After Using the Shortcode UI Plugin
Adding a Before and After Using the Shortcode UI Plugin

As you can see the above interface is much much better than typing out a shortcode in the editor! Not only that, but once you click insert element, the user never even sees the shortcode (as long as they stay in the visual editor) as the plugin handles the TinyMCE view too! You will need some styling in your editor-style.css file.

So there you have it a before and after image shortcode – super charged with a Shortcode UI! I believe that you can also register the javascript to work in the TinyMCE window as well so that it would act the same in there as it does on the front end. This is something I am still investigating.

WordCamp London 2015 Lightning Talk

Right now I am recovering from WordCamp London. I say recovering in a positive way as the event was outstanding. On the Sunday I was privileged to be able to give a lightning talk in the developer track in front of what seemed like 300 people or so.

My talk was about a plugin that I developed which I have called WP Post Type Meta, which essentially enables you to store data associated with a post type, rather than individual posts. I use this data on post type archive pages for titles and opening paragraphs etc.

My slides for this talk are below:

I believe the video for this talk will appear on WordPress.tv in the near future and therefore once it does I will post it here.

You can view/download the plugin on the WordPress plugin repository here or you can contribute on github here.

Using the WordPress Admin for Lead Generation

If you are like me then you spend a lot of your day navigating around the WordPress admin, looking at the admin screens to carry out different tasks. For the right type of client, they probably spend a lot of time in there too. Therefore I thought it was a good idea to try and use the WordPress admin as a little marketing opportunity. Here is how I went about it.

This all started out with me asking the question of how can I get across to current clients the other work and services that I could offer them. My website is not great, it is just a blog (something which I need to work on!) but usually you would list your service and products on your site. However it is probable that current clients don’t really visit your website that often, after all they already have a relationship with you and contact you in other ways.

Therefore I wanted to explore ways in which I could get this information across to clients. I started to think what is the one place that I have access to add content too, which all my clients see on a regular basis. I have clients that spend much of their days in the WordPress admin, managing their sites content to generate them leads and therefore I thought that I could use the admin in some way to engage clients with new content and services from me.

For a while now I have been using a plugin I wrote called WP Basis to make some changes to the WordPress admin screens in order to make the experience easier for clients to use. The plugin takes away some of the unwanted stuff such as menus and meta boxes that are not used and would just confuse the client. However one thing that it did do was to provide a different dashboard screen for clients, rather than the complicated default dashboard.

The default WordPress Dashboard Screen can be a little complicated at first glance.
The default WordPress Dashboard Screen can be a little complicated at first glance.

With this in mind I went about altering this dashboard screen the client sees to include some additional information. The following assumes that you already have a plugin that adds a custom dashboard page for your clients. If you need a little more help with this take a look at how I have done this with the WP Basis plugin on Github.

The approach I decided on was to use tabs. I wanted to make the dashboard feel as native a possible, fitting in with other WordPress admin styles etc. There is already a tabbed section on the WordPress About page. This is the page you are directed to when you have upgraded to the latest version and therefore it seemed logical to use the same approach.

The WordPress About page already contains a series of tabs.
The WordPress About page already contains a series of tabs.

I added the following function to output the content of the new dashboard page.

The above code adds the welcome tab and I have made this code extensible so that I can add tabs in the future using other plugins to show other things. The tabs work in that you declare a tab and a tab name using a filter and then you do the same declaring the callback function for the tabs content. You then create a function with the same name as your callback in order to show whatever content you like here.

Making it extensible means that I can use the base plugin on all sites (WP Basis) and then add other plugins which add tabs and tab contents to the client dashboard. Below is an example of a tab that was added to one site – this actually advertised services for another agency as it was a site built by me for them! Each linked through to their website with information about the service.

An example of a tab added to provide information about other services.
An example of a tab added to provide information about other services.

This is very much work in progress and I have lots of ideas for other content to appear on the dashboard of clients. Some ideas are below:

  • Use RSS to grab the latest blog posts and display them on the dashboard
  • Show latest offers and promotions. Again this could done using an RSS feed from another WordPress site which would automate this.
  • Videos of how to use the site
  • Contact form for support, which creates a ticket on your support system

What do you think? I would love to get some feedback on the ideas here.

My Development Toolbox

Over time we all tend to build up a number of apps, programs and other bits of software and tools that we like to help us along, doing various jobs. Without them we would feel lost and therefore here is a list of the tools in my toolbox that I use when building WordPress websites.

The list below is in no particular order of importance, just what came to my mind at the time!

1. Safari

I guess this is the software that I use most on my Macbook Pro. It is one of those pieces of software that you forget about really as it is always open. Previously I favoured Chrome (it is still great) but since the web developer tools were improved in Safari I have gone back to using it. I like the integration of bookmarks and browser history across iOS devices too.

2. Coda 2

This has been my text editor of choice for a few years now. Initially I liked the FTP capabilities it had but as I have now moved on in development terms to using version control and deployment tools I rarely use these. There seems to be other (better?) ones out there but I have no problems with Coda and therefore have stuck with it for now.

3. Terminal

Until recently I have been a bit of a command line novice. In fact I would still say I am a novice but I have started using it much more when working with Git. Also as a I now have a number of WordPress plugin on the WordPress.org plugin repository I have had to get used to committing my plugins etc. using SVN through the terminal.

4. DeployHQ

As I have mentioned above, over the last 18 months or so I have moved over to deployment tools rather than relying on FTP. When doing this I researched which deployment tool to use and came across DeployHQ. I like it because I can deploy to multiple server or even server groups and it has good integrations with things like Slack which allow me to get notified when deployments have been made.

As well as this I can have committed code automatically deployed to staging or live when a commit to the repository is made. This is something that I need to refine further but certainly something I am going to look into soon.

5. GIT – Github and Bitbucket

All the WordPress websites I build I do so under version control. My choice for this is GIT and I tend to use either Github or Bitbucket (more recently) in order to have a central repository of code.

I use the Github for Mac app in order to avoid the command line as much as possible and this works for both Github and Bitbucket repositories. How I ever developed sites without having them under version control I will never know!

6. MAMP

For local development I use MAMP. Instead of investing the small sum in MAMP Pro I use the Virtual Hosts capability in MAMP in order to create local domains for developing sites on e.g. domain.dev.

Although there are other options out there at the moment, most notably Vagrant and Virtual Box, I like how MAMP works and at the moment it does the job for me and therefore I am loathe to change at this point.

7. Gas Mask

This is great little app for managing and editing your computer hosts file. This allows me to easily setup local domain names, integrating with virtual hosts.

It even allows you to have multiple hosts files and you can then switch between then when you are developing.

8. 1Password

If you are not using a password manager these days to keep all your passwords nice and strong (the longer the better here!) then I would highly recommend you do so. There are a few out there and I have been using 1Password for a while. It has mobile apps to so you always have your passwords on hand.

9. SASS

Only in the last 6 months have I started having a go with SASS. It was only when I found CodeKit (see below) that I started the experiment with SASS. It allows me to keep my CSS much more organised in a project.

10. CodeKit

Codekit is a great little app that makes compiling files such as SASS files into CSS and compressing Javascript files into minified version a doddle. Something that I found a little daunting to get those things automated has been solved brilliantly with CodeKit.

11. Toggl

As I often work with other teams on projects it is important that I track my time. Toggle has a useful desktop App that I can use to track my time and assign this to projects and clients. It also allows me to create reports on a per project or per client basis.

I also make extensive use of Slack, Skype and the usual Adobe Creative Suite etc. What do you use?

User Switching in the Admin Bar – Updated to V1.0

A while ago I released a the Admin Bar User Swtiching plugin which was a dependancy of John Blackbourn‘s excellent User Switching plugin. After some community feedback I needed to make some changes. Therefore I am pleased to release version 1.0.

A number of users left feedback and support requests on the WordPress.org support forums. The main issue, which I actually already knew about and stated in the plugin readme.txt file was that the plugin was potentially quite resource hungry.

In order to build the “Switch to” links in the admin bar the plugin was querying all the sites users on every page load which was OK for sites with a low number of users but not great for sites with hundreds or even thousands of users. Therefore some changes needed to be made.

One support forum post outlined the following:

Had to manually remove Plugin as it consumed all available memory and killed the frontend & WP Admin. Consider adding an AJAX search instead of full hover list (site has 80,000+ users) :)

Therefore I had to go about solving this issue and started down the path suggested by the commenter. This was interesting for me and I had not really used the WordPress AJAX method before and therefore found it very interesting.

Anyway after about 3 – 4 hours of Dev time I finally have version 1.0 of the Admin Bar User Switching plugin which, instead of listing all users in the admin bar dropdown, displays a search box so users can type a username (including the use of a wildcard). On submitting this search a list of users is presented and when clicked you are switched to that user.

The benefit here is that no queries are being run on every page load, only when a user runs a search for a specific user.

I hope this brings significant performance benefits to the plugin and allows sites with many users to take advantage of the plugin.

Disable WordPress Auto Update on Production Server

Previously I have spoken about my WordPress development and deployment setup using a service such as Deployhq, but lately I ran into a minor problem with this setup. The issue was the live site was being updated without the repo in Git being touched. Here is what I needed to do to solve the problem.

This has all come about since the brilliant auto-update feature of WordPress was introduced (I think in version 3.7). This means that your site will auto update itself for minor point releases (e.g. from 4.1 to 4.1.1 but not from 4.1 to 4.2). However, if like me you have the site under version control then you do not want this to happen as you need to manage the repository.

The WordPress team already thought of this as a problem and came up with a good solution. WordPress detects whether your site is using version control by looking for .git, .svn and other version control files in your site. If it finds these then of course the auto update is not set to run.

If you have a setup whereby you are pulling a Git repository to your server then those .git files will also exist on the server. However I use a different setup using a deployment service to deploy the files from the repository (usually on Github or Bitbucket) to the server. This means that those version control files (.git etc.) never get pushed to the server. Therefore the instance of WordPress on the live server (and staging for that matter) gets auto updated for point releases.

I needed to stop this happening or the live and staging sites would be ‘out of sync’ with the local sites developers are working on. Luckily there is a constant you can use in your wp-config.php file to prevent core from updating, period. Add the following to your wp-config.php file and it will prevent WordPress from auto-updating core.

define( 'WP_AUTO_UPDATE_CORE', false );

Now I am in control of when the updates are run and when WordPress gets updated to the latest and greatest version. Something which is important when you site is under version control.

Extending The WordPress Options Framework Plugin

Extensible plugins are a topic that I enjoy to speak about and I love it when I come across a plugin that is extensible. The options framework, a plugin which I have recently defaulted to for providing a ‘Site Options’ page in WordPress projects has many extensible features allowing me to customise the plugin so it is tailored to my clients. Here is how I have recently utilised some of its extensibility features.

In case you are not familiar with the term extensible plugins let me briefly outline what is meant by this. WordPress core utilises these features too, in fact it is what allows the plugin architecture to exist.

An extensible plugin is one that can be modified and extended upon without altering the core plugin code itself.

This has many benefits, but perhaps the best is that when you update the plugin your modifications are not lost.

Below are the modifications using extensibility features that I have made use of with the Options Framework plugin.

The Options Menu Item

By default the Options Framework plugin provides you with an admin sub menu labelled ‘Theme Options’ underneath the parent menu item of Appearance. If you are building a WordPress theme to be sold or to go into the WordPress theme repository this name makes sense. However when you are building a site for clients, theme options makes little sense to them. Lets face it, most of my clients don’t know what a WordPress theme is, and why should they? Therefore I wanted to be able to change this name and its location within the admin menu.

The Options Framework plugin provides all the extensibility features needed in order to do this. The plugin uses a filter named optionsframework_menu. This filter can be used to alter all of the menu parameters such as the menu name, position, page title and more. You will find that the plugin adds its menu using the code here – https://github.com/devinsays/options-framework-theme/blob/34c286996d387a29cb7871cfc2c8fdc09f03e5ca/inc/includes/class-options-framework-admin.php#L83-L104

Before sending the menu information to WordPress, it is passed through a filter named optionsframework_menu which allows us developers to alter the menu settings to change the way in which the menu is outputted. I used the code below in order to change the menu label, its position (make it appear below Settings) and make it is a top level parent menu item rather than being a child of Appearance.

Customise the Options Name

By default the plugin uses your themes stylesheet as the prefix for all of the options stored in the options table. However you can change this should you wish to do so using another handy extensibility feature. This is where you can overwrite one of the functions in the plugin with your own. The code below would change the name of the options to wpmark_options.

All of your saved options would now be stored in the options table as an array in an option with the name wpmark_options.

To go hand in hand with this you can then create your own function to get those options to use in your theme. The following function does this:

Theme Independent Option Declarations

By default the plugin looks for a file in your theme named options.php. This file then contains all of the options for your site. However I wanted to keep the options separate from my theme in case I changed themes and still wanted access to the options.

Again the plugins extensible features allow you to do this too. You can use the of_options filter to do this, like so.

I hope this goes to show that extensible plugins are the best! Thanks to Devin Price for building a wonderful extensible WordPress plugin.

WP Broadbean v2.0 Coming Soon

My WP Broadbean plugin to integrate jobs posted via Broadbean Adcourier has been a success in the recent months with many different recruitment companies using the plugin to get jobs they post on Broadbean to appear on their WordPress websites. Now it is time to take the plugin to the next level and coming soon with be the second version of the plugin with updates and enhancements. Lets take a look at what is planned.

Having been working on the plugin for well over 18 months now, in my spare time between projects and with a number of clients using the plugin I have learnt a lot about what changes would enhance the plugin. Here are what is planned in the new release:

Improved Extensibility

This is something that I am passionate about in plugins. The ability for a developer to make modifications and functionality changes without altering the core plugin code itself. In the next release there will be major extensibility offerings, some of which are outlined below.

Better Declaration of Fields for Each Job

At the moment the plugin comes with a set of job fields that are added when each job is published on the site. These include job reference, salary, contact name and email address etc. Adding your own fields up until now has been a little tricky to do and therefore the new version will easily allow you to declare what fields you want (additional) to the defaults. As well as this you can remove the defaults should you wish to do so.

Below is a simple example of how you could add your own fields to a job:

This will add the meta box field on the post editor for the job. Perhaps the best part as well is that it will also handle all of the saving of the post meta when the job gets saved.

It is worth noting here that this field would have to be added to your feed sent by Broadbean. They can do this as support and would not be a problem. In this case we would just need to request that an additional text input field be sent with the XML node <internal_ref>.

Add Your Own Taxonomies

The plugin comes bundled with some default taxonomies that work well with the default feed that Broadbean uses. Adding your own is also really simple and works in a similar way to the fields as above. Below shows an example of how we would add a new taxonomy for country.

Again this handles all the saving of the terms in this taxonomy when they are sent over to your site. As with fields Broadbean would need to add this field to your feed. The broadbean_field arg in the code above states which XML node to look for in the feed.

Thanks must go to Dave Smith for his contribution to this part.

WP Broadbean Website

Along with the launch of version 2 of the plugin comes the new WP Broadbean website that is currently in development. The site will feature information and documentation as well as some paid services which users can opt into should they find them useful. More information on this soon.

Visit the current version (rough and ready!) of the WP Broadbean website here.

These are some of the major changes that have been introduced. It is worth noting that they are still in testing and I hope to have the new plugin version launched early in the new year.

Important Note

With all these changes there is an important note that I need to make. Users that are using the current plugin, version 1.0.2 or lower, the new versions changes are likely to break your version. This is far from ideal I know, but having gone back and forth on a number of occasions this I feel is still the best way forward.

If you are on versions at or below 1.0.2 then I would recommend you add the Block Specific Plugin Updates plugin from the WordPress plugin repository and set it to prevent updating the WP Broadbean plugin until you are ready to move ahead with the new version 2 plugin.