Jekyll-spaceship: Jekyll Plugin for Astronauts

 🚀 Jekyll Spaceship 🚀 

Jekyll plugin for Astronauts.

Spaceship is a minimalistic, powerful and extremely customizable Jekyll plugin. It combines everything you may need for convenient work, without unnecessary complications, like a real spaceship.

💡 Tip: I hope you enjoy using this plugin. If you like this project, a little star for it is your way make a clear statement: My work is valued. I would appreciate your support! Thank you!

Requirements

• Ruby >= 2.3.0

Installation

Add jekyll-spaceship plugin in your site's Gemfile, and run bundle install.

# If you have any plugins, put them here!
group :jekyll_plugins do
  gem 'jekyll-spaceship'
end

Or you better like to write in one line:

gem 'jekyll-spaceship', group: :jekyll_plugins

Add jekyll-spaceship to the plugins: section in your site's _config.yml.

plugins:
  - jekyll-spaceship

💡 Tip: Note that GitHub Pages runs in safe mode and only allows a set of whitelisted plugins. To use the gem in GitHub Pages, you need to build locally or use CI (e.g. travis, github workflow) and deploy to your gh-pages branch.

Additions for Unlimited GitHub Pages

• Here is a GitHub Action named jekyll-deploy-action for Jekyll site deployment conveniently. 👍
• Here is a Jekyll site using Travis to build and deploy to GitHub Pages for your references.

Configuration

This plugin runs with the following configuration options by default. Alternative settings for these options can be explicitly specified in the configuration file _config.yml.

# Where things are
jekyll-spaceship:
  # default enabled processors
  processors:
    - table-processor
    - mathjax-processor
    - plantuml-processor
    - mermaid-processor
    - polyfill-processor
    - media-processor
    - emoji-processor
    - element-processor
  mathjax-processor:
    src:
      - https://polyfill.io/v3/polyfill.min.js?features=es6
      - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
    config:
      tex:
        inlineMath:
          - ['$','$']
          - ['\(','\)']
        displayMath:
          - ['$$','$$']
          - ['\[','\]']
      svg:
        fontCache: 'global'
    optimize: # optimization on building stage to check and add mathjax scripts
      enabled: true # value `false` for adding to all pages
      include: []   # include patterns for math expressions checking (regexp)
      exclude: []   # exclude patterns for math expressions checking (regexp)
  plantuml-processor:
    mode: default  # mode value 'pre-fetch' for fetching image at building stage
    css:
      class: plantuml
    syntax:
      code: 'plantuml!'
      custom: ['@startuml', '@enduml']
    src: http://www.plantuml.com/plantuml/svg/
  mermaid-processor:
    mode: default  # mode value 'pre-fetch' for fetching image at building stage
    css:
      class: mermaid
    syntax:
      code: 'mermaid!'
      custom: ['@startmermaid', '@endmermaid']
    config:
      theme: default
    src: https://mermaid.ink/svg/
  media-processor:
    default:
      id: 'media-{id}'
      class: 'media'
      width: '100%'
      height: 350
      frameborder: 0
      style: 'max-width: 600px; outline: none;'
      allow: 'encrypted-media; picture-in-picture'
  emoji-processor:
    css:
      class: emoji
    src: https://github.githubassets.com/images/icons/emoji/

Usage

1. Table Usage

For now, these extended features are provided:

• Cells spanning multiple columns
• Cells spanning multiple rows
• Cells text align separately
• Table header not required
• Grouped table header rows or data rows

Noted that GitHub filters out style property, so the example displays with the obsolete align property. But in actual this plugin outputs style property with text-align CSS attribute.

Rowspan and Colspan

^^ in a cell indicates it should be merged with the cell above.
This feature is contributed by pmccloghrylaing.

|              Stage | Direct Products | ATP Yields |
| -----------------: | --------------: | ---------: |
|         Glycolysis |          2 ATP              ||
| ^^                 |          2 NADH |   3--5 ATP |
| Pyruvaye oxidation |          2 NADH |      5 ATP |
|  Citric acid cycle |          2 ATP              ||
| ^^                 |          6 NADH |     15 ATP |
| ^^                 |          2 FADH |      3 ATP |
|                               30--32 ATP        |||

Code above would be parsed as:

Stage	Direct Products	ATP Yields
Glycolysis	2 ATP
	2 NADH	3–5 ATP
Pyruvaye oxidation	2 NADH	5 ATP
Citric acid cycle	2 ATP
	6 NADH	15 ATP
	2 FADH2	3 ATP
30–32 ATP

Multiline

A backslash at end to join cell contents with the following lines.
This feature is contributed by Lucas-C.

| :    Easy Multiline   : |||
| :----- | :----- | :------ |
| Apple  | Banana | Orange  \
| Apple  | Banana | Orange  \
| Apple  | Banana | Orange
| Apple  | Banana | Orange  \
| Apple  | Banana | Orange  |
| Apple  | Banana | Orange  |

