Archiv der Kategorie: Tutorial

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.

Conclusion

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 http://ift.tt/2qZFrXI

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!

Conclusion

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 http://ift.tt/2qbLxqH

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.

//fast.wistia.com/assets/external/E-v1.js

 

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 http://ift.tt/2qOms1X

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.

Conclusion

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 http://ift.tt/2pTHqLM

12 Best Tab & Accordion WordPress Widgets & Plugins

Accordions and tabs are great ways to communicate text-heavy
information in an elegant and condensed fashion while saving valuable space on
your WordPress site and reducing information overload.

Accordions take their name from the musical instrument, and they
contain vertically or horizontally stacked panels with just their captions
visible. When these panels are clicked, they expand or contract like their namesake, revealing more or less information associated with the visible
caption.

Tabs perform a similar function to accordions but in a
different way.  They are modelled after traditional
card tabs that are inserted in files or card indexes. Like card tabs, tab
plugins and widgets are labelled and give clues to the information they
conceal. By clicking a tab, a user can reveal more information about the subject
of the tab and can use the tabs provided to navigate through a site or a page.

Whether you’re looking for a tab
or accordion
widget or plugin
, you can find what you’re looking for on CodeCanyon. To
save you some time, here’s a selection of the 12 best tab and accordion widgets
and plugins available on Code Canyon to get you started.

1. Accordion
Tables, FAQs, Columns, and More

With over 20 customisable presets Accordion Tables, FAQs,
Columns, and More is an accordion plugin that will appeal to a wide variety of
users looking to turn their content into space-saving accordions.

Accordion Tables FAQs Columns and More

Best features:

  • ability to preview changes live as you are making them
  • automatic updates
  • integrated with Font Awesome Icons
  • comes with several customizable presets
  • and more

Accordion
Tables, FAQs, Columns, and More
is an excellent choice for displaying your
content in stylish accordion layouts.

2. Accordion
Slider – Responsive WordPress Plugin

The Accordion Slider plugin combines two great functions in
one handy plugin. First it functions as an accordion, and secondly it functions as
a slider.

Accordion Slider - Responsive WordPress Plugin

Best features:

  • add as many panels as you want without worrying about screen
    space
  • touch-enabled
    to work well with mobile screens  
  • loads images and content from posts, galleries, and Flickr
  • accordions
    are automatically cached to improve the load time
  • can be placed anywhere,
    in posts/pages, template PHP code, or widgets
  • and more

Accordion
Slider – Responsive WordPress Plugin
is a great two for one plugin that
will appeal to those looking for a great way to present images or text.

3. WP
Responsive FAQ with Category

The WP Responsive FAQ with Category plugin is specifically
designed for users who have or want to add a Frequently Asked Questions area to
their site and don’t want their visitors to scroll through an endless stream of
text to get to the questions and answers that are relevant to them.

WP Responsive FAQ with Category

Best features:

  • FAQs can be arranged by category
  • 15 customisable different designs to choose from
  • compatible with Visual Composer page builder and WooCommerce
  • two types of FAQ toggle icons: arrow or plus sign
  • and more

There’s no question that WP
Responsive FAQ with Category
is the answer to all your FAQ needs.

4. WooCommerce
Category Accordion

The WooCommerce
Category Accordion is designed specifically for WooCommerce users. It can be
used as a widget or shortcode to list product categories and subcategories.

WooCommerce Category Accordion

Best features:

  • supports unlimited categories and subcategories
  • 14 Font Awesome
    Icons included
  • ability to highlight current category option
  • sort by ascending or descending order
  • and more

WooCommerce
Category Accordion
is ideal for users who want to organize their products
or services into categories and subcategories to make it easier for customers
to navigate their site.

5. Responsive Searchable 3 Level Accordion For WordPress

Responsive Searchable 3 Level Accordion For WordPress is a
super simple plugin that can be used anywhere on your WordPress site. It will
appeal to users who’re looking to arrange content in accordion style within a
post, sidebar, footer, etc.

