Archiv der Kategorie: Tutorial

12 Useful WordPress Plugins for Page Layouts

When it comes to plugins for laying out the pages on your
WordPress site, Visual
Composer
is a hard one
to beat. This easy-to-use drag-and-drop page builder with over 200
unique addons will help the developer and the novice alike create
just about any layout imaginable.  

But
for users looking to modify just one page in a specific way, this powerful page builder
is probably overkill. That’s why we’ve scoured CodeCanyon for the most useful WordPress
page layout plugins and have come up with these 12 that will meet a variety of
needs.

1. Essential Grid WordPress Plugin

Whether you’re
looking for just the right grid to display your blog posts, photos, products,
testimonials, social media streams, services or whatever else you have in mind,
The Essential Grid WordPress Plugin has got you covered.

This multipurpose
grid enables you to display any content on your WordPress site in your choice of elegant grid form. First you decide what source
you want to use for your grid entry. Then you customise the grid by choosing
from three available styles before selecting your required number of columns and
rows and setting spacing for the items. From there you can add any number of skins
available to customise your look further.

Essential Grid WordPress Plugin

Notable features:

  • over 25 example skins included
  • widely varied content sources possible, including images,
    YouTube, HTML5 self-hosted video, etc.
  • various animation styles available
  • responsive and mobile optimised
  • and more

Essential
Grid WordPress Plugin
is an engaging and visually appealing way to show off content on your WordPress page.

2. FlatFolio

FlatFolio is another great option for those
looking for an alternative grid layout. Aside from being highly customisable,
the plugin has the additional benefit of offering both Carousel and Slider functions as well. You can customise the
grid with logos, captions, coloured overlays, titles and subtitles, hover
shadows, and more.

FlatFolio

Notable features:

  • preview feature
  • carousel and slider features
  • unlimited item formats
  • various overlay effects
  • and more

For creatives and other users
wanting to show off their visual content, FlatFolio is a versatile and
easy-to-use layout choice. 

3. Sidebar and Widget Manager

If you’ve ever
wished for the freedom to place a widget in the content area of your WordPress site
page, the Sidebar and Widget Manager has heard your prayers. The plugin allows
you complete control of where you add widgets to your site’s pages by expanding
placement possibility beyond the sidebar and footer area to the page content
area.

Sidebar and Widget Manager

Notable features:

  • drag-and-drop grid
    manager
  • vertical or
    horizontal widget alignment
  • ability to display
    or hide any widget on any page
  • supports any kind of
    content
  • and more

Being able to add
widgets to any area of your WordPress site page with the Sidebar & Widget Manager plugin is a great way to build your own
unique page layout.

4. Content Manager for WordPress

The Content Manager for WordPress plugin is probably the
most versatile of the plugins in this list because it allows you to create any
kind of layout you desire in three simple steps. Simply add a new page, create
your desired layout with the drag-and-drop interface, and then add your
content. 

Content Manager for WordPress

Notable features:

  • ability to add unlimited fully editable pages
  • 10 layout colours
  • 30 Google Font options
  • multiple language support
  • and more

User rjhuntington says of Content
Manager for WordPress
: “Love it! Solves
so many irksome WP shortcomings.”

5. Stupid Simple Testimonials

The Stupid Simple Testimonials plugin makes it super easy to
add testimonials or quotes to your page layout. Using a simple shortcode that
can be inserted in pages, posts and widgets, the plugin features eight unique
ways to customise your page layout.

Stupid Simple Testimonials

Notable features:

  • grid layout
    automatically adjusts to match the total number of testimonials
  • six unique colour
    schemes provided to match your theme
  • ability to divide your testimonials into categories for easy management
  • ability to edit using the standard WordPress editor
  • and more

The Stupid Simple Testimonials plugin is
a straightforward way to alter your page layout and will integrate your testimonials or
quotes into your site in a crisp, professional fashion.

6. WordPress
Meet the Team Shortcode Plugin

Just as the Stupid
Simple Testimonials plugin above is dedicated to adding testimonials to your page
layout, the WordPress Meet the Team Shortcode Plugin is dedicated to adding
your team members to your page layout in an elegant and professional way. 

The plugin allows you to not only show members of your team but also arrange them by categories or groups
as needed. What’s more, the plugin allows you to add and manage individual
member information like job titles, locations, social media, etc.

WordPress Meet the Team Shortcode Plugin

Notable features:

  • responsive grid or carousel view
  • unlimited custom fields
  • drag-and-drop ordering
  • supports up to 12 columns
  • highly customizable
  • and more