Code above would be parsed as:

Easy Multiline
Apple Apple Apple	Banana Banana Banana	Orange Orange Orange
Apple Apple	Banana Banana	Orange Orange
Apple	Banana	Orange

Headerless

Table header can be eliminated.

|--|--|--|--|--|--|--|--|
|♜| |♝|♛|♚|♝|♞|♜|
| |♟|♟|♟| |♟|♟|♟|
|♟| |♞| | | | | |
| |♗| | |♟| | | |
| | | | |♙| | | |
| | | | | |♘| | |
|♙|♙|♙|♙| |♙|♙|♙|
|♖|♘|♗|♕|♔| | |♖|

Code above would be parsed as:

♜		♝	♛	♚	♝	♞	♜
	♟	♟	♟		♟	♟	♟
♟		♞
	♗			♟
				♙
					♘
♙	♙	♙	♙		♙	♙	♙
♖	♘	♗	♕	♔			♖

Cell Alignment

Markdown table syntax use colons ":" for forcing column alignment.
Therefore, here we also use it for forcing cell alignment.

Table cell can be set alignment separately.

| :        Fruits \|\| Food       : |||
| :--------- | :-------- | :--------  |
| Apple      | : Apple : | Apple      \
| Banana     |   Banana  | Banana     \
| Orange     |   Orange  | Orange     |
| :   Rowspan is 4    : || How's it?  |
|^^    A. Peach         ||   1. Fine :|
|^^    B. Orange        ||^^ 2. Bad   |
|^^    C. Banana        ||  It's OK!  |

Code above would be parsed as:

Fruits || Food
Apple Banana Orange	Apple Banana Orange	Apple Banana Orange
Rowspan is 4  A. Peach  B. Orange  C. Banana
		How's it?
		1. Fine 2. Bad
		It' OK!

Cell Markdown

Sometimes we may need some abundant content (e.g., mathjax, image, video) in Markdown table
Therefore, here we also make markown syntax possible inside a cell.

| :                   MathJax \|\| Image                 : |||
| :------------ | :-------- | :----------------------------- |
| Apple         | : Apple : | Apple                          \
| Banana        | Banana    | Banana                         \
| Orange        | Orange    | Orange                         |
| :     Rowspan is 4     : || :        How's it?           : |
| ^^     A. Peach          ||    1. ![example][cell-image]   |
| ^^     B. Orange         || ^^ 2. $I = \int \rho R^{2} dV$ |
| ^^     C. Banana         || **It's OK!**                   |

[cell-image]: https://jekyllrb.com/img/octojekyll.png "An exemplary image"

Code above would be parsed as:

MathJax || Image
Apple Banana Orange	Apple Banana Orange	Apple Banana Orange
Rowspan is 4  A. Peach  B. Orange  C. Banana
		How's it?
		It' OK!

 

Cell Inline Attributes

This feature is very useful for custom cell such as using inline style. (e.g., background, color, font)
The idea and syntax comes from the Maruku package.

 

Following are some examples of attributes definitions (ALDs) and afterwards comes the syntax explanation:

{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}

An ALD line has the following structure:

• a left brace, optionally preceded by up to three spaces,
• followed by a colon, the id and another colon,
• followed by attribute definitions (allowed characters are backslash-escaped closing braces or any character except a not escaped closing brace),
• followed by a closing brace and optional spaces until the end of the line.

If there is more than one ALD with the same reference name, the attribute definitions of all the ALDs are processed like they are defined in one ALD.

An inline attribute list (IAL) is used to attach attributes to another element.
Here are some examples for span IALs:

{: #id .cls1 .cls2} <!-- #id <=> id="id", .cls1 .cls2 <=> class="cls1 cls2" -->
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}

Here is an example for custom table cell with IAL:

{:color-style: style="background: black;"}
{:color-style: style="color: white;"}
{:text-style: style="font-weight: 800; text-decoration: underline;"}