Responsive Searchable 3 Level Accordion For WordPress

Best features:

  • can be used as a widget or shortcode
  • three nesting levels available
  • five readymade styling options
  • allows users to type in searched phrase
  • and more

Responsive Searchable 3 Level Accordion For WordPress
is a low-fuss plugin, and its standout features like three-level support and
searchable content really set it apart.

6. StackTabs for WordPress

StackTabs for WordPress combines the function of both a tab
and an accordion beautifully, and though it can be used to communicate any text-heavy content, it’s probably best used for content that the user wants to
divide into steps or present sequentially.

 StackTabs for WordPress

Best features:

  • arrange and rearrange tabs through drag & drop tab
    builders
  • highly customisable
  • integrated with Font
    Awesome Icons
  • unlimited colour
    combinations available
  • and more

If you can’t choose
between a tab and an accordion plugin, why not have both? StackTabs for WordPress gives you
exactly that.

7. WordPress
Tabs and Accordions DZS

WordPress Tabs and
Accordions DZS is another plugin that gives users access to both tab and
accordion functions.

WordPress Tabs and Accordions DZS

Best features:

  • full skins to fit every brand
  • WYSIWYG editor
  • unlimited colours
    options for customisation
  • iPhone, iPad and
    Android optimized
  • and more

So if StackTabs doesn’t appeal, WordPress
Tabs and Accordions DZS
is another great two-for-one option.

8. Hello
Tabs WordPress Widget

Hello Tabs allows you to create tabs from any widgets or
content on your site. Using a simple drag and drop feature, the plugin offers 12
predefined styles and 24 animation effects.

Hello Tabs WordPress Widget

Best features:

  • multi-tabs feature to create more than one tab element
  • drag and drop feature
  • cross-browser compatible
  • 23 animation effects
  • and more

Say “Hello” to some sophisticated tab functionality with Hello
Tabs WordPress Widget
.

9. WooCommerce
Tabs Pro: Extra Tabs for Product Page

If you have a WooCommerce site, the WooCommerce Tab Pro
plugin will allow you to create and manage 11 different types of tabs to
display your products.

WooCommerce Tabs Pro Extra Tabs for Product Page

Best features:

  • ability to add unlimited
    tabs to a single product page
  • WYSIWYG editor for
    editing custom content
  • ability to enable or
    disable tabs
  • ability to create a
    global tab that can be used with all products
  • and more

When you have an
eCommerce site, making improvements to your layout can really boost sales. With
WooCommerce
Tabs Pro: Extra Tabs for Product Page
, the tills will soon be ringing.

10. Elegant Tabs for Visual Composer

Elegant Tabs for Visual Composer is an addon for Visual
Composer WordPress plugin. It lets you add any shortcode to multiple tabs and
offers loads of customisation like different colours, icons and backgrounds for
different sections or tabs.

Elegant Tabs for Visual Composer

Best features:

  • vertical tabs
  • drag and drop any
    Visual Composer elements inside the tab content
  • supports deep
    linking
  • ten different styles of tabs and unlimited variations
  • and more

Elegant
Tabs
is also available for Fusion
Builder
, WooCommerce,
Cornerstone,
and Beaver
Builder
.

11. Social
Network Tabs For WordPress

The Social Network Tabs for WordPress is a different take on
tabs from those featured so far. This plugin is specifically designed to showcase
all your social media network profiles and feeds in slide-out or static tabs
which are positioned around the edges of your website window.

Social Network Tabs For WordPress

Best features:

  • 16 social networks with 69 feed options
  • flexible positioning
  • posts include Twitter, Facebook, Google + and LinkedIn share
    links
  • easy styling of tabs with colour pickers
  • and more

Need more followers? Social
Network Tabs For WordPress
will help you become a social media superstar.

12. PullOut
Widgets for WordPress

Like the Social Network Tabs for WordPress, the PullOut
Widgets is a different take on tabs. It is specifically designed to turn any widget on your site into a pullout tab.

