Ysia Tamas

1572832335

Building a WordPress Plugin with Vue.js

Using Vue.js with WordPress allows developers to create modern web apps on top of the most popular CMS in the world. In fact, with the addition of the REST API, WordPress has become a complete application platform for building web apps with a PHP/WP back-end and a JavaScript front-end. That means, you take benefits from the modern front-end developments tools, frameworks and libraries like Angular, React and Vue.js to create powerful WordPress themes and plugins.

Prerequisites

This tutorial requires a few prerequisites. To complete it, you need to have:

  • PHP installed on your development machine,
  • WordPress installed and configured,
  • Basic knowledge of PHP,
  • Working experience of WordPress,
  • Basic knowledge of JavaScript,
  • Familiarity with Vue.js

This tutorial is not designed to teach you WordPress or Vue.js but the ways for using them both to create plugins and themes that have a Vue.js front-end.

Themes look more appropriate to use a Vue.js interface but plugins can also benefit from Vue.js to create widgets. You can for example make a plugin that uses Vue.js to fetch and display data from an WordPress REST API or even a third-party API

Introduction

In this tutorial, you’ll see how you can integrate Vue.js in your WordPress theme or plugin. This will help you create powerful and modern Single Page Apps or SPA themes and will allow you to provide your plugins with Vue.js interfaces that leverage features like virtual DOM, reactivity and components.

Introducing Vue.js

Vue.js is JavaScript progressive library for creating modern user interfaces. It has powerful features like:

  • Virtual DOM,
  • Data binding and reactivity,
  • Components etc.

These features will allow you to build maintainable and performant client side web applications.

A component is simply a JavaScript class/function that has inputs and outputs, interacts with other components and controls a part of the application screen.

Vue.js borrows many of its features from both React and Angular.js which makes it a powerful library that takes the best features from both worlds. For example, virtual DOM from React and directives from Angular.js.

You can use Vue.js to add small code in your web application which means it can be an alternative to plain JavaScript or jQuery for adding interactivity to your apps, it can be used to create small reusable widgets or also to create full-blown Single Page Apps.

Using Vue.js

The official Vue.js docs provides different ways that you can use to create Vue.js projects, such as:

Using Vue CLI: the recommended way,
Using a classic <script> tag,
Using a CDN.

Using Vue CLI to create a Vue.js interface for your WordPress API requires more work because you need to tweak Webpack settings to export the final bundles in your theme directory. So the easiest one is to use a single JS file that contains the code for the library.

Basically, this is what you need to do to integrate a Vue.js application with your WordPress theme or plugin:

The first thing that Vue.js needs is a DOM element where it can be mounted. In a plugin this can be done using a shortcode,
After that, you will need to import the Vue.js script file in WordPress. This can done, either in themes or plugins by enqueueing the file,
Finally, you can proceed by creating your Vue.js application in a JavaScript file and enqueue it.
That’s all the steps that you need to follow. Now, let’s see how you can create a simple WordPress plugin that uses Vue.js in the front-end.

Integrating Vue.js with WordPress

First, you need to create a child theme or a plugin. To create a child theme, navigate inside the themes folder inside the wp-content folder of your WordPress installation directory:

$ cd /var/www/html/wp-content/themes
$ mkdir vuetheme	
	

Your theme needs to include the following files:

style.css: It has two roles, it contains meta information about your theme and can be used for CSS styles.

functions.php: It can be used to add any functions in your theme like enqueueing JS scripts and CSS styles etc.

index.php: This file acts as the index file for your theme.

Now, navigate to the newly created theme and add a style.css file.

$ cd vuetheme
$ touch style.css	
	

Open the style.css file and add the following meta information that’s required by your theme to be recognized by WordPress as a valid theme that can be activated from the admin interface:

/*
 Theme Name:  Vue Theme
 description: A Vue WordPress Theme
 Author:       Ahmed Bouchefra
 Template:     twentyseventeen
 Version:      1.0.0
*/	
	

For the template property, you can see that you are creating a child theme of the Twenty Seventeen WordPress theme.

You can now go to the administration interface and activate this theme.

Next, create and open the index.php file and add the following code:

	
<!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 
   <?php wp_head(); ?> 
</head> 

<body> 
    <div id="app">
    </div> 
    <?php wp_footer(); ?> 
</body> 
</html>	
	

The Vue application will be mounted in the <div id="app">.

You can add custom functionality in your theme by using a functions.php file that you need to create inside your theme folder:

$ touch functions.php

The functions.php file is a standard WordPress file so you don’t need to do anything to load it in your theme except for creating it there.

Next, open the functions.php file and add the following code for importing the Vue.js library in your WordPress theme:

function enqueue_scripts(){
   wp_enqueue_script('vue', 'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js', [], '2.5.17');           
}

Next, add a main.js file inside your theme folder then use the following code to create a Vue instance:

( function() {
 new Vue({
  el: document.querySelector('#app'),
  template: "WP Vue Theme",
  mounted: function(){
   console.log("WP Vue Theme!");
 }
});
})();

You first create a Vue instance using the Vue built-in function. You also provide a plain JavaScript object that lets you add different parts of your Vue application such as:

el for specifying the DOM element where you can mount the Vue application. You can either specify a CSS selector or an HTMLElement object that can be returned from the document.querySelector('#app') method.

mounted for specifying a function that gets called when the Vue application is mounted. So you should see a WP Vue Theme! in your browser’s console when the application is mounted.
template is used to specify a template that gets rendered when the Vue application is mounted.

Finally to make this works, you need to enqueue the main.js file that includes the Vue.js code. Add the following code in your enqueue_scripts() function:

wp_enqueue_script('vueapp', plugin_dir_url( __FILE__ ) . 'main.js', [], '1.0', true);

You use the plugin_dir_url WordPress function to retrieve the full URL of the main.js file. __FILE__ contains path to the current PHP file. So by concatentaing the current path with the main.js filename you get the full path of the file.

If you visit your WordPress site you should see the WP Vue Theme string displayed.

Conclusion

This is a very simple example of integrating a Vue.js application with WordPress but this can be easily leveraged to add components and routing which will allow you to create much complex Vue.js applications that can consume WordPress REST APIs to create, read, update and delete data in your WordPress database from your Vue.js interface.

#vue #vuejs #wordpress #web-development #javascript

What is GEEK

Buddha Community

Building a WordPress Plugin with Vue.js

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.

Read More

#customize wordpress plugins #how to customize plugins in wordpress #how to customize wordpress plugins #how to edit plugins in wordpress #how to edit wordpress plugins #wordpress plugin customization

Aria Barnes

Aria Barnes

1625232484

Why is Vue JS the most Preferred Choice for Responsive Web Application Development?

For more than two decades, JavaScript has facilitated businesses to develop responsive web applications for their customers. Used both client and server-side, JavaScript enables you to bring dynamics to pages through expanded functionality and real-time modifications.

Did you know!

According to a web development survey 2020, JavaScript is the most used language for the 8th year, with 67.7% of people choosing it. With this came up several javascript frameworks for frontend, backend development, or even testing.

And one such framework is Vue.Js. It is used to build simple projects and can also be advanced to create sophisticated apps using state-of-the-art tools. Beyond that, some other solid reasons give Vuejs a thumbs up for responsive web application development.

Want to know them? Then follow this blog until the end. Through this article, I will describe all the reasons and benefits of Vue js development. So, stay tuned.

Vue.Js - A Brief Introduction

Released in the year 2014 for public use, Vue.Js is an open-source JavaScript framework used to create UIs and single-page applications. It has over 77.4 million likes on Github for creating intuitive web interfaces.

The recent version is Vue.js 2.6, and is the second most preferred framework according to Stack Overflow Developer Survey 2019.

Every Vue.js development company is widely using the framework across the world for responsive web application development. It is centered around the view layer, provides a lot of functionality for the view layer, and builds single-page web applications.

Some most astonishing stats about Vue.Js:

• Vue was ranked #2 in the Front End JavaScript Framework rankings in the State of JS 2019 survey by developers.

• Approximately 427k to 693k sites are built with Vue js, according to Wappalyzer and BuiltWith statistics of June 2020.

• According to the State of JS 2019 survey, 40.5% of JavaScript developers are currently using Vue, while 34.5% have shown keen interest in using it in the future.

• In Stack Overflow's Developer Survey 2020, Vue was ranked the 3rd most popular front-end JavaScript framework.

Why is Vue.Js so popular?

• High-speed run-time performance
• Vue.Js uses a virtual DOM.
• The main focus is on the core library, while the collaborating libraries handle other features such as global state management and routing.
• Vue.JS provides responsive visual components.

Top 7 Reasons to Choose Vue JS for Web Application Development

Vue js development has certain benefits, which will encourage you to use it in your projects. For example, Vue.js is similar to Angular and React in many aspects, and it continues to enjoy increasing popularity compared to other frameworks.

The framework is only 20 kilobytes in size, making it easy for you to download files instantly. Vue.js easily beats other frameworks when it comes to loading times and usage.

Take a look at the compelling advantages of using Vue.Js for web app development.

#1 Simple Integration