WordPress
Meet the Team Shortcode Plugin
 is a good choice if introducing your team and their specialities to potential visitors to
your site is a priority.

7. JC
WooCommerce Multistep Checkout

The JC WooCommerce
Multistep Checkout plugin is designed to improve your customer’s checkout
experience by replacing WooCommerce’s default checkout layout. The aim of the
plugin is to display each step of the checkout process clearly, so that at any
given time users know exactly where they are and how far along they are in
the process.

JC WooCommerce Multistep Checkout

Notable features:

  • easily control which
    steps are displayed
  • ability to add
    custom steps like user authentication
  • customisable text,
    style and layout features
  • and more

JC
WooCommerce Multistep Checkout
 is a good choice for refining your WooCommerce checkout process.

8. UberMenu

What’s a great site
without an equally great menu layout to help your visitors navigate your
content seamlessly? UberMenu plugin is designed to facilitate just such easy
navigation. The highly customisable and responsive plugin offers seven main
menus and several submenu options to suit a wide variety of tastes and needs.

UberMenu

Notable features:

  • easy to add images, descriptions, Google maps, etc.
  • choice of 18 layout
    variables
  • fully responsive and compatible with mobile and touch-enabled
    devices
  • extensive user-friendly
    documentation
  • and more

UberMenu works out of the box with the WordPress Menu
System, making it simple to get started and create gorgeous menus quickly and easily.

9. WordPress
Events Calendar

If you’re looking
for a clean and elegant way to keep your customers, clients and/or followers
updated on your public appearances then adding the WordPress Events Calendar
plugin to your WordPress page layout might be the right solution for you. 

WordPress Events Calendar

Notable features:

  • ability to add
    multiple calendars to a page or post
  • upcoming events widget
  • multiple languages support
  • and more

User Applicist praises WordPress
Events Calendar
for its “excellent functionality and UI”.

10. WordPress
Content Boxes Plugin

With the WordPress Content Boxes Plugin, it’s all about boxes. 43 stylishly designed boxes to be precise, any of which users can select
to contain and showcase site content, like testimonials, social icons,
team members, products, pricing lists, etc.

WordPress Content Boxes Plugin

Notable features:

  • over 1,000 icons
  • highly customisable
  • ability to use multiple content boxes in one page
  • and more

Though one of the newer additions to CodeCanyon, WordPress
Content Boxes Plugin with Layout Builder
is sure to be a big favourite in
the coming months. 

11. Flip Magazine

Flip Magazine is a beautifully conceived magazine layout
which enables users to simulate page turning by pressing forward or backward
arrows. It will appeal to creatives who want to show off their image gallery in
full-width magazine-page format, but will also work equally well for those who want
to display their WordPress posts stylishly.

With Flip Magazine, you can build unlimited pages with each
page carrying its own settings.

Flip Magazine

Notable features:

  • user-friendly touch optimised design with gestures support
  • all Google Fonts supported
  • unlimited flip magazine pages
  • CSS3 animations for navigation menu
  • and more

Flip Magazine is possible
the coolest of the 12 plugins featured here, but don’t take my word for it. Check
it out for yourself.

12. Smart
Footer System

I don’t know about you, but I’m pretty tired of the same old
same old when it comes to footers, so I got pretty excited when I found the
Smart Footer System, which made me look at footers in a whole new way.  

Smart Footer allows users to customise their
footers in any number of ways, including adding photos and videos and various
animations. With over 70 different styles to choose from, this highly
customisable plugin will breathe new life into the bottom of your WordPress site
pages.

Smart Footer System

Notable features:

  • several animation modes and speeds
  • innovative and powerful admin panel 
  • video background possible
  • highly customisable
  • and more

With the Smart
Footer System
plugin, you no longer have any excuse for having dull, snooze-inducing
footers on your site.

Conclusion

These 12
plugins just scratch the surface of page layout plugins available at Envato Market. So if
none of them catch your fancy, there are plenty of other great options there to
hold your interest.

And if you
want to improve your skills building WordPress sites, check out the ever so useful free WordPress tutorials we have on offer.

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

Advertisements

Learn to Build Your First WordPress Plugin in Our New Course

Final product image
What You’ll Be Creating

Being able to write your own plugins lets you write code that you can use on all your sites, regardless of the theme. Putting your code in a plugin is usually better practice than using the theme functions file. That way, you can switch themes without losing all the custom code on your site.

