Archiv der Kategorie: Tutorial

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

The 5 Best IDEs for WordPress Development (And Why)

I’ve been developing with WordPress for around ten years now and, during that time, have used my fair share of Integrated Development Environments (IDEs). There’s certainly no shortage of choice these days, with literally dozens of different editors/IDEs available. (We’ll come to the distinction between an IDE and an editor shortly.)

Some IDEs are free, others commercial. Some are pretty basic by default, while others do almost everything you want right out of the box. This abundance of choice is great as it means you’re almost certain to find one that suits the way you work and includes just the right set of features you’re looking for.

Which IDE you end up using for a particular project is largely a personal choice. If you’re used to using the same IDE for every project and it works for you then you may see no reason to use an alternative. However, it may well pay off trying out an alternative once in a while. What have you got to lose? If it results in a workflow boost then it’s definitely worth your while!

If you’re new to coding in WordPress then it can be a little daunting deciding which IDEs to take a look at. Too much choice can initially seem like a disadvantage. In this article, I’ll hopefully help make this choice a little easier by covering five of the top web development IDEs currently available.

In no particular order, these are:

  • PhpStorm
  • Sublime Text 3
  • Atom
  • Coda 2
  • NetBeans

Soon we’ll take a closer look at each one of our five IDEs in turn, to see how they can help you develop WordPress based projects. But first, let’s find out what exactly what we mean by an IDE.

What’s an IDE Anyway?

According to Wikipedia, an IDE is defined as:

An integrated development environment (IDE) is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of a source code editor, build automation tools and a debugger.

Breaking this down, this basically means an IDE is a programming environment you can use to develop software without having to leave the interface. Look at it as a Swiss army knife of software development! Everything you need is just there, on hand, to help you get the job done.

Unlike most editors, an IDE usually has support for full projects rather than being able to deal with individual source code files. Even if an editor is capable of editing more than one file, it may not support creating a project file that encompasses an entire folder full of files, together with settings specific to that project. These project settings can include references to external software libraries, editor setup, version control, and debugging preferences.

Deciding which IDE to use is very subjective as it really depends on the features you’re looking for, but some of the features you might expect to find in a full IDE could include:

  • Multiple language support (PHP, JS, CSS, HTML)
  • Code completion
  • Refactoring
  • Linting
  • Debugger
  • Build automation
  • SVN/Git integration
  • Code sniffing
  • Code highlight
  • Compiler
  • Interpreter
  • Database Management/Editing

There aren’t any hard and fast rules as to what defines an IDE exactly. And if you asked a dozen different developers for their must-have IDE features, you’d likely get widely varying responses. The more features from the above list that are built in to an application, or available as an add-on, the closer it comes to being an IDE.

You may have noticed that some of the ‚IDEs‘ we’ll be covering in this tutorial aren’t really IDEs at all, at first glance, but are editors masquerading as IDEs. So why include them at all in our list? Well, these particular editors have become extremely popular for web development and have strong user communities behind them which have driven forward an entire array of packages, extensions, and add-ons that actually go a long way to transforming them from just editors into very usable IDEs.

Think of them as ‚lite‘ IDEs. Fast, robust, and highly configurable. Remember our Swiss army knife analogy from earlier? I think it’s even more applicable here! Sublime Text 3, Coda 2, and Atom are excellent examples of these types of IDEs. They aren’t traditional IDEs, but they can fit the bill beautifully when customised correctly.

There can be advantages to choosing a lightweight editor over a fully featured traditional IDE. Typically, you’d expect them to run open and run quicker as they are smaller applications and have less processing overheads. You’ll know what I mean if you’ve ever opened an IDE with a large project and you have to wait a while for the application to open and index all the files before you can start editing!