Vue.Js is popular because it allows you to integrate Vue.js into other frameworks such as React, enabling you to customize the project as per your needs and requirements.

It helps you build apps with Vue.js from scratch and introduce Vue.js elements into their existing apps. Due to its ease of integration, Vue.js is becoming a popular choice for web development as it can be used with various existing web applications.

You can feel free to include Vue.js CDN and start using it. Most third-party Vue components and libraries are additionally accessible and supported with the Vue.js CDN.

You don't need to set up node and npm to start using Vue.js. This implies that it helps develop new web applications, just like modifying previous applications.

The diversity of components allows you to create different types of web applications and replace existing frameworks. In addition, you can also choose to hire Vue js developers to use the technology to experiment with many other JavaScript applications.

#2 Easy to Understand

One of the main reasons for the growing popularity of Vue.Js is that the framework is straightforward to understand for individuals. This means that you can easily add Vue.Js to your web projects.

Also, Vue.Js has a well-defined architecture for storing your data with life-cycle and custom methods. Vue.Js also provides additional features such as watchers, directives, and computed properties, making it extremely easy to build modern apps and web applications with ease.

Another significant advantage of using the Vue.Js framework is that it makes it easy to build small and large-scale web applications in the shortest amount of time.

#3 Well-defined Ecosystem

The VueJS ecosystem is vibrant and well-defined, allowing Vue.Js development company to switch users to VueJS over other frameworks for web app development.

Without spending hours, you can easily find solutions to your problems. Furthermore, VueJs lets you choose only the building blocks you need.

Although the main focus of Vue is the view layer, with the help of Vue Router, Vue Test Utils, Vuex, and Vue CLI, you can find solutions and recommendations for frequently occurring problems.

The problems fall into these categories, and hence it becomes easy for programmers to get started with coding right away and not waste time figuring out how to use these tools.

The Vue ecosystem is easy to customize and scales between a library and a framework. Compared to other frameworks, its development speed is excellent, and it can also integrate different projects. This is the reason why most website development companies also prefer the Vue.Js ecosystem over others.

#4 Flexibility

Another benefit of going with Vue.Js for web app development needs is flexibility. Vue.Js provides an excellent level of flexibility. And makes it easier for web app development companies to write their templates in HTML, JavaScript, or pure JavaScript using virtual nodes.

Another significant benefit of using Vue.Js is that it makes it easier for developers to work with tools like templating engines, CSS preprocessors, and type checking tools like TypeScript.

#5 Two-Way Communication

Vue.Js is an excellent option for you because it encourages two-way communication. This has become possible with the MVVM architecture to handle HTML blocks. In this way, Vue.Js is very similar to Angular.Js, making it easier to handle HTML blocks as well.

With Vue.Js, two-way data binding is straightforward. This means that any changes made by the developer to the UI are passed to the data, and the changes made to the data are reflected in the UI.

This is also one reason why Vue.Js is also known as reactive because it can react to changes made to the data. This sets it apart from other libraries such as React.Js, which are designed to support only one-way communication.

#6 Detailed Documentation

One essential thing is well-defined documentation that helps you understand the required mechanism and build your application with ease. It shows all the options offered by the framework and related best practice examples.

Vue has excellent docs, and its API references are one of the best in the industry. They are well written, clear, and accessible in dealing with everything you need to know to build a Vue application.

Besides, the documentation at Vue.js is constantly improved and updated. It also includes a simple introductory guide and an excellent overview of the API. Perhaps, this is one of the most detailed documentation available for this type of language.

#7 Large Community Support

Support for the platform is impressive. In 2018, support continued to impress as every question was answered diligently. Over 6,200 problems were solved with an average resolution time of just six hours.

To support the community, there are frequent release cycles of updated information. Furthermore, the community continues to grow and develop with backend support from developers.



Wrapping Up

VueJS is an incredible choice for responsive web app development. Since it is lightweight and user-friendly, it builds a fast and integrated web application. The capabilities and potential of VueJS for web app development are extensive.

While Vuejs is simple to get started with, using it to build scalable web apps requires professionalism. Hence, you can approach a top Vue js development company in India to develop high-performing web apps.

Equipped with all the above features, it doesn't matter whether you want to build a small concept app or a full-fledged web app; Vue.Js is the most performant you can rely on.

Original source

 

#vue js development company #vue js development company in india #vue js development company india #vue js development services #vue js development #vue js development companies

Top 7 Post Timeline WordPress Plugins

Want to feature a brand history or storyline on a WordPress website? If yes, then read this blog thoroughly.

