Archiv der Kategorie: Wordpress

Dynamic Page Templates in WordPress, Part 2

In part 1 of this tutorial series I introduced the basic concept of dynamic page templates and created a standard page template as a foundation for future work. A WordPress child theme based on the Twenty Seventeen parent theme was used to implement the page template.

In this tutorial, you’ll learn more specific details about dynamic page templates and how you can use them in your own WordPress projects.

I’ll also show you step by step how to extend the page template from the first tutorial and turn it into your very first working dynamic page template!

Dynamic Page Templates: A More Flexible Approach

So how can we make page templates more flexible, and why would this be useful anyway?

Let’s say that you have a portfolio page template that outputs a gallery of individual portfolio items. Each item would be a fixed size, and only so many could fit onto each row.

We could, of course, add another page template to display portfolios at different sizes. But what if we wanted to show small, medium, or large portfolios? For this, we would need three separate page templates, with each one having different sizes for the portfolio items.

This could instantly be made more flexible by adding a drop-down control to select the portfolio size (i.e. Small, Medium, or Large). This is more convenient to the user as the page template box is less cluttered with unnecessary choices.

It makes more sense for the developer too, who only has one page template to maintain rather than three! This follows the Don’t Repeat Yourself (DRY) software development principle.

Should All Page Templates Be Dynamic?

It’s worth noting that not every page template would necessarily benefit from being dynamic. If you have a page template that does one thing, and one thing only, then that’s fine. It wouldn’t make sense to add custom controls, and extra logic, to a page template in this case.

But, as you’ll see by the end of this tutorial, many page templates would benefit greatly from being more flexible.

Another useful example for a dynamic page template would be a contact form. There are many custom controls that could be added to make this page template highly flexible.

For example, rather than output a fixed set of form fields, page template controls could be added to allow you to omit certain fields. Or maybe a Captcha field could be optionally displayed to prevent spam form submissions? There are so just many ways you could customize a contact form.

I’ll be creating a dynamic form page template in part 3 of this tutorial series. But first let’s get started with creating a general purpose dynamic page template.

Our First Dynamic Page Template

To begin with, we’ll be creating a basic dynamic page template to demonstrate how all the component parts fit together. Custom controls will be added to the page editor which will be used later on to control page template output.

The custom page template controls we’ll be adding shortly are:

  • Text box
  • Textarea
  • Check box
  • Radio buttons
  • Drop-down select box

Ideally, the controls should be added directly below the page template drop-down box to make it obvious they’re related to a page template.

However, WordPress doesn’t provide any hooks for this, so you’ll have to make do (for now) with adding custom page template controls to a separate custom meta box. In part three of this tutorial series, I’ll show you how to get round this problem.

Hooks are fundamental to WordPress development. They allow developers to extend the code base without having to resort to editing core files, which is generally considered a bad idea. This is because any custom code would be wiped out whenever a WordPress update is performed (which can happen quite regularly).

To display our meta box on the page editor screen, add the load-post.php and load-post-new.php hooks to the child theme init() method we created in part 1.

We use two WordPress hooks to ensure the meta box displays on the page editor, whether you’re creating a new page or editing an existing one. There is also a save_post hook that handles saving of post meta data, which I’ll cover a bit later on.

Add the following four class methods to create, display, and save data for the meta box.

I won’t go into too much detail here about WordPress meta boxes, as that could be a whole tutorial on its own, but note the following points about the code I added above:

  • The page_template_meta_box() and add_page_template_meta_box() class methods register the meta box with WordPress.
  • In add_page_template_meta_box(), the 'page' parameter specifies that this meta box will only be displayed on the ‚page‘ post type editor in the WordPress admin.
  • The display_page_template_meta_box() class method renders the meta box and sets up a nonce to make the form controls more secure.

If all is well, you should now have a meta box displayed on the page editor, as shown below.

A new page meta box

It’s a bit empty at the moment, though, so let’s add some controls.

Adding Custom Controls

If you’ll recall from above, we’re going to add a text box, text area, checkbox, radio button, and select box controls to the meta box. Start by adding the following code to the display_page_template_meta_box() method underneath the nonce function.

This retrieves the current values of our meta box controls and stores them in local variables. Now add the following HTML directly after, to render the meta box controls.

Each control is contained inside a paragraph tag, and its current value is updated via the local variable we created earlier. This ensures that the meta box controls always display the correct settings.

However, this won’t happen unless we save the current meta box control data to the WordPress database.

A little earlier, I registered a hook to execute a class method every time the page editor was updated. Let’s add that method to our child theme class now.