Compare this with a ‚lighter‘ editor with only the features added that you need. This results in an IDE that doesn’t contain lots of functionality that you might never use. This helps keep your development setup light and fast. If you’re on a very fast machine, though, you may not notice too much difference in day-to-day development between a full IDE and a carefully configured editor. However, if you don’t have that luxury, then IDE performance could be a very important factor in your day-to-day development.

For these reasons, we decided to mix the list up somewhat and include both fully fledged and ‚lite‘ IDEs which could appeal to WordPress developers with a wide range of expectations and requirements.

Let’s kick off our IDE tour by looking at PhpStorm.

PhpStorm

PhpStorm

PhpStorm is a commercial IDE from JetBrains, and it boasts an impressive array of features out of the box. One instantly attractive feature of PhpStorm is its support for WordPress development without the need for add-ons. PhpStorm automatically detects if your existing project is WordPress based. There’s even a built-in WordPress Plugin project type to help get you started developing plugins more easily!

With WordPress supported in your project, you have full access to code completion for all the built-in WordPress functions, plus action and filter hook code completion! You can easily jump to function definitions and usages of particular functions, which is very useful. PhpStorm has the best WordPress support out of all the IDEs covered in our review.

For a new user, though, the sheer number of features available in PhpStorm could make it seem a little daunting to begin with. It’s worth persevering with, though, as PhpStorm has excellent documentation and video tutorials available via the PhpStorm website.

Because PhpStorm is so feature rich, it can take a while to load, especially for WordPress projects as there are hundreds of files to index for the code completion features to work properly. However, once fully loaded, PhpStorm feels pretty responsive when editing files, with no noticeable lags. One noticeable thing about PhpStorm is how regularly it’s updated with bug fixes and new features. Even though it has been around since 2009, PhpStorm still has a strong release cycle, which is very encouraging. You just feel that PhpStorm will be around for years to come.

And don’t be put off by the name—PhpStorm isn’t just for PHP development (it has full support for PHP 7, by the way). It also has excellent built-in support for HTML, JavaScript, and CSS, which are all essential to modern WordPress development!

PhpStorm Details:

  • Website: http://ift.tt/1qtYAaX
  • Commercial: Yes (Free 30-day trial available)
  • Initial Release: 2009
  • Regularly Updated: Yes
  • Extensions Supported: Yes – Plugins
  • Written In: Java
  • Cross-platform Support: Yes

Sublime Text 3

Sublime Text 3

Next on our list is Sublime Text 3, developed by Jon Skinner. It’s proven to be a very solid choice amongst web development professionals. Over the years, it has built up a significant following with its powerful, slick, and very fast user interface. It is also well known for being extremely stable and can handle very large files with ease, which other editors have been known to struggle with.

Interestingly, as popular as it is, Sublime Text 3 hasn’t seen a major release for a few years now. Although it is regularly updated, these mostly contain bug fixes along with minor enhancements and new features. At the time of writing, Sublime Text 3 is still currently in beta, but it was first initially released as a beta in 2013! And there isn’t currently any news on a new major release.

On startup, Sublime Text 3 is very quick to launch. In fact, it is almost instantaneous. It runs very fast too, with no lags or glitches, which makes for an extremely smooth and productive editing experience. It’s fairly minimalist out of the box and features a package manager to install add-ons (written in Python) without the need to restart Sublime Text in most cases (which is a nice touch).

As mentioned above, it handles large file sizes extremely well and is very robust, which means it is not prone to crashing. There’s a vast array of powerful add-ons (called packages) that make Sublime Text very flexible and versatile too. These include packages specific to WordPress development. There’s no denying that Sublime Text 3 is a sheer pleasure to use.

You can also find a large amount of written tutorials and video tutorials on Sublime Text 3, which are mostly up to date. This seems to prove that Sublime Text 3 is still very popular and widely used by many web developers on a day-to-day basis, which is a testament to the quality of this fantastic little editor.

Even though Sublime Text is still currently very popular, it could possibly start to lose ground over the next couple of years. However, if the Sublime Text 3 package library continues to flourish then the lack of a major release may not be important in the short term.