In our new Coffee Break Course, WordPress Coding Basics: Your First Plugin, you’ll learn how to write your first simple plugin. Experienced instructor Rachel McCollin will show you how to configure all the plugin metadata and how to install it on your site, and you’ll also get some ideas of simple projects you can build to make your own code more reusable.

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 subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 300,000+ photos and 34,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

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

Get Started With the WPCOM.js WordPress API

The new WPCOM.js library lets you harness the power of WordPress to build a free and easy-to-update back-end for your web or mobile apps. In our new short course, Get Started With the WPCOM.js WordPress API, you will learn how to use WPCOM with a WordPress.com site. 

What You’ll Learn

In this quick half-hour course, Envato Tuts+ instructor Reggie Dawson will show you how to retrieve public content from your site, how to set up authentication tokens, and how to create and edit posts with the easy-to-use WPCOM JavaScript API.

WPCOM JavaScript API

By the end of the course, you’ll have the information you need to start using WPCOM.js for your web or mobile apps.

Watch the Introduction

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

 

Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

And to speed up your WordPress development work even more, why not check out the range of useful WordPress plugins we have available on Envato Market.

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

7 Best Weather WordPress Widgets & Plugins

There are many instances when providing current temperatures and weather forecasts on a website can be useful. Restaurants, retreat centers, country clubs, and many other businesses and organizations can benefit from this kind of feature.

There are a few things you’ll want to consider:

  • How does the widget design fit within the current website theme?

Many of the following weather WordPress widgets and plugins have design options built in or can be easily modified to fit your website’s design.

  • Does the weather WordPress plugin being considered require another service?

Some weather plugins require the World Weather Online API. Before April 2017, they provided free registered API keys. Now they require a premium subscription.

  • Where will the weather be displayed?

There are a variety of options and features which weather widgets offer. There are some that can only be placed in a widget area, whereas some provide a shortcode option, allowing you to place the weather widget on any page.

Every website has its own unique needs, so you may need to consider additional things as well. Take a look at these 7 best weather WordPress widgets and plugins, and I’m sure you’ll find something that will meet your need.

1. Astero WordPress Weather Plugin

The Astero WordPress Weather Plugin includes much of what you’ll ever want in a weather WordPress plugin. With its clean lines, multiple sizes and styles, and solid feature set, your weather widget will be looking good, even if the weather isn’t.

Astero WordPress Weather Plugin

Some of the technical features include:

  • HTML5 geolocation with IP fallback
  • supports 600+ Google Fonts
  • fully responsive layout
  • local cache
  • and more

And the design features include:

  • use HTML5 video or YouTube for your background
  • or use a static image or flat background
  • simple or full-screen modes
  • unlimited colors
  • and more

As for your weather sources, you can switch between Forecast.io and Openweathermap.org, and users can also leverage the built-in city or zip code search function.

The Astero WordPress Weather Plugin includes excellent features and throws in some impressive design choices, making it a top choice for weather WordPress widgets and plugins.

2. City Weather for WordPress

If you’re looking for a nicely designed weather widget that displays the weather for only a predefined location, you might want to give City Weather for WordPress a try. It includes a few basic options and can easily be configured to match just about any design.

City Weather for WordPress

Features included:

  • select a custom background color or use an image
  • supports Fahrenheit and Celsius units
  • select wide or tall widget size
  • fully responsive
  • and more

City Weather for WordPress doesn’t include many options, but it’s designed well, and it would be perfect for restaurants, country clubs, and other local websites that benefit from users knowing the weather.

3. WeatherSlider Premium WordPress Weather Widget

If you need the weather a little more front and center, then something like the WeatherSlider Premium WordPress Weather Widget is what you want. This weather WordPress widget doesn’t just display the current temperature, it’s a full-featured weather slider.

WeatherSlider Premium WordPress Weather Widget

The design features include:

  • CSS3 animations with jQuery fallback
  • auto-slideshow and auto-refresh option
  • fully responsive from 240×200 to 1300×600
  • touch control, keyboard navigation, and supported on all major browsers
  • and more

Weather features include:

  • 12 or 24 hour time formats and localization ready
  • display current weather or three-day forecast
  • custom location search bar
  • 48 different weather types
  • and more

You’ll also find the detailed documentation and layered graphic elements PSD file very helpful.

Display the weather in style with the WeatherSlider Premium WordPress Weather Widget.

4. aWeather Forecast

The aWeather Forecast weather WordPress plugin displays weather conditions like no other. With its cast of animated icons, animated headers, and full color customization, this is easily one of the most charming weather widgets you’ll find.

