Add a post counter to each post that works with pagination

I needed to add an incrementing number to each post on an archive page within WordPress. The issue I was having was with pagination, the counter would be reset on each page.

To resolve this I had to get the posts per page and total posts and work out a formula for correctly setting my counter on each page.

$posts_per_page = get_option( 'posts_per_page' );
$total_posts = $GLOBALS['wp_query']->found_posts;
$total_pages = $posts_per_page / $total_posts;
$current_page = (get_query_var('paged')) ? get_query_var('paged') : 1;

if ( $current_page === 1 ) {
// On page 1 start at 1
$counter = 1;
} elseif ( $current_page === 2 ) {
// On page 2 start on the post per page + 1
$counter = $posts_per_page + 1;
} else {
// On other pages.
// For example on page 2 with 5 posts per page we want the counter to start on 6
// So page * posts per page - posts on the last page + 1 to get to this page = 6
$counter = ( $current_page * $posts_per_page - $posts_per_page + 1 );
} ?>

Thanks to the article for pointing me in the right direction.


Display custom post types from WordPress RSS feed as HTML

I was working on a RSS driven newsletter for a client that need to have a web page displaying all the posts from a custom post type using the WordPress RSS feed.

First I needed to get the correct feed URL. The feed URL for custom post types can be located using a query string in the URL:

Replacing the with the url of the site you will be getting the feed from. And change yourcustomposttype with the name of your custom post type.


We can then use PHP to load the feed in to an array and loop through each elements tag name and pull the values we need and echo them to the page:


$url = ''; $rss = new DOMDocument(); $rss->load($url);
$feed = array();

foreach ($rss->getElementsByTagName('item') as $node) {
  $image = $node->getElementsByTagName('image')->item(0)->nodeValue;
  $title = $node->getElementsByTagName('title')->item(0)->nodeValue;
  $link = $node->getElementsByTagName('link')->item(0)->nodeValue;

  echo '<h1><a href="' . $link . '">' . $title . '</a></h1>';

} ?>

Big thanks to this question on stack over flow and several of the answers

Developing a Shopify theme locally


As of January 2017 the Shopify Theme Gem is no longer supported and they recommend using their new tool Shopify Theme Kit. You can achieve the same tasks and more. It is also much easier to setup.

Here at Multiple States we use Shopify as our recommended e-commerce platform. When we need to work on a theme locally we use the Shopify theme gem. It is a command line tool that lets you make live changes to themes in your Shopify account.

Within our clients Shopify account we have two installs of the theme, production and staging. The Shopify theme gem allows us to push changes to the staging theme and preview them in browser for testing before we push them to production.

Installing the Shopify theme gem

To install the Shopify theme gem on OS X El Capitan you will need to follw the following steps:

  1. Open Terminal
  2. First, we need to install Homebrew. Homebrew allows us to install and compile software packages easily from source. Homebrew comes with a very simple install script. When it asks you to install XCode CommandLine Tools, say yes. Open Terminal and run the following command:
    ruby -e "$(curl -fsSL"
  3. Now that we have Homebrew installed, we can use it to install Ruby. We’re going to use rbenv to install and manage our Ruby versions. To do this, run the following commands in your Terminal:
    brew install rbenv ruby-build
    # Add rbenv to bash so that it loads every time you open a terminal
    echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
    source ~/.bash_profile
    # Install Ruby
    rbenv install 2.2.3
    rbenv global 2.2.3
    ruby -v
  4. To install the shopify_theme gem use ‘gem install’ (you might have use ‘sudo gem install’)
    gem install shopify_theme
  5. To setup your config file you can follow the instruction outlined at



Sync WordPress database and uploads from live / local

We use WP Migrate Pro to sync WordPress database and uploads from live to local. We have a developer licence so can take advantage of the add ons needed to sync uploads.

Before using WP Migrate Pro we had to constantly download databases and media files then set them up locally which took lots of time especially if the site is regularly updated.

The plugin website can be found here:


Setup for a new project

  • Install WP Migrate Pro on the live and local WordPress install
  • Activate both plugins and add your licence key
  • Add the secret key from the live site to your local site to make a connection
  • Set up the Pull settings. Make sure to include how to manage uploads and backups
  • Start the Pull and sit back and wait for the magic to happen

Joining a project

  • Install WP Migrate Pro on your local WordPress install
  • Activate the plugin and add your licence key
  • Add the secret key from the live site to your local site to make a connection
  • Set up the Pull settings. Make sure to include how to manage uploads and backups
  • Start the Pull and sit back and wait for the magic to happen

Stop orphans on your website using jQuery

An orphan is a single word at the bottom of a block of text or a title, this interrupts the reader’s eye and diminishes readability.

Example of an orphan

How to solve this on a responsive website website without re writing the copy

I found several JavaScripts that would add a non-breaking space (&nbsp;) between the last 2 words. But found there was many instances that this did not work for example if there was only one word or if I had HTML tags inside the paragraph the script was run on the site would brake.

After many Google searchers I came across a jQuery script by Simon Goellner called jquery-unorphanize on Github. This was a well thought out script that dealt with all the issues I was experiencing. Head over to his Github page to find out how to implement it: (the script is well commented if you are interested in seeing exactly how it works).

If you are using bower you can install with $ bower install jquery-unorphanize

Note: while writing this I see that this blog suffers from orphans… an issue has been logged.