PullOut Widgets for WordPress

Best features:

  • 289 icons for
    pullout tabs
  • 32 sliding animation
    effects
  • unlimited pullout
    widget positioning on top, right, bottom or left side
  • unlimited widget colours
  • and more

The most successful
websites are interactive, and PullOut
Widgets for WordPress
gives your
visitors plenty of chances to engage with your content.

Conclusion

These 12 Best Tab
& Accordion WordPress Widgets & Plugins are just a few of the
products available at Envato Market. If you haven’t found what you’re
looking for here, we have plenty of other great options to fit your needs. So
check out the selection of tab
and accordion
widgets and plugins
.

And if you want to improve your WordPress skills, check out our
ever so useful free
WordPress tutorials
.

from Envato Tuts+ Code – WordPress http://ift.tt/2pAWhtp

Apache vs. Nginx: Pros & Cons for WordPress

WordPress performance requirements can vary amongst projects, but one thing certainly remains the same throughout—it must be fast

Another requirement that goes without saying—it must be economical, so we cannot have resource intensive solutions. Solutions must be lean, mean and reliable, and to fully maximise income on your site, the expenditure on hosting must be kept to a minimum.

If you are expecting to be receiving a lot of traffic, the web server configuration you’re serving WordPress on has a direct effect on the performance of your site, affecting the load time and stability. 

When choosing your web server, you have several choices; Apache, Nginx, IIS, Caddy, and Lighttpd are all popular projects. We will be covering Apache and Nginx in this guide.

It’s estimated that out of the whole internet combined, Apache Server and Nginx together serve 50% of all web traffic. 

If you are a newcomer to the topic, maybe you are confused by the two seemingly identical purposes of the software—to serve web sites. I hope to clarify more below how the two differ and how to take advantage of either’s features. 

Apache and Nginx are very established projects, and they both have their own reasons for being so whilst achieving a similar identical goal of serving your WordPress site. However, when we look deeper in their designs, there is a major difference in how connections are handled by each server. 

The Difference

A major difference is in how connections are handled by the two.

Put simply, Apache uses a forked threaded solution, or keep-alive, which keeps a connection open to each user.

On the other hand, Nginx uses a non-blocking event loop, which pools connections working asynchronously via worker processes.

Nginx worker process topology diagram

Because of this architecture, the result is a single-threaded nginx process, and additional processes are not spawned to handle each new connection. So even at times of a high load, the CPU and RAM don’t get caned in this approach.

As well as architecture, there are also some slight differences and nuances between the two in configuration, and we will go through these in more detail later in this guide. 

First, let’s look at the two projects and get a clear overview.

Apache

WordPress works with Apache pretty much straight out of the box, A PHP module such as mod_php is required, but there is not much else needed to get it going. 

Apache is very flexible and has a bunch of modules. Commonly, mod_rewrite is used to provide URL rewriting to interpret URLs such as categories.php?id=4 to /categories/4.

Nginx

  • Started in 2002 by Igor Sysoev, a Russian software engineer, as a solution to the C10k problem—a challenge for web servers to handle 10,000 concurrent connections. 
  • Released publicly in 2004, meeting the goal as an asynchronous, non-blocking, event-driven architecture.
  • Lightweight running on minimal hardware provides excellent static content performance.
  • Highly responsive under heavy load.
  • Uses an nginx.conf configuration file with a curly bracket JS-like syntax.
  • Extensible with third-party modules.

As a successor to Apache, Nginx has the benefit of knowing the pitfalls and performance issues of concurrency that can occur, and it reaps the full rewards of this with its very fast asynchronous event loop design.

For static content this works very fast. As for dynamic content, like PHP for example, Nginx does not have the ability to process this with a module as Apache does. But this is not a hindrance, as it uses FastCGI to achieve this. This works very well in conjunction with php fpm connection pools and memcache.

WordPress Requirements

  • PHP 7 > 
  • MySQL 5.6 or Maria DB 10.0 >
  • mod_rewrite (if using Apache)
  • SSL (if being used)