aWeather Forecast

This widget can display:

  • current weather icon and temperature
  • current weather conditions
  • wind speed and direction
  • pressure, humidity, and more

Some features include, but not limited to:

  • Fahrenheit, Celsius, and Kelvin unit formats
  • 18 animated icons and 4 animated headers
  • select from over 700 Google Fonts
  • and more

The aWeather Forecast plugin is one of the most uniquely designed weather WordPress widgets.

5. Weather WordPress Shortcode & Widget – Simple Weather Plugin

This weather widget can be placed in both widget spaces and via shortcode. Combining this feature with the Weather WordPress Shortcode & Widget – Simple Weather Plugin’s sleek design makes it one of the more versatile weather WordPress plugins.

Weather WordPress Shortcode  Widget - Simple Weather Plugin

Some of the great features you’ll find include:

  • unlimited color selection and custom date format
  • supports both Fahrenheit and Celsius
  • customize weather update intervals
  • display day and night temperatures
  • location and GPS coordinates
  • seven-day forecast option
  • and more

It’s easy to see why the Weather WordPress Shortcode & Widget – Simple Weather Plugin is a favorite among weather WordPress plugins.

6. Weather Widget One

The Weather Widget One weather WordPress plugin is so pretty. Its simple design is a joy to view, and its clever UI makes it very useable. This is clearly one of the best weather WordPress plugins available.

Weather Widget One

Features include, but certainly not limited to:

  • displays temp, wind, humidity, and chance of precipitation
  • auto detect user location via HTML5 Geolocation
  • five-day forecast with 24-hour daily forecast
  • multiple location search options
  • supports multiple units
  • shortcode support
  • and more

With its minimal design and full set of features, the Weather Widget One is an easy favorite among weather WordPress widgets.

7. Bonobo – Weather Widget

This weather WordPress widget is super simple and easy to use. The Bonobo – Weather Widget also boasts a sleek metro style that’s minimal and sleek.

Bonobo - Weather Widget

Features include:

  • supports both Fahrenheit and Celsius
  • OpenWeatherMap API
  • multi-language
  • and more 

The included eight color schemes and metro design makes it easy to adapt to your current—or future—WordPress theme.

For a simple, no nonsense weather widget, check out Bonobo – Weather Widget.

BONUS! Weather on Google Maps for WordPress

The Weather on Google Maps for WordPress is not your typical weather WordPress widget, so I consider this to be more of a bonus entry among the other plugins.

Like a TV weather screen, transform Google Maps to an interactive weather map—on your own website.

Weather on Google Maps for WordPress

“Weather on Google Maps is a WordPress plugin, which allows you to easily embed any number of Google Maps with live weather information for any number of cities using simple HTML snippets. You can customize the look and feel of the weather information box via CSS and even choose what data to display.”

Some of the features you’ll find here:

  • auto-center of Google Map based cities
  • works with Google Maps API v3
  • weather forecast for four days
  • included weather icons
  • and more

Weather on Google Maps for WordPress is a unique and powerful plugin, combining the power of Google Maps with Yahoo Weather.

Conclusion

Providing weather information for an organization’s website can be a super useful feature. It’s easy to overlook, but when someone is looking up more information or getting ready to make a booking online, being able to check the forecast can be very helpful.

If you don’t see exactly what you’re looking for, make sure to check out Envato Tuts+. They have excellent WordPress tutorials, eBooks, and courses. Try WordPress Plugin Development Essentials or maybe the WordPress Hacker’s Guide to the Galaxy. Some other helpful eBooks also include Useful Tricks and Techniques for WordPress and Mastering WordPress.

What kind of website will you be using a weather WordPress widget for?

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

How to Deploy a WordPress Plugin From TravisCI to WordPress.org

Not everyone likes subversion. If you use Git to manage WordPress plugin development, keeping your Git repo and the WordPress.org SVN repo in sync is tedious. Luckily, we can use TravisCI deployment provider to automate SVN deployment after tests.

Prerequisites

You need these before moving on:

  1. GitHub account
  2. TravisCI account
  3. Plugin source code
  4. WordPress.org plugin SVN repo (You get this after plugin review approval.)

First Push to GitHub

In order to use TravisCI, we have to host the plugin repository on GitHub.

First, create a new repository on GitHub by going to this page and filling in the repository name.

create new GitHub repository
GitHub new repository page

Then, we are going to commit all plugin files into Git and push it to this GitHub repository. Remember to replace the remote URL with yours.