|:             Here's an Inline Attribute Lists example                :||||
| ------- | ------------------ | -------------------- | ------------------ |
|:       :|:  <div style="color: red;"> &lt; Normal HTML Block > </div> :|||
| ^^      |   Red    {: .cls style="background: orange" }                |||
| ^^ IALs |   Green  {: #id style="background: green; color: white" }    |||
| ^^      |   Blue   {: style="background: blue; color: white" }         |||
| ^^      |   Black  {: color-style text-style }                         |||

Code above would be parsed as:

Additionally, here you can learn more details about IALs.

2. MathJax Usage

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers.

Some of the main features of MathJax include:

• High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages
• Supported in most browsers with no plug-ins, extra fonts, or special setup for the reader
• Easy for authors, flexible for publishers, extensible for developers
• Supports math accessibility, cut-and-paste interoperability, and other advanced functionality
• Powerful API for integration with other web applications

2.1 Performance optimization

At building stage, the MathJax engine script will be added by automatically checking whether there is a math expression in the page, this feature can help you improve the page performance on loading speed.

2.2 How to use?

Put your math expression within $...$

$ a * b = c ^ b $

$ 2^{\frac{n-1}{3}} $

$ \int\_a^b f(x)\,dx. $

Code above would be parsed as:

3. PlantUML Usage

PlantUML is a component that allows to quickly write:

• sequence diagram,
• use case diagram,
• class diagram,
• activity diagram,
• component diagram,
• state diagram,
• object diagram

There are two ways to create a diagram in your Jekyll blog page:

```plantuml!
Bob -> Alice : hello world
```

or

@startuml
Bob -> Alice : hello
@enduml

Code above would be parsed as:

4. Mermaid Usage

Mermaid is a Javascript based diagramming and charting tool. It generates diagrams flowcharts and more, using markdown-inspired text for ease and speed.

It allows to quickly write:

• flow chart,
• pie chart,
• sequence diagram,
• class diagram,
• state diagram,
• entity relationship diagram,
• user journey,
• gantt

There are two ways to create a diagram in your Jekyll blog page:

```mermaid!
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
```

or

@startmermaid
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
@endmermaid

Code above would be parsed as:

5. Media Usage

How often did you find yourself googling "How to embed a video/audio in markdown?"

While its not possible to embed a video/audio in markdown, the best and easiest way is to extract a frame from the video/audio. To add videos/audios to your markdown files easier I developped this tool for you, and it will parse the video/audio link inside the image block automatically.

For now, these media links parsing are provided:

• Youtube
• Vimeo
• DailyMotion
• Spotify
• SoundCloud
• General Video ( mp4 | avi | ogg | ogv | webm | 3gp | flv | mov ... )
• General Audio ( mp3 | wav | ogg | mid | midi | aac | wma ... )

There are two ways to embed a video/audio in your Jekyll blog page:

Inline-style:

![]({media-link})

Reference-style:

![][{reference}]

[{reference}]: {media-link}

For configuring media attributes (e.g, width, height), just adding query string to the link as below:

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500)

![](https://www.dailymotion.com/video/x7tfyq3?width=100%&height=400&autoplay=1)

Youtube Usage

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)