Both Apache and Nginx support php fpm. This is a FastCGI manager, a forked process manager for PHP which can be used to provide a very fast response time. Running as a daemon on the server, it will natively spawn processes as they are required. 

Configuring PHP FPM With Apache

Ubuntu and Debian users can install the required packages with aptitude via:

Now enable the module in apache:

Then, in the configuration file /etc/apache2/conf-available/php7.0-fpm.conf, add the following:

Also, in your VirtualHost for WordPress (default path /etc/apache2/sites-available/000-default.conf), add the following:

Now restart apache and you’re good to go

Make a <?php phpinfo(); ?> file and look in your browser. PHP will now be serving with FPM. 

Now check your WordPress blog. Notice any difference?

Configuring PHP FPM With Nginx

Ubuntu and Debian users can install the package with the following:

Now, inside your configuration file (default /etc/nginx/sites-available/default) in the server block, you need to add the FastCGI configuration as follows:

Here we use the snippet from Nginx to set the cgi parameters and pass fastcgi the socket connection. 

Next, make sure you set the cgi.fix_pathinfo=0 in the php ini, as the default setting is breaking the configuration. Edit /etc/php/7.0/fpm/php.ini and set:

Now you can save the file, and reload PHP FPM. Do this via:

Finally, we can check the <? phpinfo(); ?> in a browser to confirm the server is now using PHP FPM with Nginx.

Doing mod_rewrite in Nginx

Nginx does not use a .htaccess file, and for URL rewriting it has a much simpler approach.

To get your WordPress blog working with Nginx, simply add the following to the try_files part of your Nginx configuration:

If you are using a directory for your WordPress blog, please set the following:

Restart Nginx and you will have URL rewriting working.

Optimal Setups

You have many options to optimise WordPress via caching on the server via memcache, varnish and also at the WordPress app level with plugins which will easily let you access this. 

However, what Nginx gives you is a great solution to serving static website content with its robust and rapid static content cache.

Static Content Cache

Nginx is very fast when used as a static content cache, and this is where its usage really excels in terms of WordPress and blog posts with a lot of images. You can serve your CSS, JS and images all via an Nginx server running just for these needs. 

It’s best always to do this on a cookie-less domain so that the content will be truly cached by the browser (as cookie as not cachable), so using a subdomain such as images.myblog.com or static.myblog.com would be ideal.

A location block for this static subdomains configuration would look like this:

Using open_file_cache, we enable caching for our static media files. We specify the maximum files to cache and for how long with open_file_cache max=3000 inactive=120s;

if you want to set up caching project-wide, just add the following four lines in your nginx.conf configurations:

Important: The open_file_cache_errors will cache the actual 404 errors, so it’s better to turn this off if you are using a load balancer in conjunction with this.

PHP-FPM Connection Pools

It’s possible to use different pools for each different WordPress, and you can then allocate resources very accurately for each site—even using different users and groups for every pool if need be. The configuration is very flexible. 

You can set up several configurations, for example:

In each of the following, we can set a plethora of configurations like so:

With this, you can specify the PHP-FPM configuration options such as pm.max_children, and you can also specify environmental variables and set the username and group settings here.

Nginx Load Balancer

If you are going to be getting a lot of traffic then you will probably want to set up a load balancer to use with your php-fpm setup.

Conventionally, we will want to start several back-end upstream servers, all of which are running mirrors of your blog, and then have another server running nginx in front of this which is acting as a load balancer and will direct the load between the upstreams. 

This means you can use many servers to power your blog at once, and the configuration to do so is relatively easy. 

An example configuration would look like this. First we start with an upstream module:

Here, each backend1.example.com has its own Nginx configuration, a mirror of how the site was before it had a load balancer. Nginx will choose which server to use for each request.

If one of our back ends has a faster hard disk, like SSD for example, or is geographically closer to your main user base, you can set weighting like so:

Additionally, if you think a server may go down or are concerned about timeouts, there are configuration options for this also:

Now, with this configuration, after 3 failures or a 15-second timeout, the server will be no longer used by the load balancer. If you wish to manually mark a server as inactive, add the keyword down, e.g. server backend3.example.com down;.

Next we need to pass that to the server via a proxy using the backend upstream we just defined prior:

Now restart your server with service nginx restart, and you are running a load-balanced version of your site! 

Lastly on this topic, also for your reference here is an nginx guide on serving static content and the best configuration options. Take note of using tcp_nopush and sendfile for Mp3, for example.

Migrating Apache to Nginx

Besides reading the Nginx manual and having a go at doing the changes yourself, you can use the open-source tool apache2nginx to translate your configuration from Apache to Nginx.

Follow the installation steps at the apache2nginx README, and once installed you will have the ability to migrate configuration files simply by running:

You can now check the configuration and try it in your Nginx installation. You may find the translation was not perfect, but it will give you a base to start on.

Conclusion

For speed and performance, Nginx is the obvious choice over Apache, but that’s not to say Apache can’t handle some traffic. If you’re planning on going on the front page of Reddit any time soon, you should probably look at getting a heftier solution with Nginx and PHP-FPM.

Migrating your WordPress to Nginx is not very difficult, and configuration going forward in Nginx is very simple and easy to access in comparison with that of Apache. 

Although there are not the same modules as Apache, and it may be unfamiliar at first, you will be able to find a replacement in most cases. If not, as a fallback solution, you can always proxy the old server via your nginx for this purpose if need be.

There are many ways to configure both servers, so a good solution can almost always be found for whatever the requirements call for. For now, it seems Apache will always be the default choice on the widely available hosting software cPanel, due to the EasyApache setup tool that comes with it. 

In the future, maybe more hosts will adopt Nginx cPanel tools like Engintron that provide Nginx on cPanel also. 

For now, if you wish to switch over to an Nginx-powered WordPress, you will need to set up a Linux VPN at DigitalOcean, AWS, or another hosting provider.

from Envato Tuts+ Code – WordPress http://ift.tt/2r1tWP8

How to Setup AMP Support for WordPress

In this tutorial we’re going to step through the ins and outs of generating valid AMP versions of your WordPress site’s posts. We’ll be doing this by using the AMP plugin created by Automattic.

There are alternative plugins available you could use instead if you choose, but as we only really have room to look at a single plugin in this tutorial we’ll keep the focus on the one created by the team behind WordPress itself.

Note: this article assumes you are already familiar
with how to create valid AMP pages, and as such will be focused on the
details specific to using WordPress and AMP together. If you’re new to AMP,
check out:

It also assumes you are familiar with running a self hosted WordPress site. If not, you might find these resources helpful:

Automattic’s AMP Plugin

This plugin, named simply AMP, automates the generation of AMP valid single posts. For each post you create, a second version will also be available with /amp/ appended to the permalink. If you are not using WordPress’ permalink rewriting functionality on your site /?amp=1 will be appended to the URL instead.

For example this is a regular WordPress post:

Note that here I have the AMP Validator extension installed in Chrome which detects there is an AMP version of this page available and displays a little blue link icon:

AMP Validator extension
AMP Validator extension

If I click on the extension’s little blue link icon it takes us to the AMP version of the post:

Using this plugin in its default state is pretty much “plug and play”. Install, activate, and you’re up and running. There are no configuration options requiring your attention as part of setup.

At present this plugin only works on single posts–it doesn’t affect pages, custom post types or archives. The plugin’s page at the WordPress repository states support for these is currently in development.

Use With Yoast SEO via Glue

If you like using Yoast’s SEO plugin for your regular posts, there is an additional plugin named “Glue for Yoast SEO & AMP” available to output Yoast-style metadata into your AMP posts as well. For example, it added these meta tags to the demo post pictured earlier:

To use this plugin you’ll first need to have the main Yoast SEO plugin installed. The Glue plugin will then add an extra section labelled AMP to the plugin’s main SEO admin menu.