The save_page_template_meta() class method handles saving the meta box control data. It only saves the meta box data if the nonce is verified, the current users can edit posts, and we are on the page editor admin screen.

If those conditions are satisfied, then we extract the data for each control which is stored in the global $_POST variable. This variable is set every time a form is submitted.

Finally, the meta box control data is saved to the WordPress database as meta data for the current page.

With the custom page template controls added, our meta box should look like this.

Adding controls to the meta box

Enter some text for the text box and textarea, and make selections for the check box, radio button, and select box. Hit update to save your changes, and when the page editor reloads, your meta box controls should show the data you just entered.

Populating the meta box

The full source code for the child theme functions.php file is shown below.

The final piece of the puzzle is to use the meta box control data in our page template on the front end. Open up the test-page-template.php file we created in part 1 and replace the contents with this updated code.

Make sure the ‚Test Page Template‘ is the currently selected page template and view the page on the front end.

Viewing the output of the meta box

As you can see, the page template now includes the values just set for the meta box controls on the page editor. This is core to the rest of the tutorial as we’ll build on this basic example and create various examples of fully working dynamic page templates that you can use in your own WordPress projects.


In this tutorial, we covered how to build a functioning dynamic page template. At the moment, even though it’s functional, our basic page template isn’t terribly useful.

In the third and final part of this tutorial series, I’ll show you how to build various dynamic page templates, from start to finish, that you can use (and expand upon) in your own WordPress projects.

If you have any questions, please leave me a message in the comments below. I’d love to hear your thoughts on the tutorial.

from Envato Tuts+ Code – WordPress

10 WordPress Plugins to Improve Multi-Author Websites

WordPress is a natural fit for multi-author websites. Its ability to assign User Roles and Capabilities makes it easy to gather content from any number of authors – no matter where they’re located.

Depending on your specific needs, you may want to implement some extra features such as managing editorial flow, improving content organization or adding some bling to author profiles.

Here are 10 free plugins you can use to bring out the best in your multi-author site:

User Submitted Posts

Looking to allow anyone (or almost anyone) to post content to your site? User Submitted posts will allow folks to post content via a form on the front end. Just add a Shortcode to a page, post or widget and the form will appear in the appropriate place.

There are controls for allowing only logged-in users to add content and you can set whether submitted content is automatically published or placed in draft status. There are lots of available options, including the ability to use the TinyMCE editor (the same one used inside the WordPress Dashboard).

User Submitted Posts

Edit Author Slug

Edit Author Slug will give you some control over one of the more annoying aspects of a multi-author site. By default, WordPress will create a Permalink for each author like this:

The plugin will allow you to change that Permalink to something of your choosing, such as: You can even change Permalinks based on the user’s role. It’s a little thing, but handy nonetheless.

Edit Author Slug

Meks Smart Author Widget

Meks Smart Author Widget can automatically detect the author of a post and display their profile in a WordPress widget. Alternately, the widget can be shown only on specific single post or archive templates.

Options include the ability to size the author’s avatar to your custom specifications and replace the widget’s name with the name of the current author being displayed.

Meks Smart Author Widget

Editorial Calendar

Editorial Calendar is one of the more popular plugins in its category – and for good reason. It brings some sanity to scheduling upcoming posts by displaying everything in a handy calendar format.

Everything is drag-and-drop, so you can switch posts around, edit them and more – all from one screen.

Editorial Calendar

Post Status Notifications

A common issue with multi-author sites is that site-runners have to log in to WordPress and check to see if any new drafts have been added by authors.

Post Status Notifications improves the situation by sending out email notifications to administrators when a new draft post has been added. Authors can also be notified when their post is published.

Post Status Notifications

Content Progress

Content Progress provides an easy way to display the progress of a post as it makes its way through the editorial process. You can flag posts with labels like “Needs Scheduling” or “Add Media” right from the WordPress post listing.

The plugin will also automatically detect empty posts, as well. Editors and authors can even post comments regarding a specific post. Shortcodes are available to list progress on the front end of your site.

Content Progress

Author Avatars List

Display a listing of authors in a page, post or widget with Authors Avatars List. The plugin comes with a TinyMCE add-on that allows you to easily add Shortcodes wherever you like.

There are also options for showing or hiding specific users or groups, displaying individual users (with or without names and bios) and the ability to paginate your author list.

Author Avatars List

Change Author

Change Author is a nice option for providing credit to authors – even if you don’t want to allow them access to create posts in the WordPress Dashboard. All they need is a basic WordPress ‘Subscriber’ account. Administrators can then select their name from a custom meta-box in the post editor.