Connecting TravisCI

Connect your GitHub repository with TravisCI by going to your TravisCI account page and switching on your repository. Click Sync account in the upper right corner if your newly created repository doesn’t show up in the list.

TravisCI account settings

You’re all set. Every time you push new commits or someone makes pull requests to GitHub, it will trigger a build on TravisCI.

First Build on TravisCI

TravisCI uses a YAML file named .travis.yml in the root of your repository to customize the builds. Learn more from the build customizing document to see how you can control the build lifecycle.

This is a basic configuration file that instructs TravisCI to run builds on PHP 7.0 and 7.1. Since testing is out of the scope of this tutorial, I replaced the actual test commands with echo 'Tested'

Commit this file and push it to GitHub. TravisCI builds will be triggered automatically.

TravisCI current build

Adding Deployment Provider Configuration

Deployment providers run if the tests passed and pre-defined conditionals (the on section) are met. TravisCI provides nearly 40 official deployment providers. Sadly, none of them support WordPress.org subversion repositories. Thus, I made my own custom provider. You can find it on GitHub and its pull request.

To use it, add these lines to the end of .travis.yml.

Configuration Explanation

before_deploy

The before_deploy section copies three files into the build directory which is to be checked into the WordPress.org subversion repository. In the real world, this is where you want to run gulp or grunt tasks to prepare the production-ready plugin. 

Don’t copy test files or any unnecessary files into build as the whole build directory is released to users, and users don’t need your test files.

provider and edge

We tell TravisCI to install my provider from the add-wordpress-plugin-deployment branch http://ift.tt/2tLNmZr. Once the pull request has been merged, the edge part is unnecessary.

on

The on section controls whether a deployment should be performed. Deployment is triggered only when all requirements are met.

In the above example, we deploy to WordPress.org only when:

  1. it’s a PHP 7.1 build
  2. it’s a tagged commit
  3. it’s triggered by the TangRufus/tutsplus-dpl-demo repo (forks and pull requests would not trigger deployment)

slug

The plugin’s slug. 

If your plugin’s URL is http://ift.tt/2tM1aTM, then my-awesome-plugin is the plugin’s slug. 

username

Your WordPress.org account username with which you submitted the plugin for review approval.

password

The password of the WordPress.org account. Never save this password in the .travis.yml in plain text!

In the above example, we use the $WORDPRESS_ORG_PASSWORD environment variable, which can be set on the TravisCI web dashboard. Choose Settings from the cog menu, and click on Add in the Environment Variables section. Never enable the „Display value in build log“ option!

TravisCI-environment-variables-settings

build_dir

Everything in this directory will be committed to the WordPress.org subversion repository, i.e. will be included in the downloadable zip file. 

We set this to build because we have copied plugin files into build during before_deploy.

Tagging

Assume that we have fixed some bugs and are ready to publish a new version to WordPress.org.

These commands commit the changes to the master branch but do not trigger a deployment:

Only tagged commits trigger deployment:

Results

Head back to TravisCI and open the PHP 7.1 build log. You should see a deployment is logged.