Media and Custom AMP Elements

One of the most significant parts of creating AMP valid pages is using its reqired custom elements for media placement, such as amp-img instead of img for example. However when creating posts in WordPress you typically work in the WYSIWYG TinyMCE editor and don’t directly control the markup used for media insertion.

With the Automattic AMP plugin installed you don’t have to worry about this as it will automatically filter your content and make the following conversions to custom AMP elements:

  • img → amp-img or amp-anim
  • video → amp-video
  • audio =→ amp-audio
  • iframe → amp-iframe
  • YouTube oEmbed → amp-youtube
  • Instagram eEmbed → amp-instagram
  • Twitter oEmbed → amp-twitter
  • Vine oEmbed → amp-vine

Note: if you’re using Flash anywhere on your site it isn’t supported. Any other type of media can be used in AMP posts as long as it’s added using one of the items from from the list above.

Shortcodes and Plugins

Another consideration when using Automattic’s AMP plugin on your WordPress posts is how shortcodes and plugins will behave.

Header and Footer Output

Automattic’s plugin prevents AMP posts from using the normal wp_header() and wp_footer() theme functions that are often tapped into by plugins to output custom JavaScript, CSS and HTML. If a plugin you are using depends on either of these functions it will not work.

For a plugin to generate custom code in combination with the AMP plugin it has to make use of special actions and filters that substitute for normal WP theme functionality. For example, you can’t add meta tags to the <head> section as you typically would, by using the wp_head action to output code through the wp_header() function, but you can use the amp_post_template_metadata filter instead.

Yoast’s Glue plugin uses these special actions and filters, which is how it is able to output SEO data and custom CSS on AMP pages without breaking validation.

Shortcodes

If you are using plugins that rely on shortcodes you’ll need to ensure the code they output is:

  1. AMP valid, e.g. no inline JS or CSS
    and / or
  2. Markup from the list in the previous section that the AMP plugin automatically converts to the required custom elements.

To check on this, go to a post that you know uses the shortcode(s) in question and use the AMP Validator plugin in Chrome / Chromium to see if the post passes validation.

Custom JavaScript

Something else to bear in mind when using plugins on an AMP’ed site is that no custom JavaScript is allowed, so plugins that depend on JavaScript are not going to work at all. For example, if you’re using a plugin to drive a JavaScript powered image slider it will not function.

Analytics

If you’re using analytics that depend on a JavaScript snippet, AMP’s exclusion of custom JS means you’re going to need to replace the snippet with the amp-analytics element on your AMP pages.

This means you are restricted to analytics services Google has elected to support in AMP, but the good news is there are several vendors on the list.

You can either use a plugin to generate AMP friendly analytics code, or you can add tracking code yourself manually.

For inclusion via a plugin, Yoast’s Glue plugin has a section in which you can add Google Analytics code, and it will convert the code to AMP friendly format for you. To find it go to the AMP section in the SEO menu for Yoast’s plugin, then to the Analytics tab:

If you can’t find a plugin to integrate the analytics service you wish you use, you’ll need to hard code it in yourself. The Automattic AMP plugin offers a filter you can use to do this.

Custom code to integrate your own analytics should be added to the “functions.php” file of a custom theme or child theme, or to a custom plugin you create yourself.

Customizing the Look

There are a few different ways you can give your AMP pages a bit of your own style and branding.

In-Built Customizer

The Automattic AMP plugin has an in-built page in the customizer with three appearance settings you can change. To access it go to Appearance > AMP in the admin menu:

Once in the customization area you won’t see the AMP design options until you click Design in the left column. From here you’ll be able to select a header color, header background & link color, and you can choose between a light or dark color scheme.

Glue Customizer

The in-built customizer’s options are limited, so if you’d like to play around with some extra settings Yoast’s Glue plugin has the added bonus of some design controls, found by going to SEO > AMP and then to the Design tab.

Yoasts Glue plugin has the added bonus of some design controls
Yoast’s Glue plugin and its design controls

Code Modifications

