blog

WordPress REST API

What is the WordPress REST API?

If you’ve been following the ins and outs of WordPress core development for the last couple of years you may have heard talk of the WP API or the WordPress JSON rest API or JSON API or something similar. The WordPress REST API is a RESTful API that can be accessed simply through HTTP requests to access the data on a WordPress site in JSON format.

In plain English – the WordPress API is a new way of accessing the data WordPress provides without having to go through a theme, or a RSS feed, or XML-RPC. And accessing doesn’t just mean getting the data to read. With the WP API you’ll be able to create, read, update, and delete content in the WordPress database without interacting with WordPress directly.

Up until now if you wanted to read a WordPress post or page you had to use a WordPress query in PHP typically through a WordPress theme. The theme would use the WordPress templating engine and hierarchy, otherwise known as a theme, to output the post or page or other content you requested through the address bar on your browser. This set up had some severe limitations. If for example, you wanted the content from your WordPress site to appear in a mobile app you would have to either build a custom PHP application to do it or pass the data through antiquated protocols.

With the WP API we can bypass this entire process. Getting the data from a WordPress site using the API is as simple as submitting a standard HTTP request or URL. Once you have that data you can use any application or programming language to do whatever you want with it. So, you can build WordPress sites using PHP or you can build them using JavaScript or Ruby or Objective-C or whatever you want. The WP API gives you direct access to the data and allows us to do whatever we want with it.

The WP API also allows you to access and edit the data in the database without going through WordPress Admin. (This is only possible if you have the right security credentials so your data is not at risk.) But it means you can now build new interfaces for creating content with WordPress.


For more information you can go to the WordPress REST API page on WordPress.com. You can also find out how to interact with the rest API by going to: v2.wp-api.org The API project is hosted on GitHub: github.com/WP-API /WP-API

customizer theme setting guidelines

On the 22nd of April 2015, Justin Tadlock announced on WordPress.org that:

Themes are now required to utilize the Customizer API if the theme has custom theme settings. This means no custom settings screens.

The decision was ultimately made on two fronts (so we are told):

  • Having a consistent experience for users
  • Standardizing the theme review process

As can be seen from the comments on his post this is quite a controversial decision.  One of the issues seems to be that many developers will have to rewrite their themes to remove their theme options page. This is because the statement from Justin says:

Then, 6 months from yesterday, all existing themes submitted to the repository [WordPress.org] fall under this guideline. So, mark your calendars for October 21, 2015

The other issue from reading the comments is that there seems to be a feeling the the Customizer doesn’t have the controls and screen space to be able to provide and decent user interface to the user. It seems like the options will be squashed up against the left hand side and the right hand side of the screen will be used to display the current website page. This is because the “best” feature of the Customizer is that the screen automatically applies the changes made in real time (using JavaScript) without having to save the settings. In this way the user can see if they like the changes they have selected or not.

It will be interesting to see hows this all works out.

headline copy strategies

You can test numerous website elements. Some will have very little impact on your ability to persuade and convert your site visitors. Others will have a dramatic impact. A headline has a dramatic impact and they are an extremely important element in your conversion process. It is said that headlines should rank as one of your highest testing priorities.

But why is this the case? Well they are one of the first elements that your visitor will see. Either because they see it in a Google search result, or when they visit the page it is at the top of the page.

Readers will use your headline and sub-headlines to understand the content on your page. Headlines help your site visitors decide whether they want to read more of your copy. Relevant headlines not only improve conversion rates, but they also improve organic search rankings.

Readers skim headlines and an engaging statement encourages your reader to engage more deeply with your content [Notice I said engaging headline. Not click-bait headline which is another topic altogether].

So what sort of headlines can you test?

Here are a few example headlines:

Test fractions or percentages to prove your claim:
  • One out of 50 children in America will be homeless each year
  • 2% of all children in America will be homeless each year
  • 1/50 children in America will be homeless each year
Test asking questions in the headline:

You must make sure you directly answer the question after the headline

  • How can you make a difference in your community?
  • Do you want to make a difference in your community?
  • Can you make a difference in your community?
  • Will you make a difference in your community?
Test using emotion-laden words:
  • Bring care and comfort to the terminally ill
Test different types of formatting:

Such as bold/italics, fonts, colors, capitalizations, sizes

  • Make a Difference In Your Community
  • Make a difference in your community
  • Make a difference in your community
  • MAKE A DIFFERENCE IN YOUR COMMUNITY
  • MAKE A DIFFERENCE IN YOUR COMMUNITY