Change Author

WP Author Bio

WP Author Bio provides an easy way to spruce up author biographies. It features lots of customization options and a way to provide direct links to an author’s social media accounts. Bio boxes can be added through a Shortcode or by adding PHP code directly to a theme template.

WP Author Bio

Peter’s Post Notes

Editors and authors can keep a running conversation within a page or post with Peter’s Post Notes. A meta-box will appear on the Page/Post editors allowing you to both add and read comments.

There’s also a Dashboard Widget that will display recently made comments. It’s a nice way to keep the lines of communication open during the writing and publishing process.

Peter’s Post Notes

Multiply Your Efficiency (and Fun)

There are a number of ways to both enhance your workflow and better display and organize your site’s authors. With the plugins above, the somewhat clunky process of managing content from multiple writers can be streamlined.

Plus, your sites’ authors and visitors will benefit from tools that improve author profiles. Running a multi-author WordPress website just got a bit easier.

The post 10 WordPress Plugins to Improve Multi-Author Websites appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

Dynamic Page Templates in WordPress, Part 1

WordPress page templates are a great way to completely alter how particular web pages are displayed. You can use them to add a vast range of functionality to your site.

They do, however, have one limitation in that they are ’static‘ templates. You cannot customize them or affect their behavior in any way. You can only choose whether to enable a page template or not. By default, a page template will simply carry out a fixed function, e.g. display a sitemap, or remove the sidebar to display a full-width page.

In this tutorial series, I’ll be looking at how you can extend page templates to be more flexible, improving their functionality greatly. I’ll start by introducing how to create a standard page template via a child theme, before moving on to a more flexible approach where I’ll create a general-purpose dynamic page template.

Finally, I’ll show you three real-world examples of fully working dynamic page templates. I’ll also cover advanced topics such as how to assign page templates to custom post types.

Want to Follow Along?

To follow along with this tutorial series, you’ll need a WordPress site with admin access. By far the easiest way to do this is to use a local development environment. A dedicated text editor is also useful but not essential.

If you happen to be developing with WordPress via a remote server then you’ll need to be able to edit theme files via the WordPress admin, or edit files locally and use FTP software to transfer them back to the server. For the sake of simplicity, I’ll assume that you’re working with WordPress locally throughout the rest of this tutorial.

To implement our page templates, I’ll be using a child theme based on the Twenty Seventeen parent theme, which (at the time of writing) is the latest default WordPress theme. So if you are following along then it’s a good idea to have this installed before moving on.

The default Twenty Seventeen Theme

You can use a child theme based on another parent theme if you prefer, but you’ll need to modify some of the code to make it work seamlessly with your particular theme. The basic method, though, is pretty much the same for any child theme.

WordPress Page Templates

Before learning how to make page templates more flexible, let’s go over some basic details.

WordPress uses a template hierarchy to decide which template renders the current page. The template used in most scenarios for pages is page.php but can be different if you’re viewing a page with a particular ID or slug. However, if you select a page template for a particular page, this will always be used in preference, which makes it very easy to customize any page using a page template.

Here are some typical examples of commonly used WordPress page templates:

  • Contact Form
  • Portfolios
  • Frequently Asked Questions
  • Custom 404 Page
  • Custom Login Page
  • Sitemap
  • Full Width Page
  • Blog Posts Page
  • Widgetized Page
  • And many more…

I could go on, but you get the idea. Page templates are cool! You can use them for almost anything.

If you’ve used WordPress for any length of time then it’s highly likely you’ve already come across one or more of the examples above. Most themes include page templates to complement theme functionality, and you can easily add your own via a child theme. I’ll be covering how to do this shortly.

Page templates are so useful because they give you complete control over the whole page. You can leave out the header, footer, and/or sidebars if you wish. This is one of the reasons why full-width page templates are so common because it’s very easy to manipulate the sidebars via a page template.

To see all currently available page templates, go to the WordPress page editor and access the Template drop down via the Page Templates meta box. Simply select the page template you want and, once the page has been updated, it will be visible the next time the page is viewed.

Adding Page Templates via a Child Theme

As mentioned above, we’ll be using a custom WordPress child theme to implement all page templates throughout this tutorial. I’ll start off with a basic child theme and page template, and then add more complexity to it as we go along.

The whole process will be covered step by step, so don’t worry if you’re not familiar with child themes and/or page templates. You will be by the end of the tutorial!

The basic idea behind child themes is that they allow you to customize the look and feel of your current theme (called a parent theme) in a way that won’t be affected when the parent theme is updated.