If the available GUI based customizers aren’t sufficient you may want to start digging into some code so you can use your own CSS or template markup. To do this you can either:

  • Create a custom theme, (or child theme), and add code to its “functions.php” file
  • Create a custom plugin

If you’re not already familiar with how to do one of the above your best bet is probably to stick with the available GUI customization options.

Override the AMP Plugin’s “style.php” File

All the CSS that controls the presentation of AMP pages in the Automattic plugin can be found in its “templates” subfolder in the file “style.php”. You shouldn’t directly edit the code in this file as you’ll lose all your changes when the plugin updates. However you can override this file with one of your own.

If you’re creating your own custom theme or child theme, create a folder inside it named “amp” and in there add your CSS to a file named “style.php”. The AMP plugin will automatically find this file and use it.

If you’re creating your own plugin you can use any PHP file you like to hold your custom CSS, then specify said file by using the amp_post_template_file filter combined with a conditional check for 'style' === $type.

For details on how to do this check out Automattic’s documentation on GitHub.

Append CSS

If you only need to append a little custom code to the plugin’s existing CSS you can use the amp_post_template_css action. For more details on how this is done, plus some examples, see the relevant section in Automattic’s documentation.

In the case of appending CSS, you also have the option to add some custom code via Yoast’s Glue plugin, in the text area labelled “Extra CSS” near the bottom of its Design tab.

Note: Whether you’re appending to, or overriding the AMP plugin’s CSS, make sure you don’t include any <style> tags as they will interfere with the required <style amp-custom> tags already in the plugin’s template.

Custom Template

If you wish, you can create entirely custom markup for your AMP pages. By default the plugin uses the file “single.php” from its “templates” folder, (which in turn uses other files from that folder), but you can have it use a template file of your own making instead by using the amp_post_template_file filter.

There are a series of requirements that must be met in order for a custom template to produce valid AMP markup, so be sure to closely follow all the instructions offered in the docs.

It’s also a good idea to have a thorough look through the AMP plugin’s “templates” folder to see how the files there are setup. Start with the “single.php” file and look to see how it incorporates the other template files from there.

Tweaks to Existing Templates

If you don’t want to completely create your own template for your AMP pages, but rather you just want to tweak certain aspects of it, there are a range of actions and filters ready made for you to do so. They allow you to do things like adjusting the page logo, modifying the display of author information, adding content to the footer and so on.

As ever, read more about these options and see example modifications in the docs.

Wrapping Up

Let’s recap the main points we’ve covered:

  • The easiest way to get AMP support in WordPress is to use Automattic’s AMP plugin.
  • This generates AMP versions of your posts, but not for any other content (yet).
  • AMP versions are reached by adding /amp/ or /?amp=1 to the end of your post’s URL.
  • Add Yoast generated metadata to your posts by using the Glue plugin.
  • The elements img, video, audio, iframe and oEmbeds for YouTube, Instagram, Twitter and Vine will all be automatically converted to AMP custom elements by Automattic’s plugin.
  • Check the plugins and shortcodes you’re using to make sure they don’t rely on custom JavaScript or inline CSS, and they output code that can be converted to AMP valid markup.
  • Add analytics from a supported vendor through a plugin or through your own custom code.
  • Perform basic GUI based customizations to the look of your AMP pages by using the customizer built into Automattic’s AMP plugin.
  • For additional GUI based customizations use the Design tab available in Yoast’s Glue plugin.
  • For more advanced code based customizations of your AMP pages CSS and / or markup create a custom theme or plugin.
  • Add custom CSS by overriding the plugin’s “style.php” template or appending to it using the appropriate actions and filters.
  • Add custom markup by overriding the plugin’s “single.php” template or tweaking specific parts of it using appropriate actions and filters.

I hope all the above has helped you get oriented with how to approach AMP on WordPress sites, as well as how you can go about customizing your AMP’ed posts.

Thanks for reading!

from Envato Tuts+ Code – WordPress http://ift.tt/2pwUNDZ