And on the WordPress.org trac (http://ift.tt/2tcjpEF<your-plugin-slug>):

WordPress plugin subversion trac

Caveats

svn commit Twice

Since TravisCI ships with an old version of subversion which doesn’t play well with subdirectories, I do svn commit twice.

The first svn commit removes everything inside trunk. The second svn commit copies everything from build_dir to trunk.

Experimental

This provider is still experimental and is not merged to TravisCI’s official repo yet. You can keep track of TravisCI’s feedback on its pull request.

Using edge doesn’t merge my branch into the upstream master. There is a chance that my branch is behind the official repo. When it happens, you can fork my branch and rebase it, and then change source in .travis.yml to your GitHub repository.

Wrapping Up

To use this deployment provider:

  1. Host the plugin repository on GitHub.
  2. Connect GitHub and TravisCI.
  3. Add the configuration to .travis.yml.
  4. Push a tag.

I hope all the above helps you deploy plugins to WordPress.org faster. 

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 for you to improve your programming skills. Whatever the case, you can see everything we have available in the Envato Marketplace.

Thanks for reading!

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

Learn the Basics of PHP for WordPress in Our New Course

PHP is the language of WordPress. If you want to customize WordPress, for example by coding themes or plugins, PHP is the programming language you’ll need to learn.

In our new Coffee Break Course, WordPress Coding Basics: Learn PHP, Envato Tuts+ instructor Rachel McCollin will give you a quick, ten-minute introduction to PHP coding in WordPress. 

You’ll get an overview of PHP coding standards, and take a look at some of the most common WordPress functions that you’ll be hooking up to with your code. You’ll also learn about core WordPress coding concepts, such as actions and hooks, and you’ll get lots of links to tutorials, courses and books that will help you keep learning.

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.

You can also find loads of useful PHP scripts and WordPress plugins over on Envato Market to help you with your WordPress development. And if you want to learn WordPress development from start to finish, check out our learning guide: Learn WordPress Development.

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

Dynamic Page Templates in WordPress, Part 3

In the first two parts of this tutorial series, we covered what dynamic page templates were and why they were needed. We also looked at the code required to implement them. 

In this third and final tutorial in the series, I’ll be creating two examples of fully working dynamic page templates you can use in your own projects. These were specifically chosen to be easily extendable to suit your own needs, and are intended as inspiration for any other type of dynamic page templates you can think of.

The two dynamic page templates we’ll be taking a look at shortly are:

  • Simple Contact Form
  • Blog Post Archive

As well as implementing our page templates, I’ll also show you how to add extra polish, via custom CSS and JavaScript, to make interaction much more intuitive to end users.

Plus, we’ll take a look at how you can use page templates for any post type. Since WordPress 4.7, you can specify the post type a page template is associated with. We’ll see how you can modify an existing dynamic page template to take advantage of this new feature so it works with any post type.

We’ve a lot to cover in this tutorial, so let’s get started!

Theme Setup

We’ll be using a WordPress Twenty Seventeen child theme again, just as we did in part 2 of this tutorial series, to add our dynamic page template code. Let’s begin with a blank child theme.

Create a child theme folder called twentyseventeen-child and add the following files:

  • functions.php
  • style.css

Inside style.css, add:

And inside functions.php, add:

Add the child theme to your WordPress theme directory as we did before. If you’re not sure about how to do this, please refer back to part 2 in this tutorial series.

We now have a working (blank) child theme ready for us to add our dynamic page template code to.

Dynamic Form Page Template

Our first real implementation of a dynamic page template is a simple contact form. We’ll be adding the following fields:

  • Heading
  • Name
  • Subject
  • Email
  • Phone number

These are text input fields, apart from the heading, which is a standard HTML heading tag.

Before we implement the actual page template, though, we need to add custom controls to the page editor that will allow us to modify page template output. Then, when we create the page template, it will be rendered according to the page editor control settings.

In part 2 of this tutorial series, I mentioned that there’s no easy way to add custom controls directly to the ‚Page Attributes‘ meta box, where the page template drop-down is located.

Page Attributes

This means that we have to add our dynamic page template controls elsewhere for now. I’ll show you how to get around this limitation a little later on, with a little CSS and JavaScript magic. But for now, we’ll have to make do with adding our custom controls to a separate meta box.

In the DPT_Twenty_Seventeen_Child class, register two new action hooks in the init method, and a new method called page_template_meta_boxes.

The load-post.php and load-post-new.php action hooks run whenever a post (of any type) is edited or created. When this happens, we register another action hook add_meta_boxes that will trigger the creation of our custom meta box, which is done via the add_page_template_meta_boxes callback function. Let’s implement that function now.

The actual rendering of the meta box controls will be handled via the display_form_page_template_meta_box callback function, which was specified above as one of the arguments to add_meta_box().

For now, I’ve added some placeholder text so we can see our new meta box on the page editor.

Form Page Template Meta Box

Remember from earlier that our form page template will have a heading and four text fields. There are many ways we could choose to customize the form output, but in our case let’s add check boxes for each field that will allow us to toggle their visibility. Update display_form_page_template_meta_box() to include the following code.

We include a nonce field for security which will be verified later on, just before we save the form values into the database.

Note: If for any reason the nonce value cannot be verified then the settings won’t be saved. 

Then, current form values are retrieved from the database before the custom form fields are outputted inside the meta box.

Form Page Template Meta Box with Options

Currently, our check boxes won’t be saved when the post is updated. To make the form settings persist, we need to register a new hook in the init() method that triggers during a save_post action, and then implement the callback to manually update post meta settings.

Once the form nonce value and user permissions have been verified, along with a check to make sure we are on the correct post type, we can test for the posted form values and safely save the values to the database.

Our check boxes are now fully functional, so we can go ahead and implement the actual page template! Inside the root child theme folder, add a new folder called page-templates, and add to it a new file called form-page-template.php.

Add the following code to the new file to create a blank page template.

To reduce code complexity, our contact form doesn’t validate user input, and we’ve committed the usual form checks and validation, as we want to focus purely on making the form output dynamic without extraneous code.

First, we need to retrieve the dynamic contact form check box values.

Then we can add in the form code. This is very similar for each form field. Let’s take a look at the name field code.

We test the value of the check box from the page template settings and only output the form field if it’s checked. Otherwise, nothing gets outputted. This is repeated for each form field.

Once the form is submitted, we send an email to the site admin and display a message on screen. Putting this all together, we have our final page template code.

To test everything’s working correctly, make sure all the form page template check boxes are checked and update the post. Then take a look at the page template on the front end.

Looking at the template on the front-end

Now try unchecking some of the form page template check boxes. Only the fields specified are outputted. You have total control over how the form is displayed! In the screen shot below, I unchecked just the email and phone check boxes.

Changing options for the front-end

Note: If you’re working on a local WordPress environment then the mail function may not actually send the email. It will only work if you have a mail server set up and running.

The form could easily be extended to add any number of controls of any type. For example, you could add an optional CAPTCHA field to your form, or be able to specify the order of fields outputted, or even the text for the form heading/labels. The point here is that you can use dynamic page templates to customize your form however you want. The possibilities are literally endless!

Organizing Our Page Template Controls

You might have noticed that there are a couple of usability issues with the admin controls for our dynamic page template. Functionally it’s fine, but ideally the dynamic page template controls should be in the same meta box as the page template drop-down. 

The meta boxes

Remember that the reason we had to add our page template controls to a separate meta box in the first place was because there’s currently no WordPress hook available to add custom controls directly to the page template meta box.

Also, when a dynamic page template is selected, we only want the controls associated with that template to be visible. We can complete both requirements by adding some custom CSS and JavaScript to the page editor.

Specifically, we need to:

  • Hide the form meta box.
  • Wait for the admin editor page to fully load.
  • Move the form controls to the ‚Page Attributes‘ meta box.
  • Only display the admin form controls if the associated page template is selected.

Start by adding css and js folders to your child theme root folder. Inside the css folder create a style.css file, and in the js folder create a script.js file. You can call these anything you want, though. Just remember to make a note of the filenames if so, and replace them in the enqueue scripts code.

Then, we need to enqueue both files only on the page editor screen. We don’t want them added to all admin pages. Register a new action hook in the init() method to load scripts on admin pages, and add the callback function to enqueue the script files.

Notice how we’re targeting the page post type and then either the post-new.php or post.php admin pages. So, basically, unless we’re on the page editor, our scripts will not get loaded, which is what we want.

Let’s go ahead now and start adding CSS and JavaScript to customize the form page template controls. Firstly, hide the whole form meta box with CSS by adding this to style.css:

We could have done this with JavaScript, but we want the form meta box to be hidden immediately. If we did it via JavaScript, we’d have to wait until the page loaded, and you’d see a small flash as the meta box rendered on screen and then was hidden with JavaScript. So using CSS in this case is better.

Now for the JavaScript. Add this to script.js.

I’m not going to go into a huge amount of detail regarding the JavaScript, but here’s the overview.

We first cache a couple of CSS selectors and move the admin form controls to the Page Attributes meta box. Then, we have a displayControls() function that either hides or displays the form controls depending on the current value of the page template drop-down. We call displayControls() on page load, and then every time the drop-down is changed, to make sure we’re always in sync.

With the CSS and JavaScript added, the form page template controls are now displayed in the correct meta box, and only show if the associated page template is selected.

All of the page attributes

This looks much better and is way more intuitive to the user. Because meta boxes can be moved around WordPress admin screens, our dynamic page template controls would not necessarily have been anywhere near the page template drop-down! We’ve solved this problem in an elegant way to ensure our controls always appear directly underneath the page template drop-down!

Blog Posts Dynamic Page Template

Our next dynamic page template displays a list of your latest blog posts. But rather than just list all posts, we’ll implement a list box (similar to a drop-down) to allow you to choose the post category. Not only that, you’ll also be able to select multiple post categories.

Start by adding a new meta box in add_page_template_meta_boxes().

And now we need to implement the callback function to render our meta box.

Let’s break this down. We first define a variable to hold the list of post categories selected (if any) from the last time the post was updated. Another variable stores an array of all existing categories.

Note: We already have a nonce field from our previous form page template, so we don’t need to use another one here, as we are on the same admin page.

We then loop over the list of the site categories, populating a drop-down control as we go. Any category that was previously selected is selected again to keep everything in sync.

You might have noticed, though, that one of the arguments to selected() is a function call. Normally we just use selected() to compare two values to determine whether to mark the current item as selected. However, because we can select more than one category, our database setting is always an array of values (even if we actually only select one category).

The function q() is a helper function which allows us to check the current list item against the array of saved categories.

For each category, the category ID is passed into q() along with the saved category array. If the current category is in the list of saved categories then the current category is returned to selected() and will match the first argument. This will cause selected() to mark the current category as selected. This is an elegant way of handling multiple options for a single control.

All we need to do now is update save_page_template_meta() to handle saving blog post categories. Add this code to do just that.

Now, we need to create the blog posts page template. Inside your child themes page-templates folder, create a new file called blog-page-template.php, and add the following code.

The only real difference from our previous dynamic page template is the code inside the <main> HTML tag, so let’s take a closer look at that now.

We first set the value of the paged query variable, which is used to display posts over multiple pages, depending on the number of pages returned from our WordPress query. Then, we get the all the categories selected on the page editor meta box. The category array is converted to a string and given a default value if empty. A new WordPress query is then created and the results outputted in a standard loop.

The key thing here is that we’re able to control exactly which categories are passed to the query object, via the selections made on the page editor meta box. 

All we have to do now is hide the blog categories meta box and move the list control to the Page Attributes meta box. Just like we did before.

Inside style.css update the styles to hide the blog posts meta box:

The script.js file needs a little more code to be added. Here is the fully updated file.

Most of the changes worth noting are in the .on('change') function. Because we now have more than one dynamic page template, we have to test to see which one was selected from the drop-down, and then pass this in the corresponding element selector to displayControls().

We also need to hide all other page template controls apart from the one selected. And if the default page template is displayed, we hide all page template controls. The JavaScript code could be optimized further, but as we only have two dynamic page templates active, it does a good enough job for our needs.

An example of dynamic page templates

With these modifications in place, we now have two functioning dynamic page templates with each of their associated controls displayed directly underneath the page template drop-down.

Page Templates for Everyone

Earlier I alluded to how, in WordPress 4.7+, you can now assign page templates to any post type. Prior to WordPress 4.7, you could only assign them to pages, but not anymore!

All you have to do is add an extra line to the comment block in the page template header, and specify a comma-separated list of post types you want the page template to be available on.

The post type name needs to be the same as the slug entered when the post type was first registered, otherwise it will be ignored.

So, we can display page templates for any post type, but what about dynamic page templates? With just a few modifications, these can be supported too. Let’s take a look at what’s needed.

Luckily, apart from adding a line of code the top of your page template, all the necessary changes are in one file: functions.php.

Firstly, we need to enqueue the dynamic page template CSS and JavaScript not just on pages but for all post types we want to support dynamic page templates. So, in enqueue_editor_scripts(), we can do something like this.

Now, the dynamic page template scripts will be loaded on pages and the movie custom post type.

Next, in add_page_template_meta_boxes(), update each instance of add_meta_box() you want to show on a custom post type. Instead of just specifying page, we can pass in an array of required post types.

Finally, update save_page_template_meta() to support multiple post types just as we did for enqueue_editor_scripts(). And that’s it!

By just following these few short steps, you can modify your dynamic page templates to work for any post type.

Note: For any WordPress sites running less than version 4.7, the Template Post Type header text will simply be ignored, and all page templates will be displayed for pages by default. If this is not desirable, you can add custom code to make your page templates backwards compatible.

This snippet is taken from the Make WordPress blog, where you can find more information about backwards compatibility and the new page templates feature in more detail.

Conclusion

We’ve covered quite a bit of ground in the final part of this tutorial series. Specifically, we’ve implemented two fully working dynamic page templates and used custom CSS and JavaScript to add some polish to the user experience.

Even though the dynamic post types introduced in this tutorial series have been relatively simple, it would be very easy to extend them to create powerful and flexible page templates. There’s just so much scope to add some next-level functionality. And, from WordPress 4.7, you’re not limited to developing them just for pages either.

If you’re looking for other utilities to help you build out your growing set of tools for WordPress or for code to study and become more well-versed in WordPress, don’t forget to see what we have available in Envato Market.

Has this tutorial series inspired you to create dynamic page templates? If so, let me know in the comments below. I’d love to hear your ideas and how you might use them in your own projects.

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