If code is added directly to the parent theme then all customizations will be overwritten and lost during a scheduled theme update. This is an important point as any well-maintained theme will be regularly updated. To find out more about child themes, I’d recommend taking a look at the official documentation

It’s interesting to note that it’s technically possible to use a WordPress plugin to add page templates, but it’s much simpler to use a child theme. I don’t want to complicate things unnecessarily with extraneous code, so I’ll be sticking with child themes for our page template implementation.

Let’s Get Started!

Ok, so enough theory—let’s create our initial page template! It will be located in a custom Twenty Seventeen child theme which will act as our page template container, so we need to create the child theme first.

Open up your theme folder and create a new folder for your child theme. According to WordPress best practices, it’s recommended that you name the child theme folder the same as the parent theme it’s based on, amended with ‚-child‘. As our parent theme folder is named twentyseventeen, name your child theme folder twentyseventeen-child. Inside this new folder, create a single file named style.css and add the following comment block at the top.

We now need to reference all the styles from the Twenty Seventeen parent theme. If you’ve ever worked with child themes before, then you might be used to adding a CSS @import statement directly underneath the comment block. This is no longer considered a WordPress best practice due to speed concerns. Instead, we’ll enqueue the parent theme styles, which will be more efficient.

Inside the child theme root folder, create a functions.php file and add the following code to set up an empty class container. We’ll use this class for all our setup code.

Note: The closing PHP statement is not necessary, but you can add it if you prefer.

Now add a hook and callback to enqueue the Twenty Seventeen parent theme styles, rather than importing them directly inside the style.css file. Do this by adding two new class methods.

Save your changes and activate the child theme. You now have a fully functioning, albeit simple, Twenty Seventeen child theme. To test whether it’s working properly, add a line of custom CSS to style.css.

If all is well then you should see all your site text now colored a nice garish red!

Updated styles as per the child theme

Don’t forget to delete the test CSS before moving on. Now that the child theme is active, we can begin to implement our first page template.

Adding Our First Page Template

One thing is worth mentioning about where you store page templates inside your child theme. You can store the page templates either directly inside the root child theme folder or in a top-level folder. It doesn’t matter which one you choose; either location is fine.

However, if you have multiple page templates, you may decide to store them in a folder for organizational purposes. The folder name is unimportant, but it must be located directly inside the root child theme folder, otherwise WordPress won’t recognize your page templates. For this tutorial, I’ll be using a folder called page-templates.

Let’s now add a new page template to the child theme. The standard way to do this is to make a copy of the parent theme page.php theme template file and add it to your child theme. You can name the file anything you like, but I’d recommend including something that makes it recognizable as a page template. I’ll go with test-page-template.php.

Once you’ve copied the page.php file (and renamed it) to the page-templates folder, your child theme structure should now look like this:

Adding the first page template

Open up test-page-template.php and replace the comment block at the top of the file with the following.

This step is very important as the comment block tells WordPress to recognize the file as a page template and will add it to the list of available page templates on the page editor screen.

The full page template code should now look like this.

Let’s test our page template. Go to the WordPress admin and edit any existing page, or create a new one. On the page editor screen, select the Template drop-down from the Page Attributes meta box to assign our page template to the current page.

The Page Attributes

Because we simply copied the parent theme page.php template file, our custom page template is doing nothing more than outputting the current page, which is not very useful. Also, we won’t be needing to output the editor content or comments, so remove these from the page template while loop, and add a custom message. Change the contents of the while loop to the following.

Save this and view the page on the front end.

Viewing the page template on the front-end

Note: If you can’t see the custom message then make sure you have selected the custom page template on the page editor and saved it to update settings.

Let’s now make our custom page template a little more useful. Replace the message we added above with the following code to output a sitemap of all published pages.

This will result in the following output.

Viewing the sitemap

It’s easy to see just how useful page templates can be. But we can do even better!


So far, we’ve created a child theme and used it to implement our standard page template. In the next tutorial, I’ll show you step by step how to extend this, demonstrating how page templates can be made more flexible.

Specifically, we’ll create a general-purpose dynamic page template by adding custom controls to the page editor screen. Control logic will then be added to the page template to allow us to directly customize how the page template is rendered.

WordPress has an incredibly active economy. There are themes, plugins, libraries, and many other products that help you build out your site and project. The open source nature of the platform also makes it a great option from which you can better your programming skills. Whatever the case, you can see what we have available in the Envato Marketplace.