Many of your website visitors want to know about your brand history or the achievements of your past. For that, a timeline layout is a good solution. Showcase the story of your company or brand in chronological order with the dazzling post timeline posts. WordPress has several themes that have default horizontal timeline formats. But, to get a fully functional & beautifully designed timeline WordPress has plenty of resources of timeline plugins.

No concerns! We have assembled the best post timeline WordPress plugins. Each set of plugins have different functionalities and customization settings. Get the best one and create a timeline with the best one!

1. WP Timeline Designer Pro

WP Timeline Designer is a feature-rich plugin that provides vertical and horizontal timeline templates with lots of advanced functionalities. While showcasing a story or company history with the beautiful chart or design then timeline layout helps to easily understand and attract the readers as well. A great way to tell a story or create a post then the timeline plugin helps to create an attractive timeline.

Timeline Designer – Free

Timeline Designer – a free plugin recently launched on the WordPress repository platform. The free plugin contains in-built 6 existing customizable layouts with other customization options. Using this WordPress plugin, a user can match the look & feel of your WordPress site.
This is image title

Features:

  • Supports custom post type.
  • Provides the customization of background color, show/hide timeline icon, template layout color, and basic animations.
  • Style the post with the stunning content box.
  • With the Horizontal timeline layout, a user gets the navigation option such as auto slide, number of slides, scrolling speed, etc.
  • The plugin has Shortcode functionality with which a user can showcase timeline posts anywhere on the website.

WP Timeline Designer Pro – Premium

WP Timeline Designer Pro is an elegant and fantastic plugin with responsive timeline layouts. In the pro version, the plugin contains 15+ timeline templates with lots of options and tools to style and design the posts. It has in-built 20+ core demos available with which a user can showcase life story, event summary, author biography, achievements, company history, hiring process, etc in an eye-catchy timeline design.
This is image title

Features:

  • 12+ post animation effects on scrolling.
  • Advanced filter post with the date, time period, author, post category, post status, etc.
  • 10+ social sharing icons available and available in the library to change the icon settings anytime.
  • The plugin allows you to add different types of pagination options such as load more buttons, pagination on scroll, etc.
  • The premium plugin contains several media options for timeline posts such as hover effect on images, adjust image size, or text. link on media, custom image size, etc.

2. Post Timeline

Post Timeline plugin allows creating a timeline on 100% of the page. It allows the creation of unlimited vertical and horizontal timelines. To create a simple and single timeline, a user can use shortcode functionality.

**Post Timeline – Free **

The Post Timeline Free plugin allows you to create a timeline on the vertical layout. A user can also assign the category and tags.

Features:

  • Smooth Animation & Slide Navigation is available.
  • The plugin helps to create a tag-based and year-based timeline with parameters.
  • The free plugin has customization offers such as color, assign different icons, etc.
    This is image title

Post Timeline – Premium

The pro version of the Post Timeline WordPress plugin has both vertical and horizontal timeline layouts. The plugin has inbuilt 23 timeline templates and all the timelines layout can be chosen by the admin for each timeline.

Features:

  • The plugin has CSS3 animation + JS animation to make the timeline post prettier.
  • Post Timeline comes with the backend template manager. It allows a user to preview the timeline on the page with the required content.
  • 5 navigation options available.

3. Cool Timeline

Cool Timeline, as its name suggests, creates a complete timeline layout for the WordPress website. It is an HTML and CSS timeline plugin that helps to build awesome horizontal and vertical layouts. The new version of the plugin is very well compatible with Gutenberg.

**Cool Timeline: Free **

The Cool Timeline with the free version has 5 vertical and one horizontal timeline design. Also, the plugin allows users to showcase the stories in ascending & descending orders based on the year and date.

Features:

  • It is a Gutenberg-friendly WordPress plugin with which a user can add shortcodes on any page using the Gutenberg block.
  • A user can showcase the timeline images in the pop-up and link them to read a full story.
  • Using this plugin, you can create a timeline both-sided as well as one-sided.
    This is image title

Cool TimelineCool Timeline: Premium

Cool Timeline Pro plugin has an advanced admin panel that helps to manage the timeline visibility details & other customization factors very smoothly. The premium plugin comes with 4 timeline layouts with 40+ several timeline designs.

Features:

  • It provides a custom text and custom story order in/place of date and time in a timeline layout.
  • Create multiple timelines in one website with the different categories
  • The plugin comes with the proper navigation options, so a user can quickly navigate to a particular story.

#best wordpress timeline plugin #post timeline plugin wordpress #post timeline wordpress #timeline plugin for wordpress #wordpress post timeline plugins #wordpress timeline plugin

Top 7 Post Timeline WordPress Plugins

Want to feature a brand history or storyline on a WordPress website? If yes, then read this blog thoroughly.