Test the number of words used in the headline:
  • Make a difference in your community
  • Make a big difference in your local community
Test using exclamation points:
  • Make a difference in your community
  • Make a difference in your community!
Test using text to convey the benefits vs. features:
  • Your donations help us make a difference
  • Your donations provide food and clothing for the homeless
  • Your donations go directly to the homeless
Test self-focused vs. customer-focused text:

“we/I” is self-focused, whereas “you” is customer-focused

  • We help make a difference in our community
  • You can help make a difference in your community
Test using quotation marks in the headline:

But do make sure that you consider the length of the headline

  • We are committed to make a difference
  • We are committed “to provide food and shelter for the homeless”
Test the reading level of the headline:

Flesch-Kincaid Reading Ease: A higher score indicates easier readability; scores usually range between 0 and 100. You can test your text using this website.

  • In a recent approximation, an estimated 1.6 million unduplicated persons use transitional housing or emergency shelters
    • Flesch-Kincaid Reading Ease: 4
  • In a recent survey, an estimated 1.6 million people were using transitional housing or emergency shelters
    • Flesch-Kincaid Reading Ease: 34
  • A recent survey showed that about 1.6 million people use homeless shelters
    • Flesch-Kincaid Reading Ease: 70

Writing a good headline isn’t easy and the purpose of testing is to give you the knowledge of what works or at least what doesn’t work. But like all good things in life it takes time, practice and patience to get it right.

hamburger icon button

When viewing a website on a mobile device I often see the site menu hidden behind a hamburger icon. I am not so sure that it is actually a hamburger icon, but it is called that because it consists of three lines that look like a bun with a patty in the middle.

cnn-menu

The problem from a design perspective is that is assumes that the visitor to the site knows exactly what it represents. Sometimes as in the case on the CNN website above they feel the need to add the word menu next to the icon just so you know what it is (which seems to miss the point of having the icon in the first place?).

But on other sites like WordPress.org use it so prominently that it makes me think that designers just assume that every knows that clicking the hamburger icon will show the site menu:

wordpress-org-menu

it actually represents a list

According to Wikipedia it was created by Norman Cox as part of the interface for Xerox Star, and reading further it seems that the icon actually represent a list. That is a list of three items, and clicking the list icon expands the list. Seeing it as a list (rather than a hamburger) makes better sense from design perspective.

Some sites have taken this into account and the LA Times website use four lines rather than three and they include the word Sections. They also actually have a horizontal menu of important sections rather than just use a icon:

latimes-menu

smaller screens require icons

As more and more people use smaller screen it is necessary to maximize the limited screen space by making use of icons and only time will tell if the trend to use the hamburger icon button as a menu link will continue. There is a good chance that it soon will join other icons like to magnifying glass and the shopping trolley to represent website features without having to use text. My concern is that it does assume that your site visitor knows exactly what it means and what will happen if the click or touch the icon.

Microsoft menu with hamburger icon

your goal is persuasion

Every element on your website has a persuasion role to fill. Otherwise what is the point? If the purpose of your site isn’t to persuade your visitors to do something, then you need to rethink what the purpose of your website is. Even if it is just to read the next article that you have written.

The Business Dictionary defines persuasion as:

a process aimed at changing a person’s (or a group’s) attitude or behavior toward some event, idea, object, or other person(s), by using written or spoken words to convey information, feelings, or reasoning, or a combination of them.

A process of changing behaviour by using written words to convey information.

Internet users have short attention spans and make quick decisions based on what they see and what they read. If your website doesn’t persuade your visitors to stay on your website then their current behaviour will kick in – and that is to leave. And then they are gone forever.

move your visitors further

You must move your visitors further into your conversion process of closing in on the purpose of your site.

If you write articles then you probably want them to leave their details so that you can let them know when you publish your next post.  If you sell items then you want them to add items to their cart and then checkout.

But … even a simple add-to-cart button can undermine this forward momentum. And the key is that you won’t know whether that button is a culprit unless you test. Your goal is to create a system that meets the needs of your customers. And when you better serve your customers, you better serve your business. Testing allows you to hear what they have to say.

testing persuasion

In 1923 Claude Hopkins wrote:

Almost any question can be answered cheaply, quickly and finally, by a test campaign. And that’s the way to answer them – not by arguments around a table. Go to the court of last resort – buyers of your products.