This is my first tutorial (be gentle!) so please feel free to leave any feedback you may have in the comments feed below. I’ll do my best to answer every question.

from Envato Tuts+ Code – WordPress

New Course: Add MailChimp Signup to Your WordPress Site

Final product image
What You’ll Be Creating

MailChimp makes it easy to send email to users of your WordPress site. And our new Coffee Break Course, Add MailChimp Signup to Your WordPress Site, shows you how to get set up with MailChimp in just ten minutes.

MailChimp widget form field configuration

In this quick, ten-minute course, Rachel McCollin will show you how easy it is to get set up to send a newsletter to users of your WordPress site. You’ll learn how to install a MailChimp plugin, how to link it to your MailChimp account and configure a widget, and how to let users sign up to your MailChimp mailing lists via your WordPress site.

Watch the introduction below to find out more.



You can take our new Coffee Break Course straight away with a free 10-day trial of our monthly subscription. If you decide to continue, it costs just $15 a month, and you’ll get access to hundreds of courses, with new ones added every week.

If you need some custom functionality beyond what’s offered by the standard installation, check out the wide range of MailChimp WordPress plugins on Envato Market. You can find all sorts of add-ons to give you special contact forms, to help you integrate with WooCommerce or Visual Composer, and much more.

from Envato Tuts+ Code – WordPress

Weekly News for Designers (N.386)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

Microtip – A modern, elegant and minimal, css only tooltip library.

JS MythBusters – An optimization handbook from a high level point of view.
JS MythBusters

Typography Handbook – A concise, referential guide on best web typographic practices.
Typography Handbook

Style Guide Guide – A boilerplate for creating superb style guides.
Style Guide Guide

Hasty – A tool for automatically generating WordPress snippets code for menus, custom post types, shortcodes and more.

UPNG.js – A small, fast and advanced PNG encoder and decoder.

Learning Guides, Tutorials & Tips

The Big CSS Media Query Mistake By Obinwanne Hill
The Big CSS Media Query Mistake

Learn CSS Grid By Jonathan Suh
Learn CSS Grid

Getting Started With The JavaScript Web Animation API By Danny Markov
Getting Started With The JavaScript Web Animation API

The Hitchhiker’s Guide to d3.js By Ian Johnson
The Hitchhiker’s Guide to d3.js

Fluid Responsive Typography With CSS Poly Fluid Sizing By Jake Wilson
Fluid Responsive Typography With CSS Poly Fluid Sizing

Improve the Performance of your JavaScript Web Application By Samuel Oloruntoba
Improve the Performance of your JavaScript Web Application

Designer’s guide to DPI By Sebastien Gabriel
Designer's guide to DPI

UX Design

The Path to Design System Maturity By Christian Beck
The Path to Design System Maturity

Dead Simple Techniques for Using Branding in UI By Christian Beck
Dead Simple Techniques for Using Branding in UI

Browse the Designer News Archives

The post Weekly News for Designers (N.386) appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

What Is WP-CLI? A Beginner’s Guide

WP-CLI has been around for quite some time now (circa 2011) and has steadily gained momentum in the WordPress developer community. But what is it exactly, and how can you use it in your WordPress workflow?

The idea behind WP-CLI is that it allows you to interact with, and manage, WordPress sites via a command line interface. According to the official documentation, it’s a command line alternative to using the traditional WordPress admin user interface.

The command line approach makes sense as you can typically do things on a computer much quicker via the command line, and the WP-CLI is no different. If you’ve ever used the command line on Windows, or the Terminal on macOS, then you’ll be right at home using the WP-CLI.

However, this is a tutorial aimed at beginners, so don’t worry if you’re not a command line guru. If you’ve never used the WP-CLI or the command line before, then you’re in good company and definitely in the right place!

Before we go any further, I’ve a confession to make. As I hinted above, I’ve never actually used the WP-CLI before! I’ve known about it for quite a while and have been itching to try it out, but never gotten around to actually installing it and using it. Until now, that is…

So we’ll be literally in this together and working out how to use the WP-CLI both as complete beginners. I’m really interested to see how the WP-CLI fits into my existing WordPress development workflow and if it can help boost productivity.

Are you ready to get started? OK then, let’s go!

Installing WP-CLI

Installing the WP-CLI for the first time can seem a bit daunting. I had to read the installation instructions a couple of times before it made sense. But, as it turns out, it isn’t that difficult once you understand exactly what’s required.

To start with, we need to get the latest version of WP-CLI. The recommended way to do this is to download the WP-CLI as a Phar file via the command line. This is just a PHP archive file containing all the PHP files needed for the WP-CLI to run, all wrapped up in a single convenient file ready for us to download.