You could certainly do a lot worse than give Sublime Text 3 a try. You can evaluate it for free for an unspecified amount of time.

Sublime Text 3 Details:

  • Website: http://ift.tt/1xDiEMc
  • Commercial: Free to evaluate (license required for continued use)
  • Initial Release: 2008
  • Regularly Updated: No
  • Extensions Supported: Yes – Packages
  • Written In: C++, Python
  • Cross-platform Support: Yes

Atom

Atom

Built by GitHub, Atom is the new kid on the block out of all the IDEs in our review. Released in 2014, it’s one of the most popular editors around at the moment and has a rapidly growing user community.

This popularity could be due, at least in part, to the fact that Atom is open source and entirely community driven. Contributing to Atom is a similar process to WordPress in that anyone can contribute to core development, as long as the guidelines are adhered to. And because Atom is publicly hosted on GitHub, contributing is very easy if you’re familiar with Git repositories.

Atom also has a huge add-on library, with well over 6,000 currently available on the official Atom packages page. This means you have a better chance of finding a package to do most things you require. There are a range of packages that make WordPress specific development a breeze too.

Similar to Sublime Text, Atom has full support for projects as well as individual file editing. And there is built-in support for embedded Git control, which isn’t surprising as it’s developed by GitHub!

It’s quite basic out of the box, but then again so is Sublime Text 3 until you start configuring it. Updates are released on a regular basis, but you’d expect that from a relatively new editor.

Some users have reported experiencing slow load time and patchy performance when editing, especially when dealing with large file sizes. Whether this is anything to do with Atom being developed in JavaScript is debatable. By contrast, Sublime Text is developed in C++ which runs very fast natively. Only time will tell if future versions of Atom can address these issues. It’s worth remembering, though, that the Atom codebase is still relatively young and has plenty of time to mature.

Overall, Atom is a great little editor that you can easily configure for WordPress development. It’s not surprising that Atom has gained so much traction already, and it will be really interesting to see how it matures over the next couple of years. It’s definitely one to keep your eye on!

Atom Details:

  • Website: https://atom.io/
  • Commercial: No (100% free)
  • Initial Release: 2014
  • Regularly Updated: Yes
  • Extensions Supported: Yes (Packages)
  • Written In: JavaScript
  • Cross-platform Support: Yes

Coda 2

Coda 2

Coda was first released in 2007, just one year ahead of Sublime Text. It’s had a very strong following over the years, sharing much of the professional web development market with Sublime Text on Mac computers. This is the main drawback with Coda—even ten years after the initial release, there’s still no Windows version available. This is the only editor in our review that isn’t cross-platform compatible.

Has this had a negative impact on its popularity? That’s difficult to tell, but it’s relatively rare these days to find web development applications that are Mac (or Windows) only. This would be a shame, though, as it’s a great editor. Editor features include a built-in terminal and source control client, as well as an FTP client and built-in MySQL editor. Coda 2 also supports plugins to extend functionality, including plugins specific to WordPress development. However, it’s not clear how regularly these WordPress add-ons are updated. It could affect the usefulness of the editor if they were to fall too far behind what other editor add-ons can offer.

Although Coda 2 is regularly updated, these are mainly bug fixes, and there hasn’t been a major release for a few years now. Coda 3 looks to be some way off, judging by this response to a user request in 2015. However, it’s important to remember that this isn’t necessarily anything to worry about. Sublime Text 3 is still officially in beta(!) and that’s currently still very popular.

Make no mistake, Coda 2 is a very good choice for a code editor. It may be starting to show its age a little, but I’d still definitely recommend checking it out before you make a final decision on which IDE you choose. Especially if you’re a macOS user!

