Building a WordPress Plugin with Vue

In this tutorial, we’ll learn how to integrate [Vue.js](https://vuejs.org/v2/guide/index.html#What-is-Vue-js) with a WordPress plugin to provide a modern UI experience to our WordPress users.

Vue.js is a very popular progressive JavaScript library for building modern and rich user interfaces similar to Angular and React in terms of popularity, performance and component-based architecture. We’ll dive into the entire process of building a very simple WordPress plugin with a Vue interface that interacts with the WordPress REST API through the JavaScript Fetch API.

We’ll create a shortcode that will allow us to add a latest published posts widget in our WordPress website. The UI of the widget is a Vue app which fetches the latest published posts via the /wp-json/wp/v2/posts?filter[orderby]=date WP-API endpoint.

This tutorial assumes some familiarity with Vue.js. We’ll see how to create a Vue instance, use life-cycle hooks like mounted(), and also the JavaScript Fetch API to interact with the WordPress REST API.

Creating a WordPress Plugin

In this section, we’ll see how to create a WordPress plugin that registers a shortcode in a few steps.

Create a Folder in `wp-content/plugins`

Let’s start by creating the back-end part of our plugin. Plugins live inside the wp-content/plugins folder. Navigate to this folder inside your WordPress installation folder and create a sub-folder for your plugin. Let’s call it vueplugin:

cd /var/www/html/wp-content/plugins mkdir vueplugin

Inside your plugin folder, create a vueplugin.php file and add the initial content:

<?php
/*
Plugin Name: Latest Posts
Description: Latest posts shortcode
Version: 1.0
*/

These comments are used as meta information for the plugin. In our case, we simply provide a plugin name, description and version.

If you visit the plugins page in the admin interface you should be able to see your plugin listed:

Creating a Shortcode

Shortcodes are used via WordPress plugins to enable users to add content to posts and pages. To register a shortcode you need to add the following minimal code in your plugin file:

function handle_shortcode() {

return ‘My Latest Posts Widget’;

}

add_shortcode(‘latestPosts’, ‘handle_shortcode’);

We’re registering a shortcode named latestPosts.

WordPress provides the built-in add_shortcode() function to create the shortcode in your WordPress plugin. The function takes a name as the first parameter and the handler function that processes your shortcode logic and returns an output as a second parameter.

At this point, we’re only returning a static string from our shortcode, but shortcodes are more useful when used to insert dynamic content.

Now, let’s activate the plugin from the admin interface by clicking on the Activate link below the plugin name:

You can use a shortcode by enclosing it in square brackets — that is, [SHORTCODE_NAME]. The text inside the brackets is the name we passed as the first parameter to the add_shortcode() function. It gets replaced by the output returned by the PHP function passed as the second parameter.

To test if our shortcode is successfully registered, we can create a new post and add [latestPosts] in the post content:

You should see My Latest Posts Widget sentence rendered:

Now, instead of displaying the static My Latest Posts Widget string, let’s display the latest posts using Vue.js.

Integrating Vue.js with a WordPress Plugin

The Vue docs lists different methods of using Vue.js. The easiest one is using a <script> tag to include the library script, which is also the most straightforward way to integrate Vue.js with WordPress.

You can integrate a Vue app with WordPress in a few easy steps:

First, you need to add a DOM element in WordPress (e.g. via a shortcode) where you can mount the Vue app.
Next, you need to enqueue the Vue library script.
Finally, you need to create a Vue app inside a separate JavaScript file and enqueue it.

Unlike the traditional approach of using WordPress, using Vue.js will allow you to add better interactivity and user experience. Instead of needing to constantly reload the current page, users can interact with the page and have the interface dynamically updated. Apps created with Vue.js are called SPAs, or single page applications. But in our case, instead of creating a complete SPA, we’ll only use Vue.js to create a simple widget that can be used to render information in a small part of your page (such as in the sidebar). Think of a widget created with Vue.js as a sort of a small SPA.

Let’s start by enqueueing the Vue library in WordPress. We need to add another function to our plugin which handles the enqueueing of the Vue library:

function enqueue_scripts(){

global $post;

if(has_shortcode($post->post_content, “latestPosts”)){

wp_enqueue_script(‘vue’, ‘https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js’, [], ‘2.5.17’);

}

}

We first check if we’re displaying a post that includes our latestPosts shortcode, then we enqueue the Vue script using the wp_enqueue_script() function.

You can check if the script is included by visiting your post source code:

Next, go back to the handle_shortcode() function and change it to include a <div> where we can render a Vue app:

<div id=“mount”></div>

Next, create a latestposts.js file inside your plugin folder and add the following code to create a Vue instance:

( function() {

var vm = new Vue({

el: document.querySelector(‘#mount’),

mounted: function(){

console.log(“Hello Vue!”);

}

});

})();

We create a new Vue instance with the Vue() function, which is the first step to start the Vue application.

When creating the Vue instance, you also need to provide an options object, which allows you to provide different options for building your Vue app.

In our example, we use the el property to provide the Vue instance an existing DOM element to mount on. This can be either a CSS selector or an actual HTMLElement. In our case, we use document.querySelector(‘#mount’) to get the HTML element of the <div> with the #mount ID.

We also use the mounted property to provide a function that will be called after the instance has been mounted. At this point, we only log a Hello Vue! string on the console.

You can also browse the full list of the available options in the API reference.

Next, just like the Vue library, you need to enqueue this file. Inside the enqueue_scripts() function add the following code:

wp_enqueue_script(‘latest-posts’, plugin_dir_url( FILE ) . ‘latest-posts.js’, [], ‘1.0’, true);

The plugin_dir_url() built-in function is used to get the absolute URL of a file. FILE is a constant that gives you the file-system path to the current PHP file. This will allow us to get the absolute path of the latest-posts.js file without using any hardcoded URLs that could be changed on a different system.

At this point you should see the Hello Vue! string on the browser’s console:

And you should also see the latest-posts.js script included in the source code of a post that contains the shortcode.

Next let’s change the plugin to render the previous My Latest Posts Widget string, but this time from Vue. In your Vue instance, include the template property with whatever HTML code you want to render:

 var vm = new Vue({

el: document.querySelector(‘#mount’),

template: “<h1>My Latest Posts Widget</h1>”,

mounted: function(){

console.log(“Hello Vue!”);

}

});

Now, let’s fetch and render the latest posts using the fetch API.

In the Vue instance, add a data property with a posts array which will hold the fetched posts:

 var vm = new Vue({

el: document.querySelector(‘#mount’),

data: {

posts: []

},

Next, let’s include the code to fetch the latest posts in the mounted life-cycle event that gets fired when the component is mounted on the DOM:

 var url = ‘/wp-json/wp/v2/posts?filter[orderby]=date’;

fetch(url).then((response)=>{

return response.json()

}).then((data)=>{

this.posts = data;

})

We call the JavaScript fetch() method which returns a Promise. After successfully resolving the Promise, we assign the data to the posts array.

Finally, add the template property:

template: &lt;div&gt;&lt;h1&gt;My Latest Posts&lt;/h1&gt;   &lt;div&gt;     &lt;p v-for="post in posts"&gt;       &lt;a v-bind:href="post.link"&gt;{{post.title.rendered}}&lt;/span&gt;&lt;/a&gt;     &lt;/p&gt;   &lt;/div&gt; &lt;/div&gt;,

We use the Vue v-for directive to loop through the posts and display the title.rendered and the link properties of each post.

This is a screenshot of the result for me.

In your case, it may look different depending on your active theme and the posts you have in your WordPress website.

If you click on the post title you should be taken to the post page.

We can add more features to our widget, such as real-time data fetching, so the user doesn’t need to reload the page to retrieve the latest published posts. We can achieve this by continuously polling the WP-API endpoint using the JavaScript setInterval()method.

First, move the code that fetches the posts in its own method:

 var vm = new Vue({

/…/
methods:{
fetchPosts: function(){

var url = ‘/wp-json/wp/v2/posts?filter[orderby]=date’;

fetch(url).then((response)=>{

return response.json()

}).then((data)=>{

this.posts = data;

console.log(this.posts);

});

}

},

We use the methods property of the Vue instance to add custom methods in our Vue instance. You can then access these methods directly on the instance via this.

Next, in the mounted() function, add the following code to fetch posts every five seconds:

 var vm = new Vue({

/…/

mounted: function() {

console.log(“Component is mounted”);
this.fetchPosts();

setInterval(function () {

this.fetchPosts();

}.bind(this), 5000);

}

You can test this by opening the WordPress admin interface in another browser’s tab and adding a new post. You should see your Vue widget updated with a new post without manually refreshing the page.

Conclusion

In this tutorial, we’ve seen how to create a WordPress plugin that makes use of the Vue.js library. We’ve created a shortcode that can be used to display a Vue component in your posts and pages that fetches and displays the latest posts every five seconds. This was achieved via polling the WordPress REST API using the setInterval() method.

Learn more

☞ Learn by Doing: Vue JS 2.0 the Right Way

☞ Vue.js 2 Essentials: Build Your First Vue App

☞ Getting started with Vuejs for development

☞ Horizontal Feed Component with Sass and VueJs 2

☞ Learn Vue 1 JS introduction to simple reactive JavaScript

#vue-js

What is GEEK

Buddha Community

Solwin Infotech

1622722796

How To Customize WordPress Plugins? (4 Easy Ways To Do)

This is image title
WordPress needs no introduction. It has been in the world for quite a long time. And up till now, it has given a tough fight to leading web development technology. The main reason behind its remarkable success is, it is highly customizable and also SEO-friendly. Other benefits include open-source technology, security, user-friendliness, and the thousands of free plugins it offers.

Talking of WordPress plugins, are a piece of software that enables you to add more features to the website. They are easy to integrate into your website and don’t hamper the performance of the site. WordPress, as a leading technology, has to offer many out-of-the-box plugins.

However, not always the WordPress would be able to meet your all needs. Hence you have to customize the WordPress plugin to provide you the functionality you wished. WordPress Plugins are easy to install and customize. You don’t have to build the solution from scratch and that’s one of the reasons why small and medium-sized businesses love it. It doesn’t need a hefty investment or the hiring of an in-house development team. You can use the core functionality of the plugin and expand it as your like.

In this blog, we would be talking in-depth about plugins and how to customize WordPress plugins to improve the functionality of your web applications.

What Is The Working Of The WordPress Plugins?

Developing your own plugin requires you to have some knowledge of the way they work. It ensures the better functioning of the customized plugins and avoids any mistakes that can hamper the experience on your site.

1. Hooks

Plugins operate primarily using hooks. As a hook attaches you to something, the same way a feature or functionality is hooked to your website. The piece of code interacts with the other components present on the website. There are two types of hooks: a. Action and b. Filter.

A. Action

If you want something to happen at a particular time, you need to use a WordPress “action” hook. With actions, you can add, change and improve the functionality of your plugin. It allows you to attach a new action that can be triggered by your users on the website.

There are several predefined actions available on WordPress, custom WordPress plugin development also allows you to develop your own action. This way you can make your plugin function as your want. It also allows you to set values for which the hook function. The add_ action function will then connect that function to a specific action.

B. Filters

They are the type of hooks that are accepted to a single variable or a series of variables. It sends them back after they have modified it. It allows you to change the content displayed to the user.

You can add the filter on your website with the apply_filter function, then you can define the filter under the function. To add a filter hook on the website, you have to add the $tag (the filter name) and $value (the filtered value or variable), this allows the hook to work. Also, you can add extra function values under $var.

Once you have made your filter, you can execute it with the add_filter function. This will activate your filter and would work when a specific function is triggered. You can also manipulate the variable and return it.

2. Shortcodes

Shortcodes are a good way to create and display the custom functionality of your website to visitors. They are client-side bits of code. They can be placed in the posts and pages like in the menu and widgets, etc.

There are many plugins that use shortcodes. By creating your very own shortcode, you too can customize the WordPress plugin. You can create your own shortcode with the add_shortcode function. The name of the shortcode that you use would be the first variable and the second variable would be the output of it when it is triggered. The output can be – attributes, content, and name.

3. Widgets

Other than the hooks and shortcodes, you can use the widgets to add functionality to the site. WordPress Widgets are a good way to create a widget by extending the WP_Widget class. They render a user-friendly experience, as they have an object-oriented design approach and the functions and values are stored in a single entity.

How To Customize WordPress Plugins?

There are various methods to customize the WordPress plugins. Depending on your need, and the degree of customization you wish to make in the plugin, choose the right option for you. Also, don’t forget to keep in mind that it requires a little bit of technical knowledge too. So find an expert WordPress plugin development company in case you lack the knowledge to do it by yourself.

1. Hire A Plugin Developer3
This is image title

One of the best ways to customize a WordPress plugin is by hiring a plugin developer. There are many plugin developers listed in the WordPress directory. You can contact them and collaborate with world-class WordPress developers. It is quite easy to find a WordPress plugin developer.

Since it is not much work and doesn’t pay well or for the long term a lot of developers would be unwilling to collaborate but, you will eventually find people.

2. Creating A Supporting Plugin

If you are looking for added functionality in an already existing plugin go for this option. It is a cheap way to meet your needs and creating a supporting plugin takes very little time as it has very limited needs. Furthermore, you can extend a plugin to a current feature set without altering its base code.

However, to do so, you have to hire a WordPress developer as it also requires some technical knowledge.

3. Use Custom Hooks

Use the WordPress hooks to integrate some other feature into an existing plugin. You can add an action or a filter as per your need and improve the functionality of the website.

If the plugin you want to customize has the hook, you don’t have to do much to customize it. You can write your own plugin that works with these hooks. This way you don’t have to build a WordPress plugin right from scratch. If the hook is not present in the plugin code, you can contact a WordPress developer or write the code yourself. It may take some time, but it works.

Once the hook is added, you just have to manually patch each one upon the release of the new plugin update.

4. Override Callbacks

The last way to customize WordPress plugins is by override callbacks. You can alter the core functionality of the WordPress plugin with this method. You can completely change the way it functions with your website. It is a way to completely transform the plugin. By adding your own custom callbacks, you can create the exact functionality you desire.

We suggest you go for a web developer proficient in WordPress as this requires a good amount of technical knowledge and the working of a plugin.

7 Best Video Player and Gallery Plugins for WordPress Website in 2021

When you want to watch a video, then you always choose to watch videos on YouTube and go for other popular streaming websites. Although such videos provide amazing watching experience and if you want to make own website that simply allows spectators to watch videos also. At that time you can prefer WordPress, even this is not only that, businesses which mostly tend to make video content and register them on their website. Therefore, you need video player WordPress plugins that makes simpler the entire procedures of dealing with videos on your website. Along with, you get remarkable video players that make an appealing appearance on your website.

Best Video Player WordPress Plugins

WP Video Lightbox

This is image title

WP Video LightboxWordPress plugin lets users insert videos right on top of any page by implementing a lightbox intersection screen. The plugin is very convenient when you are keen to show pictures, flash, YouTube, or Vimeo videos on your website. In addition, the plugin is fully approachable, thus, all mobile users like its amazing features.

The plugin assists you by automatically appealing the thumbnail for the Video which you make use of it, although you have a great choice to utilize your thumbnails if you wish for. The plugin also offers you an ideal alternative to restrict recommended video in the last part of a YouTube video, therefore your viewers will not to be unfocused. Additionally, you can buy antivirus online using Amazon Promo Code to protect your system form virus.

Portfolio Designer

This is image title

Portfolio Designer is a complete solution for developing an astonishing portfolio, galleries, as well showcase into the WordPress website. The plugin has in-built infinite layout styles such as grid, masonry, slider, WooCommerce, and justify. Additionally, it includes 50+ awesome hover and animation effects to captivate your website visitors instantly. This plugin supports audio and video formats to create fantastic galleries hassle-free.

The plugin has unlimited colors and design options that a user can modify smoothly and introduce the portfolio presentation vividly. It has 800+ Google web fonts, fancy box integration, support unlimited custom post, and so on. A user can get all the functionalities to build an attractive portfolio in just one plugin. With the Portfolio Designer WordPress plugin, there are no restrictions to display the portfolio or galleries to any website page. The plugin is also available in the lite version at the WordPress repository.

ARVE Advanced Responsive Video Embedder

This is image title

ARVE Advanced Responsive Video Embedder a well-known and great video implanting plugin for WordPress that is absolutely free of cost. The plugin is packed with multiple amazing features to grab each particular problem you are expected to expression by displaying such videos on your website.

Most importantly, this plugin allows to create the entire videos you insert into responsive videos and this is done just because of your mobile users can take pleasure such astounding experiences with hassle-free. Other alternatives comprise WYSIWYG support, auto-start videos, tweaking URL factors if you wish for, transforming video position, and lots more.

Find more plugins here.

#best wordpress plugins #best wp video plugin #video gallery wordpress plugin #wordpress gallery plugin #wordpress video plugin

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Building a WordPress Plugin with Vue

Creating a WordPress Plugin

Create a Folder in `wp-content/plugins`

Creating a Shortcode

Integrating Vue.js with a WordPress Plugin

Conclusion

What is GEEK

Buddha Community

How To Customize WordPress Plugins? (4 Easy Ways To Do)

Top 7 Post Timeline WordPress Plugins

Top 7 Post Timeline WordPress Plugins

7 Best Video Player and Gallery Plugins for WordPress Website in 2021

Best Video Player WordPress Plugins

8 Popular Websites That Use The Vue.JS Framework

Building a WordPress Plugin with Vue

Creating a WordPress Plugin

Create a Folder in wp-content/plugins

Creating a Shortcode

Integrating Vue.js with a WordPress Plugin

Conclusion

What is GEEK

Buddha Community

How To Customize WordPress Plugins? (4 Easy Ways To Do)

Top 7 Post Timeline WordPress Plugins

Top 7 Post Timeline WordPress Plugins

7 Best Video Player and Gallery Plugins for WordPress Website in 2021

Best Video Player WordPress Plugins

8 Popular Websites That Use The Vue.JS Framework

Create a Folder in `wp-content/plugins`