Installing on macOS

Open up a terminal window and type in the following:

This will download the WP-CLI Phar file to your computer. Let’s check everything’s OK by testing the WP-CLI archive.

You should see output similar to the following:

To make using the WP-CLI more convenient, we want to be able to run it from anywhere and via a shorter command such as wp rather than having to type in wp-cli.phar every time.

We can do this via the following two commands:

Now try to run wp --info in a terminal window (pointing to any directory). If you see the same output as earlier when you ran php wp-cli.phar --info then you’re in business. WP-CLI is set up and ready for use!

There are other ways you can install WP-CLI, such as via Composer, so you might want to check out the alternative methods if you’re struggling with the recommended default method.

Installing on Windows

Installing on Windows is slightly more involved, as PHP isn’t available from the command line by default. You can install PHP manually, but the easiest way is to use a local development server such as MAMP because PHP is automatically installed as part of the overall package.

Once PHP is available on your system you’ll need to find the path to the PHP executable and make it available globally (this is covered in detail in the PHP Manual).

With PHP installed and available from any directory, download the wp-cli.phar file manually and save it to a folder such as c:\wp-cli. To be able to run the WP-CLI via the wp command just like we did on macOS, create a batch file called wp.bat inside the same folder you saved the wp-cli.phar archive file.

Add this to the batch file:

Finally, add c:\wp-cli to your global path:

The WP-CLI should now be available from any command line window.

An Even Easier Way!

If you’re feeling a little bit lost right now then I may have a lifeline for you. If you’re a DesktopServer user then WP-CLI is extremely easy to set up. Since DesktopServer 3.8.2, a new developer plugin is available which installs the WP-CLI on all your development sites!

Installing WP-CLI Using DesktopServer

Once it’s activated, you can access the WP-CLI via the main DesktopServer site list, or the WordPress Toolbar.

Access WP-CLI via the web browser
Accessing WP-CLI via WordPress

If you do have access to DesktopServer then I’d definitely recommend installing the WP-CLI this way, as it’s by far the simplest setup method. I’ve used DesktopServer for the last couple of years, so I’m lucky that WP-CLI installation was a breeze for me.

Using WP-CLI Remotely

This tutorial is aimed at beginners who are new to the WP-CLI, using a local WordPress installation. However, if you want to execute commands on a remote server (i.e. a live WordPress site) then you can still follow along if you have WP-CLI installed.

You’ll need to be able to connect to the server via an SSH client and have your hosting account login details handy. Once connected and logged in, you’ll be able to use all the WP-CLI commands in this tutorial.

It’s worth contacting your host to see if they support the WP-CLI as installing it will be much simpler.

Testing the Waters

Hopefully by now you’ll have the WP-CLI installed, in which case you can relax a bit as you’ve just done the hardest part!

Open up a command line window in the root directory of the WordPress website you want to work with, which should look similar to the screenshot below.

Preparing to use WP-CLI

One advantage to using DesktopServer is that it automatically opens a command window pointing to the correct root WordPress site directory. I thought that was a nice touch, especially if you’re working on multiple sites.

Let’s now test our installation of WP-CLI. This is our first command…

So, to access the WP-CLI, you type wp followed by a command and/or parameter. If wp is entered, you just get a long list of available commands and parameters (which I won’t show here, but try it yourself).

Our first command contained a parameter. The difference is that a parameter is preceded by two hyphens. The key to the WP-CLI is that almost all commands contain sub-commands (and parameters). This hierarchy is very well organized and is easy to understand and follow.

All commands follow a similar structure, so once you have mastered a couple of commands you’ll find it easy to expand to learning more commands. The rest of this tutorial will be about learning some of the commands and parameters available in the WP-CLI.

Let’s take a look at a few basic WP-CLI commands, and their output, to get a feel for how it works.

First let’s get the current version of WP-CLI we’re running.

wp --version

We can run a similar command to find the current version of WordPress.

How about a list of all the themes currently installed?

Notice how we get useful information too, such as the status of a theme and its version, as well as if an update is available.

We can do the same for plugins.

We can make use of parameters to refine the list of plugins.

Here we have a parameter that requires one or more values to be specified. This is very common, and you’ll get used to this very quickly. In this case, we listed only the fields we wanted to show (name, version).

We can also only show plugins that fulfill specific criteria.

This simply outputted all plugins again as they are all currently inactive. We’ll change this shortly when we begin to enter commands to manage plugins (and themes).