Coda 2 Details:

  • Website: [https://panic.com/coda/]
  • Commercial: Yes (Free 7 day trial)
  • Initial Release: 2007
  • Regularly Updated: Yes
  • Extensions Supported: Yes – Plugins
  • Written In: (Unknown)
  • Cross-platform Support: No

NetBeans

Netbeans

NetBeans has been around a long time now (since the mid-1990s) but is still flourishing and able to compete with newer IDEs. Like PhpStorm, it’s developed in Java and is available for multiple platforms. The core NetBeans application is comprised of a set of ‚modules‘ to add features to the IDE to aid web development.

NetBeans has been a strong favourite among web developers for many years as one of the most fully featured IDEs available. Its main competition during this time was from applications such as Dreamweaver, which is still in active development by Adobe but is nowhere near as popular as it once was. So why is NetBeans still going strong?

Being developed in Java meant that it was cross-platform compatible from day one, and being free makes it attractive to a much wider audience and means it gets plenty of recommendations from people who have used it for years. And it’s not surprising that it has a very large user community due to being around for over 20 years!

NetBeans works well with WordPress projects. You get the usual code hinting and highlighting, plus full code navigation, but you also get a powerful debugger, which is pretty impressive for a 100% free product. There are a whole range of add-ons for closer integration with WordPress, which will make developing themes and plugins much easier.

Updates for NetBeans seem to have slowed somewhat over the last couple of years, with only one update per year since 2014. However, a major release (NetBeans 9) is slated for July 2017 to coincide with the release of JDK9. NetBeans also has full support for PHP 7 since version 8.2, so if you need to develop against the latest version of PHP then NetBeans has you covered.

NetBeans Details:

  • Website: https://netbeans.org/
  • Commercial: No (Free)
  • Initial Release: 1996 (original name Xelfi)
  • Regularly Updated: Yes
  • Extensions Supported: Yes – Modules
  • Written In: Java
  • Cross-platform Support: Yes

Other IDEs And Editors For WordPress Development

As I mentioned in the introduction, there are many other IDEs you can use for development work. You don’t just have to limit yourself to the ones covered in this tutorial. Some of the others you could take a look at are:

Conclusion

In this tutorial, we’ve looked at five popular editors/IDEs for web development, and specifically WordPress development. It really boils down to your particular needs. If you want to maintain a ‚lite‘ editor experience then using applications such as Coda 2, Atom, or Sublime Text 3 could be a good choice as you can configure them to only include the features you need.

There’s no denying PhpStorm’s feature set—it’s truly impressive. But not everyone would need all that functionality straight away. In fact, beginner developers may be put off by the huge array of features just waiting to be used. NetBeans has been around for over 20 years and has the most mature codebase of the IDEs in our review, which makes that a solid choice too.

What’s your favorite IDE for WordPress development? And what features are essential to you in your daily workflow? If you use one of the IDEs we’ve reviewed in this article then what do you love about it? Let us know in the comments below.

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

20 Best Visual Composer Add-ons & Extensions of 2017

With over one million users worldwide, the ever popular drag
and drop page builder, Visual Composer, has inspired a legion of developers to
create loads of cool and useful addons and extensions that extend its functions
and provide virtually unlimited possibilities when it comes to creating the
WordPress site of your dreams. We’ve compiled a list of the 20 best of these
addons and extensions to be found at Code
Canyon
.

Some offer a huge range of features within one powerful
extension while others provide just one specialised and targeted function. Some
have been on the market for a while and have earned a reputation as the go-to
plugin for users of Visual Composer while others are new to the market but have
the potential to carve out their own unique following. Either way, you’re bound
to find a plugin here that will answer your prayers… some of them, anyway.

1. Massive Addons for Visual Composer

Massive Addons for Visual Composer arrived on the scene
early last year and has been gaining quite a following. This all-in-one
extension is packed with features that will make even the most demanding web
designer happy. In addition, it’s
compatible with most WordPress themes that support Visual Composer 4.7+.

Massive Addons for Visual Composer

Notable features:

  • over 70 customisable shortcodes and addons
  • 31 page templates
  • supports WooCommerce
  • over 15 training videos
  • and more

Massive Addons for Visual Composer is exactly
what you need if you’re looking for a Visual Composer extension that covers a huge range
of functionality.

2. Visual
Composer Extensions Addon

One of the top sellers at Code Canyon, Visual Composer
Extensions Addon is packed with a dizzying amount of features including a Google
Font Manager with more than 810 fonts, over 70 CSS3 animations, and the
option to use any Visual Composer element in a sidebar. In addition, when you
download this addon, you also get a built-in downtime/maintenance
manager for your site which allows you to create a custom downtime page.

Visual Composer Extensions Addon

Notable features:

  • over 150 different elements
  • Icon and Google Font Managers
  • custom premium Lightbox
  • template and widget builder
  • and more

With its record of consistent updates and addition of new
features to an already great product, Visual
Composer Extensions Addon
 is bound to remain a crowd favourite for years to come.

3. Kaswara – Modern Visual Composer Addons

Kaswara – Modern Visual Composer Addons, just entered the
market this January and though it doesn’t have as many elements as other addons
and extensions that have been on the market longer, it certainly has been gaining
lots of attention with its sleek and beautiful designs.

Kaswara - Modern Visual Composer Addons

Notable features:

  • contact form designer
  • shortcode manager
  • replica section
  • Icon and Google font managers
  • and more

Already gaining a following of faithfully with its well-executed
features Kaswara – Modern Visual Composer Addons is the
newcomer to watch in the Visual Composer addon market.

4. Ultimate
Addons for Visual Composer

The Ultimate Addons is one of the highest rated and best
selling addons for Visual Composer and no wonder. With 20 updates since its
inception, this is an addon that works consistently to stay ahead of the
competition and deliver a product that meets the needs of a wide range of
designers.

Ultimate Addons for Visual Composer

Notable features:

  • parallax and video backgrounds
  • video tutorials
  • over 40 unique elements
  • 15 demo pages for inspiration
  • and more

A perennial favourite, Ultimate
Addons for Visual Composer
 ticks a
lot of boxes as a reliable Visual Composer addon.

5. Visual
Composer KIT (VCKit) Addon
 

Visual Composer KIT is
one of the latest Visual Composer addons at CodeCanyon, having hit the market
in early April. With over 40 beautifully designed elements and highly customized
features, this all-in-one addon will most certainly be a major player at CodeCanyon in the coming months and years.

Visual Composer KIT VCKit Addon

Notable features:

  • five pre-designed demo homepage templates
  • over 45 animation effects
  • one-click installation
  • and more

Another great new all-in-one addon, Visual
Composer KIT (VCKit) Addon
is a great feature-rich choice for Visual
Composer users.

6. Visual Composer Extensions Addon All in One

Visual Composer Extensions Addon All in One combines 64
different functions that extend Visual Composer functionality in one powerful
addon.

Visual Composer Extensions Addon All in One

Notable features:

  • carousel and gallery
  • to-do list and price
    table
  • draggable timeline
  • iHover with 35
    transitions
  • and more

Visual
Composer Extensions Addon All in One
is another oldie but goodie holding
its own in the Visual Composer market.

7. Video
& Parallax Backgrounds For Visual Composer

Video & Parallax Backgrounds For Visual Composer is a
specialised addon that allows
you to easily add video backgrounds as well as image parallax scrolling effects
to your WordPress site. It also provides Row Adjuster Elements, allowing you to widen your rows into
full-width, full-height or full-screen.

Video  Parallax Backgrounds For Visual Composer

Notable features:

  • HD video backgrounds
  • parallax in four
    directions and fixed
  • hover backgrounds
  • mix and match,
    single or multiple parallaxes, videos and hover backgrounds
  • and more

The Video
& Parallax Backgrounds For Visual Composer
provides an exciting and
easy way to liven up your website by adding video and parallax features to your background.

8. Team
Showcase for Visual Composer WordPress Plugin

Team Showcase for
Visual Composer is another specialised plugin for Visual Composer that enables
you to add a team or staff member section anywhere on your website in different
layouts.

Team Showcase for Visual Composer WordPress Plugin

Notable features:

  • ten predefined responsive themes
  • four different display options
  • ability to create custom
    links for each team member
  • animated in and out slider
  • and more

Though designed
specifically for showcasing team members, Team
Showcase for Visual Composer WordPress Plugin
can also be repurposed to display testimonials or other image and text
content.

9. Visual
Composer – Sortable Grid & Taxonomy Filter

If you’re looking for an interesting way to display your
posts or products, then the Sortable
Grid and Taxonomy Filter may be the
answer for you. This addon is packed with features that allow you to display your
products, posts or other types of content in a selection of grid layouts.

Visual Composer - Sortable Grid  Taxonomy Filter

Notable features:

  • fully customizable
  • five different grid layouts
  • CSS3 animations to animate your grid items
  • custom taxonomy filter—you can enable filter posts from a
    determined category
  • and more

Visual
Composer – Sortable Grid & Taxonomy Filter
is
a great addon to bring some variety to the way you sort and display content
like posts, products, and more.

10. Visual
Composer Add-on Image Hotspot with Tooltip

The Visual Composer Add-on Image Hotspot with Tooltip comes
bundled with another bestselling CodeCanyon addon, the Visual
Composer Extensions All In One
. But for those who don’t own that plugin,
this standalone enables you to add a hotspot icon with a popup tooltip to any
image on your site.

Visual Composer Add-on Image Hotspot with Tooltip

Notable features:

  • the tooltip feature supports text, images, video, and other
    kinds of content
  • hotspot icon’s position easily customisable
  • hotspot icons come in a variety of colours
  • and more

Visual
Composer Add-on Image Hotspot with Tooltip
may
not be for everyone but will be of great
value to photographers and e-commerce or educational sites.

11. Testimonials
Showcase for Visual Composer Plugin

Testimonials
Showcase is designed specifically to help you display and manage your testimonials.
It comes with several themes, colour schemes, and customisable options that will
allow you to integrate the addon into your site seamlessly.

Testimonials Showcase for Visual Composer Plugin

Notable features:

  • ten responsive themes
  • grid or slider display
  • submission form that allows customers to write and submit
    their testimonials
  • ability to filter testimonials
  • and more

Testimonials
Showcase for Visual Composer Plugin
will
have a broad appeal to businesses that need an elegant and easy solution to
collecting and displaying customer feedback.

12. Unique
Hover Effects – VC Addon

Unique Hover Effects is a simple but wonderful Visual
Composer addon that allows you to animate your images and create various hover effects
including captions.

Unique Hover Effects - VC Addon

Notable features:

  • over eight choices of image animations
  • ability to customise settings for every image
  • external linking
  • over six caption animations
  • and more

Image-rich websites will find the Unique
Hover Effects – VC Addon
a great resource for creating captions with a bit
of pizazz.

13. Modal
Popup Box For Visual Composer

Modal Popup Box comes bundled with Code Canyon’s top-selling Ultimate
Addons for Visual Composer
but can also be bought as a standalone for those
who’re just looking for a popup feature. The addon allows you to add popups for
a wide variety of purposes: opt-ins for email subscription, shortcodes, images,
videos, contact forms, or social media widgets.

Modal Popup Box For Visual Composer

Notable features:

  • ability to create popups of various content, including images and video
  • MailChimp supported
  • shortcode support
  • and more

Modal Popup Box For Visual Composer is the easy solution for adding
various types of popups and opt-ins to your website.

14. Smart
One Page Navigation – Addon For Visual Composer

Smart One Page Navigation is a great plugin for users
looking for a quick, easy, no-hassle way to create a landing page or a single-page website.

Smart One Page Navigation - Addon For Visual Composer

Notable features:

  • supports Google Fonts and Font Awesome Icons and Image Icons
  • smart sticky navigation
  • supports fullscreen scrolling 
  • unlimited colour selection
  • and more

A five star rated addon, Smart
One Page Navigation
is the only Visual Composer addon  you need to create a beautiful single-page
websites or landing page.

15. Ultimate
MailChimp Form Builder for Visual Composer

This plugin is designed specifically to help users of
MailChimp’s email subscription service create subscription forms quickly and
easily with Visual Composer.

Ultimate MailChimp Form Builder for Visual Composer

Notable features:

  • unlimited MailChimp accounts in one site
  • supports custom fields
  • easy custom layout via Visual Composer
  • and more

MailChimp users will be excited to check out Ultimate
MailChimp Form Builder
.

16. Fast
Gallery for Visual Composer WordPress Plugin

Fast Gallery allows
you to build a variety of photo galleries and insert them into your WordPress
site.

Fast Gallery for Visual Composer WordPress Plugin

Notable features:

  • eight types of galleries
  • nine different
    layouts
  • animations with over
    200 effects
  • video tutorial
    available
  • and more

With its large selection of gallery types, layouts and
animation effects, Fast
Gallery for Visual Composer WordPress Plugin
will be an indispensable tool
for image-rich sites.

17. Food
Menus Addons for Visual Composer WordPress Plugin

Food Menus Add-ons offers a great selection of different
customizable food menu layouts and a plethora of customizable features to suit
a wide range of tastes and styles.

Food Menus Addons for Visual Composer WordPress Plugin

Notable features:

  • 24 food menus to choose from 
  • multiple food menus in one page
  • over 1,000 icons
  • custom hover effects
  • and more

Food Menus
Add-ons
is the perfect Visual Composer addon for websites dedicated
to restaurants, cafes, caterers and chefs, as well as all those foodie bloggers
out there.

18. Visual
Composer | Pricing Tables By NBGoyani

Pricing Tables is another single function Visual Composer
addon that is ideal for those who need to create pricing tables for their
online business. It comes with several beautifully designed tables in a wide
selection of colours and animations.

Visual Composer  Pricing Tables By NBGoyani

Notable features:

  • over 18 unique styles
  • ability to change colours to match your website
  • over 60 load animations effects
  • Font Awesome included
  • and more

Visual
Composer | Pricing Tables By NBGoyani
 offers a simple, intuitive way to create beautiful pricing tables for your website.

19. Visual
Composer Add-on Bookshelf

Bookshelf is exactly what the name suggests, a visual
composer addon that allows you to install virtual bookshelves on your WordPress
site. You can upload images of books or magazines from your computer and link
out to their authors, or you can use it with the Flipbook WordPress Plugin, which you’d need to buy separately.

Visual Composer Add-on Bookshelf

Notable features:

  • easily customize default width
  • easily adjust the colours
  • category name for books
  • outlinking
  • and more

Visual
Composer Add-on Bookshelf
is ideal for showing off 2D items, magazine
layouts you’ve created or books you want to highlight.

20. Vera – Essential Multimedia Addons for Visual Composer

Vera is a multimedia addon for Visual Composer that enables
you to add video, audio and radio players, multimedia carousels, countdown
timers and more to your WordPress site.

Vera - Essential Multimedia Addons for Visual Composer

Notable features:

  • video, audio and radio players
  • logos showcase pro
  • multimedia carousel
  • multimedia playlist slider
  • and more

One of the great things about purchasing Vera –
Essential Multimedia Add-ons for Visual Composer
is that once
purchased, users continually receive bonuses that extend the functionality of
the plugin.

Conclusion

These 20
plugins just scratch the surface of products 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, head on over to the site
and check out the ever so useful free WordPress tutorials we have on offer.

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