![](//www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500)

Vimeo Usage

![](https://vimeo.com/263856289)

![](https://vimeo.com/263856289?width=500&height=320)

DailyMotion Usage

![](https://www.dailymotion.com/video/x7tfyq3)

![](https://dai.ly/x7tgcev?width=100%&height=400)

Spotify Usage

![](http://open.spotify.com/track/4Dg5moVCTqxAb7Wr8Dq2T5)

Spotify Podcast Usage

![](https://open.spotify.com/episode/31AxcwYdjsFtStds5JVWbT)

SoundCloud Usage

![](https://soundcloud.com/aviciiofficial/preview-avicii-vs-lenny)

General Video Usage

![](//www.html5rocks.com/en/tutorials/video/basics/devstories.webm)

![](//techslides.com/demos/sample-videos/small.ogv?allow=autoplay)

![](//techslides.com/demos/sample-videos/small.mp4?width=400)

General Audio Usage

![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3)

![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3?autoplay=1&loop=1)

6. Hybrid HTML with Markdown

As markdown is not only a lightweight markup language with plain-text-formatting syntax, but also an easy-to-read and easy-to-write plain text format, so writing a hybrid HTML with markdown is an awesome choice.

It's easy to write markdown inside HTML:

<script type="text/markdown">
# Hybrid HTML with Markdown is a not bad choice ^\_^

## Table Usage

| :        Fruits \|\| Food       : |||
| :--------- | :-------- | :--------  |
| Apple      | : Apple : | Apple      \
| Banana     |   Banana  | Banana     \
| Orange     |   Orange  | Orange     |
| :   Rowspan is 4    : || How's it?  |
|^^    A. Peach         ||   1. Fine :|
|^^    B. Orange        ||^^ 2. Bad   |
|^^    C. Banana        ||  It's OK!  |

## PlantUML Usage

@startuml
Bob -> Alice : hello
@enduml

## Video Usage

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)
</script>

7. Markdown Polyfill

It allows us to polyfill features for extending markdown syntax.

For now, these polyfill features are provided:

• Escape ordered list

7.1 Escape Ordered List

A backslash at begin to escape the ordered list.

Normal:

1. List item Apple.
3. List item Banana.
10. List item Cafe.

Escaped:

\1. List item Apple.
\3. List item Banana.
\10. List item Cafe.

Code above would be parsed as:

Normal:

1. List item Apple.
2. List item Banana.
3. List item Cafe.

Escaped:

1. List item Apple.
3. List item Banana.
10. List item Cafe.

8. Emoji Usage

GitHub-flavored emoji images and names would allow emojifying content such as: it's raining :cat:s and :dog:s!

Noted that emoji images are served from the GitHub.com CDN, with a base URL of https://github.githubassets.com, which results in emoji image URLs like https://github.githubassets.com/images/icons/emoji/unicode/1f604.png.

In any page or post, use emoji as you would normally, e.g.

I give this plugin two :+1:!

Code above would be parsed as:

I give this plugin two :+1:!

8.1 Emoji Customizing

If you'd like to serve emoji images locally, or use a custom emoji source, you can specify so in your _config.yml file:

jekyll-spaceship:
  emoji-processor:
    src: "/assets/images/emoji"

See the Gemoji documentation for generating image files.

9. Modifying Element Usage

It allows us to modify elements via CSS3 selectors. Through it you can easily modify the attributes of an element tag, replace the children nodes and so on, it's very flexible, but here is example usage for modifying a document:

# Here is a comprehensive example
jekyll-spaceship:
  element-processor:
    css:
      - a: '<h1>Test</h1>'                     # Replace all `a` tags (String Style)
      - ['a.link1', 'a.link2']:                # Replace all `a.link1`, `a.link2` tags (Hash Style)
          name: img                            # Replace element tag name
          props:                               # Replace element properties
            title: Good image                  # Add a title attribute
            src: ['(^.*$)', '\0?a=123']        # Add query string to src attribute by regex pattern
            style:                             # Add style attribute (Hash Style)
              color: red
              font-size: '1.2em'
          children:                            # Add children to the element
            -                                  # First empty for adding after the last child node
            - "<span>Google</span>"            # First child node (String Style)
            -                                  # Middle empty for wrapping the children nodes
            - name: span                       # Second child node (Hash Style)
              props:
                prop1: "1"                     # Custom property1
                prop2: "2"                     # Custom property2
                prop3: "3"                     # Custom property3
              children:                        # Add nested chidren nodes
                - "<span>Jekyll</span>"        # First child node (String Style)
                - name: span                   # Second child node (Hash Style)
                  props:                       # Add attributes to child node (Hash Style)
                    prop1: "a"
                    prop2: "b"
                    prop3: "c"
                  children: "<b>Yap!</b>"      # Add children nodes (String Style)
            -                                  # Last empty for adding before the first child node
      - a.link: '<a href="//t.com">Link</a>'   # Replace all `a.link` tags (String Style)
      - 'h1#title':                            # Replace `h1#title` tags (Hash Style)
          children: I'm a title!               # Replace inner html to new text

Example 1

Automatically adds a target="_blank" rel="noopener noreferrer" attribute to all external links in Jekyll's content.

jekyll-spaceship:
  element-processor:
    css:
      - a:                                     # Replace all `a` tags
          props:
            class: ['(^.*$)', '\0 ext-link']   # Add `ext-link` to class by regex pattern
            target: _blank                     # Replace `target` value to `_blank`
            rel: noopener noreferrer           # Replace `rel` value to `noopener noreferrer`

Example 2

Automatically adds loading="lazy" to img and iframe tags to natively load lazily. Browser support is growing. If a browser does not support the loading attribute, it will load the resource just like it would normally.

jekyll-spaceship:
  element-processor:
    css:
      - a:                                     # Replace all `a` tags
          props:                               #
            loading: lazy                      # Replace `loading` value to `lazy`

In case you want to prevent loading some images/iframes lazily, add loading="eager" to their tags. This might be useful to prevent flickering of images during navigation (e.g. the site's logo).

See the following examples to prevent lazy loading.

jekyll-spaceship:
  element-processor:
    css:
      - a:                                     # Replace all `a` tags
          props:                               #
            loading: eager                     # Replace `loading` value to `eager`

There are three options when using this method to lazy load images. Here are the supported values for the loading attribute:

• auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
• lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
• eager: Load the resource immediately, regardless of where it’s located on the page.

Credits

• Jekyll - A blog-aware static site generator in Ruby.
• MultiMarkdown - Lightweight markup processor to produce HTML, LaTeX, and more.
• markdown-it-multimd-table - Multimarkdown table syntax plugin for markdown-it markdown parser.
• jmoji - GitHub-flavored emoji plugin for Jekyll.
• jekyll-target-blank - Automatically opens external links in a new browser for Jekyll Pages, Posts and Docs.
• jekyll-loading-lazy - Automatically adds loading="lazy" to img and iframe tags to natively load lazily.
• mermaid - Generation of diagram and flowchart from text in a similar manner as markdown.

Contributing

Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.

You can start by opening an issue describing the problem that you're looking to resolve and we'll go from there.

Download Details:

Author: jeffreytse
Source Code: https://github.com/jeffreytse/jekyll-spaceship 
License: MIT license

#jekyll #music #emoji #html 

What is GEEK

Buddha Community

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

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

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

Jekyll-spaceship: Jekyll Plugin for Astronauts

 🚀 Jekyll Spaceship 🚀 

Jekyll plugin for Astronauts.

Spaceship is a minimalistic, powerful and extremely customizable Jekyll plugin. It combines everything you may need for convenient work, without unnecessary complications, like a real spaceship.

💡 Tip: I hope you enjoy using this plugin. If you like this project, a little star for it is your way make a clear statement: My work is valued. I would appreciate your support! Thank you!

Requirements

• Ruby >= 2.3.0

Installation

Add jekyll-spaceship plugin in your site's Gemfile, and run bundle install.

# If you have any plugins, put them here!
group :jekyll_plugins do
  gem 'jekyll-spaceship'
end

Or you better like to write in one line:

gem 'jekyll-spaceship', group: :jekyll_plugins

Add jekyll-spaceship to the plugins: section in your site's _config.yml.

plugins:
  - jekyll-spaceship

💡 Tip: Note that GitHub Pages runs in safe mode and only allows a set of whitelisted plugins. To use the gem in GitHub Pages, you need to build locally or use CI (e.g. travis, github workflow) and deploy to your gh-pages branch.

Additions for Unlimited GitHub Pages

• Here is a GitHub Action named jekyll-deploy-action for Jekyll site deployment conveniently. 👍
• Here is a Jekyll site using Travis to build and deploy to GitHub Pages for your references.

Configuration

This plugin runs with the following configuration options by default. Alternative settings for these options can be explicitly specified in the configuration file _config.yml.

# Where things are
jekyll-spaceship:
  # default enabled processors
  processors:
    - table-processor
    - mathjax-processor
    - plantuml-processor
    - mermaid-processor
    - polyfill-processor
    - media-processor
    - emoji-processor
    - element-processor
  mathjax-processor:
    src:
      - https://polyfill.io/v3/polyfill.min.js?features=es6
      - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
    config:
      tex:
        inlineMath:
          - ['$','$']
          - ['\(','\)']
        displayMath:
          - ['$$','$$']
          - ['\[','\]']
      svg:
        fontCache: 'global'
    optimize: # optimization on building stage to check and add mathjax scripts
      enabled: true # value `false` for adding to all pages
      include: []   # include patterns for math expressions checking (regexp)
      exclude: []   # exclude patterns for math expressions checking (regexp)
  plantuml-processor:
    mode: default  # mode value 'pre-fetch' for fetching image at building stage
    css:
      class: plantuml
    syntax:
      code: 'plantuml!'
      custom: ['@startuml', '@enduml']
    src: http://www.plantuml.com/plantuml/svg/
  mermaid-processor:
    mode: default  # mode value 'pre-fetch' for fetching image at building stage
    css:
      class: mermaid
    syntax:
      code: 'mermaid!'
      custom: ['@startmermaid', '@endmermaid']
    config:
      theme: default
    src: https://mermaid.ink/svg/
  media-processor:
    default:
      id: 'media-{id}'
      class: 'media'
      width: '100%'
      height: 350
      frameborder: 0
      style: 'max-width: 600px; outline: none;'
      allow: 'encrypted-media; picture-in-picture'
  emoji-processor:
    css:
      class: emoji
    src: https://github.githubassets.com/images/icons/emoji/

Usage

1. Table Usage

For now, these extended features are provided:

• Cells spanning multiple columns
• Cells spanning multiple rows
• Cells text align separately
• Table header not required
• Grouped table header rows or data rows

Noted that GitHub filters out style property, so the example displays with the obsolete align property. But in actual this plugin outputs style property with text-align CSS attribute.

Rowspan and Colspan

^^ in a cell indicates it should be merged with the cell above.
This feature is contributed by pmccloghrylaing.

|              Stage | Direct Products | ATP Yields |
| -----------------: | --------------: | ---------: |
|         Glycolysis |          2 ATP              ||
| ^^                 |          2 NADH |   3--5 ATP |
| Pyruvaye oxidation |          2 NADH |      5 ATP |
|  Citric acid cycle |          2 ATP              ||
| ^^                 |          6 NADH |     15 ATP |
| ^^                 |          2 FADH |      3 ATP |
|                               30--32 ATP        |||

Code above would be parsed as:

Stage	Direct Products	ATP Yields
Glycolysis	2 ATP
	2 NADH	3–5 ATP
Pyruvaye oxidation	2 NADH	5 ATP
Citric acid cycle	2 ATP
	6 NADH	15 ATP
	2 FADH2	3 ATP
30–32 ATP

Multiline

A backslash at end to join cell contents with the following lines.
This feature is contributed by Lucas-C.

| :    Easy Multiline   : |||
| :----- | :----- | :------ |
| Apple  | Banana | Orange  \
| Apple  | Banana | Orange  \
| Apple  | Banana | Orange
| Apple  | Banana | Orange  \
| Apple  | Banana | Orange  |
| Apple  | Banana | Orange  |

Code above would be parsed as:

Easy Multiline
Apple Apple Apple	Banana Banana Banana	Orange Orange Orange
Apple Apple	Banana Banana	Orange Orange
Apple	Banana	Orange

Headerless

Table header can be eliminated.

|--|--|--|--|--|--|--|--|
|♜| |♝|♛|♚|♝|♞|♜|
| |♟|♟|♟| |♟|♟|♟|
|♟| |♞| | | | | |
| |♗| | |♟| | | |
| | | | |♙| | | |
| | | | | |♘| | |
|♙|♙|♙|♙| |♙|♙|♙|
|♖|♘|♗|♕|♔| | |♖|

Code above would be parsed as:

♜		♝	♛	♚	♝	♞	♜
	♟	♟	♟		♟	♟	♟
♟		♞
	♗			♟
				♙
					♘
♙	♙	♙	♙		♙	♙	♙
♖	♘	♗	♕	♔			♖

Cell Alignment

Markdown table syntax use colons ":" for forcing column alignment.
Therefore, here we also use it for forcing cell alignment.

Table cell can be set alignment separately.

| :        Fruits \|\| Food       : |||
| :--------- | :-------- | :--------  |
| Apple      | : Apple : | Apple      \
| Banana     |   Banana  | Banana     \
| Orange     |   Orange  | Orange     |
| :   Rowspan is 4    : || How's it?  |
|^^    A. Peach         ||   1. Fine :|
|^^    B. Orange        ||^^ 2. Bad   |
|^^    C. Banana        ||  It's OK!  |

Code above would be parsed as:

Fruits || Food
Apple Banana Orange	Apple Banana Orange	Apple Banana Orange
Rowspan is 4  A. Peach  B. Orange  C. Banana
		How's it?
		1. Fine 2. Bad
		It' OK!

Cell Markdown

Sometimes we may need some abundant content (e.g., mathjax, image, video) in Markdown table
Therefore, here we also make markown syntax possible inside a cell.

| :                   MathJax \|\| Image                 : |||
| :------------ | :-------- | :----------------------------- |
| Apple         | : Apple : | Apple                          \
| Banana        | Banana    | Banana                         \
| Orange        | Orange    | Orange                         |
| :     Rowspan is 4     : || :        How's it?           : |
| ^^     A. Peach          ||    1. ![example][cell-image]   |
| ^^     B. Orange         || ^^ 2. $I = \int \rho R^{2} dV$ |
| ^^     C. Banana         || **It's OK!**                   |

[cell-image]: https://jekyllrb.com/img/octojekyll.png "An exemplary image"

Code above would be parsed as:

MathJax || Image
Apple Banana Orange	Apple Banana Orange	Apple Banana Orange
Rowspan is 4  A. Peach  B. Orange  C. Banana
		How's it?
		It' OK!

 

Cell Inline Attributes

This feature is very useful for custom cell such as using inline style. (e.g., background, color, font)
The idea and syntax comes from the Maruku package.

 

Following are some examples of attributes definitions (ALDs) and afterwards comes the syntax explanation:

{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}

An ALD line has the following structure:

• a left brace, optionally preceded by up to three spaces,
• followed by a colon, the id and another colon,
• followed by attribute definitions (allowed characters are backslash-escaped closing braces or any character except a not escaped closing brace),
• followed by a closing brace and optional spaces until the end of the line.

If there is more than one ALD with the same reference name, the attribute definitions of all the ALDs are processed like they are defined in one ALD.

An inline attribute list (IAL) is used to attach attributes to another element.
Here are some examples for span IALs:

{: #id .cls1 .cls2} <!-- #id <=> id="id", .cls1 .cls2 <=> class="cls1 cls2" -->
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}

Here is an example for custom table cell with IAL:

{:color-style: style="background: black;"}
{:color-style: style="color: white;"}
{:text-style: style="font-weight: 800; text-decoration: underline;"}

|:             Here's an Inline Attribute Lists example                :||||
| ------- | ------------------ | -------------------- | ------------------ |
|:       :|:  <div style="color: red;"> &lt; Normal HTML Block > </div> :|||
| ^^      |   Red    {: .cls style="background: orange" }                |||
| ^^ IALs |   Green  {: #id style="background: green; color: white" }    |||
| ^^      |   Blue   {: style="background: blue; color: white" }         |||
| ^^      |   Black  {: color-style text-style }                         |||

Code above would be parsed as:

Additionally, here you can learn more details about IALs.

2. MathJax Usage

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers.

Some of the main features of MathJax include:

• High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages
• Supported in most browsers with no plug-ins, extra fonts, or special setup for the reader
• Easy for authors, flexible for publishers, extensible for developers
• Supports math accessibility, cut-and-paste interoperability, and other advanced functionality
• Powerful API for integration with other web applications

2.1 Performance optimization

At building stage, the MathJax engine script will be added by automatically checking whether there is a math expression in the page, this feature can help you improve the page performance on loading speed.

2.2 How to use?

Put your math expression within $...$

$ a * b = c ^ b $

$ 2^{\frac{n-1}{3}} $

$ \int\_a^b f(x)\,dx. $

Code above would be parsed as:

3. PlantUML Usage

PlantUML is a component that allows to quickly write:

• sequence diagram,
• use case diagram,
• class diagram,
• activity diagram,
• component diagram,
• state diagram,
• object diagram

There are two ways to create a diagram in your Jekyll blog page:

```plantuml!
Bob -> Alice : hello world
```

or

@startuml
Bob -> Alice : hello
@enduml

Code above would be parsed as:

4. Mermaid Usage

Mermaid is a Javascript based diagramming and charting tool. It generates diagrams flowcharts and more, using markdown-inspired text for ease and speed.

It allows to quickly write:

• flow chart,
• pie chart,
• sequence diagram,
• class diagram,
• state diagram,
• entity relationship diagram,
• user journey,
• gantt

There are two ways to create a diagram in your Jekyll blog page:

```mermaid!
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
```

or

@startmermaid
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
@endmermaid

Code above would be parsed as:

5. Media Usage

How often did you find yourself googling "How to embed a video/audio in markdown?"

While its not possible to embed a video/audio in markdown, the best and easiest way is to extract a frame from the video/audio. To add videos/audios to your markdown files easier I developped this tool for you, and it will parse the video/audio link inside the image block automatically.

For now, these media links parsing are provided:

• Youtube
• Vimeo
• DailyMotion
• Spotify
• SoundCloud
• General Video ( mp4 | avi | ogg | ogv | webm | 3gp | flv | mov ... )
• General Audio ( mp3 | wav | ogg | mid | midi | aac | wma ... )

There are two ways to embed a video/audio in your Jekyll blog page:

Inline-style:

![]({media-link})

Reference-style:

![][{reference}]

[{reference}]: {media-link}

For configuring media attributes (e.g, width, height), just adding query string to the link as below:

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500)

![](https://www.dailymotion.com/video/x7tfyq3?width=100%&height=400&autoplay=1)

Youtube Usage

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)

![](//www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500)

Vimeo Usage

![](https://vimeo.com/263856289)

![](https://vimeo.com/263856289?width=500&height=320)

DailyMotion Usage

![](https://www.dailymotion.com/video/x7tfyq3)

![](https://dai.ly/x7tgcev?width=100%&height=400)

Spotify Usage

![](http://open.spotify.com/track/4Dg5moVCTqxAb7Wr8Dq2T5)

Spotify Podcast Usage

![](https://open.spotify.com/episode/31AxcwYdjsFtStds5JVWbT)

SoundCloud Usage

![](https://soundcloud.com/aviciiofficial/preview-avicii-vs-lenny)

General Video Usage

![](//www.html5rocks.com/en/tutorials/video/basics/devstories.webm)

![](//techslides.com/demos/sample-videos/small.ogv?allow=autoplay)

![](//techslides.com/demos/sample-videos/small.mp4?width=400)

General Audio Usage

![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3)

![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3?autoplay=1&loop=1)

6. Hybrid HTML with Markdown

As markdown is not only a lightweight markup language with plain-text-formatting syntax, but also an easy-to-read and easy-to-write plain text format, so writing a hybrid HTML with markdown is an awesome choice.

It's easy to write markdown inside HTML:

<script type="text/markdown">
# Hybrid HTML with Markdown is a not bad choice ^\_^

## Table Usage

| :        Fruits \|\| Food       : |||
| :--------- | :-------- | :--------  |
| Apple      | : Apple : | Apple      \
| Banana     |   Banana  | Banana     \
| Orange     |   Orange  | Orange     |
| :   Rowspan is 4    : || How's it?  |
|^^    A. Peach         ||   1. Fine :|
|^^    B. Orange        ||^^ 2. Bad   |
|^^    C. Banana        ||  It's OK!  |

## PlantUML Usage

@startuml
Bob -> Alice : hello
@enduml

## Video Usage

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)
</script>

7. Markdown Polyfill

It allows us to polyfill features for extending markdown syntax.

For now, these polyfill features are provided:

• Escape ordered list

7.1 Escape Ordered List

A backslash at begin to escape the ordered list.

Normal:

1. List item Apple.
3. List item Banana.
10. List item Cafe.

Escaped:

\1. List item Apple.
\3. List item Banana.
\10. List item Cafe.

Code above would be parsed as:

Normal:

1. List item Apple.
2. List item Banana.
3. List item Cafe.

Escaped:

1. List item Apple.
3. List item Banana.
10. List item Cafe.

8. Emoji Usage

GitHub-flavored emoji images and names would allow emojifying content such as: it's raining :cat:s and :dog:s!

Noted that emoji images are served from the GitHub.com CDN, with a base URL of https://github.githubassets.com, which results in emoji image URLs like https://github.githubassets.com/images/icons/emoji/unicode/1f604.png.

In any page or post, use emoji as you would normally, e.g.

I give this plugin two :+1:!

Code above would be parsed as:

I give this plugin two :+1:!

8.1 Emoji Customizing

If you'd like to serve emoji images locally, or use a custom emoji source, you can specify so in your _config.yml file:

jekyll-spaceship:
  emoji-processor:
    src: "/assets/images/emoji"

See the Gemoji documentation for generating image files.

9. Modifying Element Usage

It allows us to modify elements via CSS3 selectors. Through it you can easily modify the attributes of an element tag, replace the children nodes and so on, it's very flexible, but here is example usage for modifying a document:

# Here is a comprehensive example
jekyll-spaceship:
  element-processor:
    css:
      - a: '<h1>Test</h1>'                     # Replace all `a` tags (String Style)
      - ['a.link1', 'a.link2']:                # Replace all `a.link1`, `a.link2` tags (Hash Style)
          name: img                            # Replace element tag name
          props:                               # Replace element properties
            title: Good image                  # Add a title attribute
            src: ['(^.*$)', '\0?a=123']        # Add query string to src attribute by regex pattern
            style:                             # Add style attribute (Hash Style)
              color: red
              font-size: '1.2em'
          children:                            # Add children to the element
            -                                  # First empty for adding after the last child node
            - "<span>Google</span>"            # First child node (String Style)
            -                                  # Middle empty for wrapping the children nodes
            - name: span                       # Second child node (Hash Style)
              props:
                prop1: "1"                     # Custom property1
                prop2: "2"                     # Custom property2
                prop3: "3"                     # Custom property3
              children:                        # Add nested chidren nodes
                - "<span>Jekyll</span>"        # First child node (String Style)
                - name: span                   # Second child node (Hash Style)
                  props:                       # Add attributes to child node (Hash Style)
                    prop1: "a"
                    prop2: "b"
                    prop3: "c"
                  children: "<b>Yap!</b>"      # Add children nodes (String Style)
            -                                  # Last empty for adding before the first child node
      - a.link: '<a href="//t.com">Link</a>'   # Replace all `a.link` tags (String Style)
      - 'h1#title':                            # Replace `h1#title` tags (Hash Style)
          children: I'm a title!               # Replace inner html to new text

Example 1

Automatically adds a target="_blank" rel="noopener noreferrer" attribute to all external links in Jekyll's content.

jekyll-spaceship:
  element-processor:
    css:
      - a:                                     # Replace all `a` tags
          props:
            class: ['(^.*$)', '\0 ext-link']   # Add `ext-link` to class by regex pattern
            target: _blank                     # Replace `target` value to `_blank`
            rel: noopener noreferrer           # Replace `rel` value to `noopener noreferrer`

Example 2

Automatically adds loading="lazy" to img and iframe tags to natively load lazily. Browser support is growing. If a browser does not support the loading attribute, it will load the resource just like it would normally.

jekyll-spaceship:
  element-processor:
    css:
      - a:                                     # Replace all `a` tags
          props:                               #
            loading: lazy                      # Replace `loading` value to `lazy`

In case you want to prevent loading some images/iframes lazily, add loading="eager" to their tags. This might be useful to prevent flickering of images during navigation (e.g. the site's logo).

See the following examples to prevent lazy loading.

jekyll-spaceship:
  element-processor:
    css:
      - a:                                     # Replace all `a` tags
          props:                               #
            loading: eager                     # Replace `loading` value to `eager`

There are three options when using this method to lazy load images. Here are the supported values for the loading attribute:

• auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
• lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
• eager: Load the resource immediately, regardless of where it’s located on the page.

Credits

• Jekyll - A blog-aware static site generator in Ruby.
• MultiMarkdown - Lightweight markup processor to produce HTML, LaTeX, and more.
• markdown-it-multimd-table - Multimarkdown table syntax plugin for markdown-it markdown parser.
• jmoji - GitHub-flavored emoji plugin for Jekyll.
• jekyll-target-blank - Automatically opens external links in a new browser for Jekyll Pages, Posts and Docs.
• jekyll-loading-lazy - Automatically adds loading="lazy" to img and iframe tags to natively load lazily.
• mermaid - Generation of diagram and flowchart from text in a similar manner as markdown.

Contributing

Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.

You can start by opening an issue describing the problem that you're looking to resolve and we'll go from there.

Download Details:

Author: jeffreytse
Source Code: https://github.com/jeffreytse/jekyll-spaceship 
License: MIT license

#jekyll #music #emoji #html 

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

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

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

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

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

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