You may have noticed in the commands above that there are two command words used (plugin and list). If you type in wp plugin on its own, this won’t run a command but list all the sub-commands of wp plugin. Try it yourself.

So the list command is just one of multiple sub-commands available for the ‚parent‘ plugin command. Many other commands work in a similar way.

Type in wp core and wp theme to see a list of their sub-commands too.

You can use multiple parameters on the same line too. For example, if we wanted to list plugins with updates available, and restrict outputted fields, we can combine parameters onto a single line as follows:

By default, you get results of a WP-CLI command outputted in table format, but this can easily be changed to JSON or comma separated value (CSV) instead by using the --format parameter.

Now that we have a handle on how to enter basic WP-CLI commands, let’s see how we can do some useful WordPress admin tasks via the command line.

Plugins and Themes

The real power of the WP-CLI becomes clear when you start manipulating WordPress via the command line. In this section we’ll see just how easy it is to install/delete, and activate/deactivate plugins and themes via the WP-CLI.

For plugins and themes hosted in the WordPress repository, simply enter the name after the install command as follows:

Let’s output a list of plugins again, to make sure Jetpack was installed, but this time just list the plugin name.

We can install themes in a similar way:

And let’s just check the Twenty Eleven theme was installed correctly:

For plugins and themes hosted elsewhere, simply enter the full path to the zip file. The plugin/theme name is actually the slug, which is handy to remember if your plugin/theme name is made up of more than one word.

For example, to install the Theme Check plugin from the WordPress repository:

To activate a plugin, use the activate command.

Or you can install and activate a plugin all on one line.

To delete a plugin, use the delete command.

Notice that you didn’t have to deactivate the plugin before we deleted it, as you have to do in the WordPress admin. The install/activate/delete process is the same for themes.

Posts and Pages

There are various WP-CLI commands to manage any type of post, including a way to mass generate posts.

First, let’s output the current list of posts.

Now, let’s generate some posts.

Let’s take a look again at the updated post list.

As you can see, five new posts have been created, each one with a generic title and no post content. We can generate any number of posts and for any post type.

This generates three new pages with generic titles and no page content. I’m not too sure about how useful mass post creation is. However, it could be pretty useful for testing purposes.

If we want to create individual posts then we do have full control over post content. Let’s create a single post with a specific title and sample content.

This creates a post with a specific title, and content. By default, posts will be created with draft status, so if we want them to be published straight away then we need to set the post_status parameter to publish.

Creating a page with content is just as easy—simply set the post_type parameter to page (this is set to post by default).

We can also update existing posts by using the update command.

Make sure the post ID is correct; otherwise, you’ll get a Warning: Invalid post ID error message. And again, you can update any post type, not just posts!

As you’d expect, you can delete posts via the WP-CLI too.

This will send the post to trash. If you want to bypass this and just permanently delete a post then add the --force parameter.

Overall, I think it’s pretty intuitive to manage posts via the WP-CLI. It doesn’t feel like I’d have to remember lots of details every time I want to create or update a post.

This is great as it means I’m far more likely to keep coming back to the WP-CLI rather than sneaking back to using the cosy WordPress admin user interface I’m more accustomed to.

WordPress Comments

Managing comments is pretty similar to posts. To see all the comments on your site, use this command:

Be careful, though—this might take a while if you have a lot of comments on your site!

To create a comment, use the create command we’re now familiar with.

Notice that to generate a comment, we needed to specify an ID of an existing post, as well as the comment content.

Just like we did for posts, mass comments can also be easily generated.

Make sure to specify the count parameter if you don’t want 100 dummy comments generated, as 100 is the default!

To delete a comment, simply use the following command with the ID of your comment and optionally the --force parameter if you want to skip sending it to trash.

Remember, though, the Id here is a comment ID and not a post ID.

Recommended WP-CLI Resources

That’s it for our basic introduction to the WP-CLI. Below is a list of resources if you want to dig a little deeper and expand your knowledge.


We’ve just scratched the surface of what you can do with the WP-CLI. But hopefully, you’ll now have enough confidence to delve deeper into the WP-CLI and experiment with more advanced commands.

We learned what the WP-CLI is and how useful it can be in your day-to-day WordPress development. Even though the commands we covered were rather basic, they were still pretty useful!

This was the first time I’d personally used the WP-CLI, and in retrospect I can honestly say I don’t know how I managed without it. It’s definitely something I see myself using a lot more.

I’d like to get some experience with much more complex commands next to really see what you can do with the WP-CLI.