So once you have identified the reason that you have a website, the next step is to identify all those areas where you can persuade your visitors to move the process forward. A next or previous button. Add to cart. Checkout. Subscribe. Read. Share. Recommend etc. All those items that convey information to change behavior.

And then you need to test, test and do more testing to see why your visitors are, or are not doing what you want them to do.

Good luck … but before you go can I persuade you to subscribe to my newsletter? 🙂

 

WP Tavern website analysis

Designers put a lot of thought into their websites and one way of learning from their hard work is to analyse their public website to see what elements they include in the design.

Today I want to take a look at the WordPress blogging site WP Tavern.

WP Tavern has an interesting history. The about page of the site says that the domain was bought by Jeff Chandler in 2008 and the blog was launched, but in 2011 Jeff Chandler announced that a new owner had purchased the site. In 2013 it was revealed that the new owner was Matt Mullenweg (of WordPress and Automattic fame). The current site is now run by his investment company Audrey Captital

So the site has strong links to WordPress and the WordPress community and it seems like an interesting site to deconstruct.

WordPress theme

According to whatwpthemeisthat.com the theme used by WP Tavern is a child theme of the popular theme Stargazer available on the ThemeHybrid website and designed by Justin Tadlock.

The theme has a number of plugins installed:
  • Swiftype Search ~ A fully customizable search
  • WP Polls ~ An AJAX polling system
  • Jetpack ~ From Automattic
  • Author Avatars ~ Display lists of user avatars
  • Epoch ~ 100% realtime chat and commenting
  • Better Author Bio ~ A adds an author bio in every post automatically
  • Tw Recent Posts Widget ~ Show recent posts from selected category
  • Better Extended Live Archive ~ Create a clean and structured archive page
  • Crowd Control ~ Allow your users to flagging offensive comments
  • Powerpress ~ Podcasting plugin for WordPress

single post layout

A single post on the WP Tavern website has a full menu with seven items and a search baron he right. When viewed on smaller screens the main menu folds away and is replaced by a hamburger menu and includes the words Secondary menu (although I’m not sure why).

fonts

The font used for the header <h1> tag is Droid Serif and the font family is: ‘Droid Serif’, ‘Lora’, ‘Georgia’, serif; The h1 to h6 tags all use the same font.

The main body text font is Open Sans and the font family is: ‘Open Sans’, Arial, sans-serif;

header

WordPress Tavern post header

The page header on a post consists of:

  • The main menu
  • The WP Tavern logo with the alt text WordPress Tavern
  • A breadcrumb consisting of:
    • a home icon > the category > the post title
  • The post title
  • The author’s name, date, and number of comments
  • Each post has a right sidebar

page meta

Page meta includes the author name, the posted date, and the post category and tags.

WordPress WP Tavern - Post Meta

Each post includes the author’s full name with a small person icon and a link that goes to the persons author bio. This is followed by a small calendar icon and the full date. Hovering over the date shows the day and the date as well as the time that the post was published. This is followed by a speech bubble icon with the numerical number of comments. These elements include a link to the comments which are at the bottom of the page. If there are no comments then the number 0 is displayed.

post format

WordPress WP Tavern - Post image and text

Each post includes a featured image situated above the post text. Links in the text are in blue underlined with a grey bar. The grey underline turns to red/orange when when hovered over with the cursor.

author

At the end of the post text is a box containing the author’s details:

WordPress WP Tavern - Post author

Hovering over the author’s image show more details about the author from Gravatar and this is displayed using hovercards. The box includes the authors name preceded by “Who is”. There is a description of who the author is. This is followed by links to “View all posts by”. As well as links to their other accounts: Their blog, twitter, Facebook, and Google+.

footer

After the author bio the page includes and option to Share this and to Like this page. You can share the page via Email, Facebook, Twitter, Google, Pocket, and Reddit. The Like this button has a link to http://widgets.wp.com/likes/

This is followed by a related post section showing three posts (with images).

This is followed by the categories and tags. The categories line has a folder icon and the word Posted in. While the tag line has a ticket icon and the words Tagged. These link to all the posts in the relevant tag or category.

These elements are followed by the comments. and a link to the next post and to the previous post.

WP Tavern summary

In summary, the structure of a post on the WP Tavern website (as at 2 Feb 2015) is as follows:

  • menu
  • logo
  • breadcrumb
  • post title
  • author – date – number of comments
  • featured image
  • post text
  • author bio
  • share this
  • like this
  • related posts
  • categories
  • tags
  • comments
  • previous post link
  • next post link