Many of your website visitors want to know about your brand history or the achievements of your past. For that, a timeline layout is a good solution. Showcase the story of your company or brand in chronological order with the dazzling post timeline posts. WordPress has several themes that have default horizontal timeline formats. But, to get a fully functional & beautifully designed timeline WordPress has plenty of resources of timeline plugins.

No concerns! We have assembled the best post timeline WordPress plugins. Each set of plugins have different functionalities and customization settings. Get the best one and create a timeline with the best one!

1. WP Timeline Designer Pro

WP Timeline Designer is a feature-rich plugin that provides vertical and horizontal timeline templates with lots of advanced functionalities. While showcasing a story or company history with the beautiful chart or design then timeline layout helps to easily understand and attract the readers as well. A great way to tell a story or create a post then the timeline plugin helps to create an attractive timeline.

Timeline Designer – Free

Timeline Designer – a free plugin recently launched on the WordPress repository platform. The free plugin contains in-built 6 existing customizable layouts with other customization options. Using this WordPress plugin, a user can match the look & feel of your WordPress site.

Features:

  • Supports custom post type.
  • Provides the customization of background color, show/hide timeline icon, template layout color, and basic animations.
  • Style the post with the stunning content box.
  • With the Horizontal timeline layout, a user gets the navigation option such as auto slide, number of slides, scrolling speed, etc.
  • The plugin has Shortcode functionality with which a user can showcase timeline posts anywhere on the website.

WP Timeline Designer Pro – Premium

WP Timeline Designer Pro is an elegant and fantastic plugin with responsive timeline layouts. In the pro version, the plugin contains 15+ timeline templates with lots of options and tools to style and design the posts. It has in-built 20+ core demos available with which a user can showcase life story, event summary, author biography, achievements, company history, hiring process, etc in an eye-catchy timeline design.

Features:

  • 12+ post animation effects on scrolling.
  • Advanced filter post with the date, time period, author, post category, post status, etc.
  • 10+ social sharing icons available and available in the library to change the icon settings anytime.
  • The plugin allows you to add different types of pagination options such as load more buttons, pagination on scroll, etc.
  • The premium plugin contains several media options for timeline posts such as hover effect on images, adjust image size, or text. link on media, custom image size, etc.

2. Post Timeline

Post Timeline plugin allows creating a timeline on 100% of the page. It allows the creation of unlimited vertical and horizontal timelines. To create a simple and single timeline, a user can use shortcode functionality.

**Post Timeline – Free **

The Post Timeline Free plugin allows you to create a timeline on the vertical layout. A user can also assign the category and tags.

Features:

  • Smooth Animation & Slide Navigation is available.
  • The plugin helps to create a tag-based and year-based timeline with parameters.
  • The free plugin has customization offers such as color, assign different icons, etc.

Post Timeline – Premium

The pro version of the Post Timeline WordPress plugin has both vertical and horizontal timeline layouts. The plugin has inbuilt 23 timeline templates and all the timelines layout can be chosen by the admin for each timeline.

Features:

  • The plugin has CSS3 animation + JS animation to make the timeline post prettier.
  • Post Timeline comes with the backend template manager. It allows a user to preview the timeline on the page with the required content.
  • 5 navigation options available.

3. Cool Timeline

Cool Timeline, as its name suggests, creates a complete timeline layout for the WordPress website. It is an HTML and CSS timeline plugin that helps to build awesome horizontal and vertical layouts. The new version of the plugin is very well compatible with Gutenberg.

**Cool Timeline: Free **

The Cool Timeline with the free version has 5 vertical and one horizontal timeline design. Also, the plugin allows users to showcase the stories in ascending & descending orders based on the year and date.

Features:

  • It is a Gutenberg-friendly WordPress plugin with which a user can add shortcodes on any page using the Gutenberg block.
  • A user can showcase the timeline images in the pop-up and link them to read a full story.
  • Using this plugin, you can create a timeline both-sided as well as one-sided.

Cool TimelineCool Timeline: Premium

Cool Timeline Pro plugin has an advanced admin panel that helps to manage the timeline visibility details & other customization factors very smoothly. The premium plugin comes with 4 timeline layouts with 40+ several timeline designs.

Features:

  • It provides a custom text and custom story order in/place of date and time in a timeline layout.
  • Create multiple timelines in one website with the different categories
  • The plugin comes with the proper navigation options, so a user can quickly navigate to a particular story.

#best wordpress timeline plugin #post timeline plugin wordpress #post timeline wordpress #timeline plugin for wordpress #wordpress post timeline plugins #wordpress timeline plugin

Luna  Mosciski

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