Some users, particularly beginners, could be put off by the default recommended installation process, though. This is a shame as the WP-CLI is extremely useful and all WordPress developers should at least check it out. 

It’s great fun, as well as being useful. If you have access to DesktopServer then definitely use that to install WP-CLI—it’s really a no-brainer.

Finally, if you’re interested in more WordPress development, don’t forget to check out the other WordPress material we have here on Envato Tuts+.

Do you already use the WP-CLI, or was this your first time experimenting with it? If so, how did you get on? I’d love to hear your comments!

from Envato Tuts+ Code – WordPress

The Quest for a Seamless WordPress Experience

I work with WordPress on a daily basis. Whether it’s design, theme development, customization or performing maintenance – the open source CMS makes up the vast majority of my workload. Over the years, I’ve really come to love the flexibility and the sheer number of options available that allow me to create just about any type of website.

But, sometimes, all of that choice and flexibility means a piecemeal approach to site development – particularly if you’re (like me) not a master developer. What are the potential pitfalls? What in the world am I talking about? Don’t worry, I’ll explain!

wordpress quest map

A Collage of Functionality

When developing a WordPress website, we often have our own set of trusted plugins we turn to in order to add specific functionality.

Each plugin does its own thing and comes from a diverse group of developers. Each one of these developers has created their plugin in their own unique way.

Besides their primary function, the plugins might do things such as add a custom post type, install new JavaScript or CSS. Depending on the purpose of the plugin, they might also write their own database entries. In essence, the sky is the limit.

Much of the time, this all works out just fine. While there may be plugin or theme conflicts from time-to-time, a site can hold up remarkably well considering all of these various pieces being thrown together.

This also means that, should a particular plugin no longer meet our needs, we can swap it out for another – usually without too much pain.

Here, There and Everywhere

While the traits mentioned above are all good things, there is also a downside to this approach. If you’re building a site that needs to perform multiple functions that are at least somewhat related, administration and data can be spread out all over the place.

To give you a real world example, I recently worked on a site that needed to perform a few different functions involving Ecommerce:

  1. Sell physical and virtual products via WooCommerce.
  2. Sell event registrations where a user can both register themselves and multiple colleagues. Information is collected for each person being registered. This is handled by a third party plugin that works in parallel (but not fully integrated) with WooCommerce.

While the front end functionality of the site worked well enough, both backend management and exporting data were much more difficult than you’d think.

Each event registration created a WooCommerce order, but didn’t include any additional attendees in the order. The attendee information was in its own separate spot. That was fine until I realized that exporting attendees wouldn’t provide me with order information without some creative coding. Tying it all together was a wild goose chase.

Of course, this is a bit of a niche use case. But it goes to show that, when we’re choosing plugins, it’s easy to overlook both how administrative tasks are handled and where the data gets stored. We’re often unaware of these items until we start working with the plugin.

Running into situations like this is a reminder that utilizing a collage of plugins from various places isn’t always the best approach.

Choose Carefully

In cases where you require data and administrative UX to have a more uniform structure, it often makes more sense to buy into an ecosystem of functionality.

Take WooCommerce, for example. There are tons of available extensions from both third-parties and WooCommerce itself. Choosing to run within this ecosystem can bring a more predictable experience for everyone involved.

But even then, as my experience showed, you still have to be incredibly careful about choosing plugins. Despite the fact that the event registration plugin worked with WooCommerce, it didn’t integrate to the point where both data and administrative functions were seamless with Woo.

While there are probably some valid reasons for this, it leads to a more difficult experience for the user.

That’s why it’s important to learn as much as you can about mission-critical plugins before taking the plunge. Read any available documentation; look at support forums and user reviews. And, perhaps most important of all – ask questions.

There are so many aspects of a plugin that may not be represented in the documentation. So it’s best to think of how the plugin would be used and interacted with on both the front and backend. Get a list of questions together and ask the developer.

Learning about those processes beforehand can save you a lot of headaches later on.

A Blessing and a Curse

Building a seamless experience with WordPress, particularly on the back end, is no easy task. While having lots of choices can be a great thing, it can also lead to a scattered mess if you’re not careful.

Thus, the process of choosing plugins is far more complex than just installing them and hoping for the best. It takes research, and often a dialogue with developers and other users alike, to make a truly informed decision.

Your due diligence may very well lead you to a plugin that is a perfect fit for your needs. Or, it may lead you to realize that a custom built solution may be the best choice.

Either way, it’s always better to find this out while the site is still in the planning stages. Switching gears after a site has already launched is often much more difficult.

The post The Quest for a Seamless WordPress Experience appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine