5 of the Best WordPress Development Environments

Developers spend most of their time in test environments. Having a good development environment can save tons of time and energy. This begs the question: what’s the best test environment for WordPress? In this article, I’ll share some of my personal thoughts about five of the best WordPress development environments. I’ll dive deeper and talk about their features, so you can make an informed decision when choosing the right environment for your particular workflow.  

The best WordPress development environments in a nutshell

I chose 6 of the most necessary features and will do a quick comparison among the Valet, Vagrant, Local, DesktopServer and XAMPP development environments, so you can quickly wrap your head around these environments.

ValetVagrantLocalDesktopServerXAMPP
Cross-platformMacMac, Windows, LinuxMac, Windows, LinuxMac, WindowsMac, Windows, Linux
Easy installationYesYesYesYesYes
DashboardNoNoYesYesYes
Easy configurationTo some extentTo some extentYesTo some extentYes
Multiple websitesYesYesYesUp to 3 in free versionYes
PriceFreeFreeFree & ProFree & PremiumFree

Valet

Simply put, Valet is awesome. I can’t help but use this development environment since I found out about it some years ago. I’ve been amazed by the simplicity of this environment. The Laravel team has done a fantastic job in developing so many great features. I won’t list all the features but will quickly share a few key points with you.

Pros

  • It’s open-source and free.
  • It’s blazing fast.
  • It has a wide range of support for different platforms (WordPress, Laraval, Lumen, Drupal, …)
  • It’s easy to install via Homebrew (The Mac package manager).
  • With the help of Homebrew, you can switch between different PHP versions. In my job, I am sometimes in great need of this feature.
  • It offers two ways to share your local project online via Ngrok or Expose. It’s very practical for quickly getting feedback from your clients.
  • It has well-written documentation.
  • It has a long list of commands to control different aspects of the development environment.
  • No usage of virtual machines. This might be a con also but to me, the simplicity that it provides in comparison to virtual machines is worthy.
  • You can secure your site with TLS easily using a single command.

Cons

  • Multisite WordPress installation requires installing a separate driver. It’s easy to install, but I feel that it should have native support.
  • It’s not cross-platform. It only has official support for Mac users. There’s a fork called Valet Windows for Windows users, but it’s not official.
  • It configures your Mac to use some specific server type, and it can get messy if you want to use other servers and packages.
  • It’s not possible to turn on/off individual sites.

Vagrant

Vagrant is an all-in-one software for having full-featured environments. The main selling points of this software is that it’s portable and distributable, which allows it to provide lots of flexibility regardless of your operating system. It’s able to handle any type of environment that you need. The initial feeling that you may get is that it’s a software for pro developers but once you get your head around it, you’ll like it.

Pros 

  • It’s open-source and free.
  • It’s a cross-platform software that runs on Mac, Windows and Linux.
  • It’s portable and distributable via Vagrantfile. This is a killer feature.
  • It has the necessary commands to control the software via the command line.
  • Isolated packages and configurations for each environment.
  • Ability to turn off/on individual sites.

Cons

  • It has good documentation, but it could be improved to help newbie developers learn faster.
  • It seems that it’s intended for pro developers, not all developers.

Local

best WordPress development environments Local

Local is a modern WordPress development environment that offers many features. It provides a dashboard in which you can control your sites easily. If you are the type of developer who likes to have a dashboard instead of working from the command line, Local is one of the best available tools.

Pros 

  • It’s free. There’s a premium plan, but the free version is rich with features.
  • It’s a cross-platform software that runs on Mac, Windows and Linux.
  • If you want to serve your site in Flywheel and WP Engine, you can simply push your site to those servers from the dashboard.
  • To quickly share your local site online, you can create a live link with one click.
  • After creating the site, you can easily reconfigure the settings via the dashboard. Like changing the PHP version, server confirmation and more.
  • Ability to turn off/on individual sites.
  • It has built-in support for Mailcacher which makes email testing easy.
  • You can export/import your sites. It’s very handy to recreate your site in another operating system.

Cons

  • It seems that it’s slower than Valet in some cases.
  • It’s not possible to use the command line to control the environment.

XAMPP

best WordPress development environments XAMPP

XAMPP is an old player in providing WordPress development environments. It’s completely free and easy to install. I have used XAMPP before, and it has all the necessary features for having a good WordPress environment but I moved to Local some time ago.

XAMPP has a unique feature that almost none of the other environments has, which is a community that can quickly offer help. 

Pros 

  • It’s completely free.
  • It’s a cross-platform software that runs on Mac, Windows and Linux.
  • It’s getting frequent updates to support the latest versions of PHP.
  • It provides a way for you to easily configure the PHP and the server.
  • It comes with all the necessary modules to run a smooth WordPress environment.
  • It has a wide range of add-ons to support different platforms not only WordPress.

Cons

  • It’s slower than Valet based on my testing in some cases.

DesktopServer

best WordPress development environments desktopserver

DesktopServer is similar to Local and offers a dashboard to manage your sites. It’s not intended only for developers, other people like designers can also use it easily. It has free and premium versions. The free version is very limited in comparison with Local and XAMPP. I’ll mention the pros and cons of the free version below.

Pros 

  • It’s free with basic features.
  • It’s quick and easy to create a WordPress site from the dashboard.
  • It has built-in support for Xdebug which is a handy tool for debugging.
  • Ability to duplicate a site. This feature comes very helpful for me since I need to create my main sites with different versions of WordPress themes for testing purposes.
  • It includes the latest versions of PHP.

Cons

  • It’s not possible to create multisite. 
  • It’s limited to creating only 3 sites.

It’s worth mentioning that the premium version of DesktopServer has tons of features. Some of their features like importing/exporting, having code editor integrations, and blueprints for automated WordPress configurations are indeed time saver and worth the try.

Wrapping up

Selecting the right development environment is a personal choice, and I shared a few pros and cons of each of them. It’s recommended that you play with different environments and use the one that fits your needs.

In my opinion, what I’ve mentioned above are the best WordPress development environments at the moment. Personally, I use Valet and Local based on my needs. I’d love it if you would share your development environment in the comment section below and share their key pros and cons!

Pure CSS Parallax in 5 Minutes

Many people underestimate the power of CSS. Some of the fancy features that we see on the websites use JavaScript codes, but they can be implemented with pure CSS these days. For example, parallax sections almost always use JavaScript libraries, but in this article, we’ll cover how to build a pure CSS parallax section in just a few minutes.

Using pure CSS parallax can be easier and more performant since we don’t need to use JavaScript libraries.

What we’ll build

In this article, we’re going to build the following parallax sections with pure CSS. You can see the live demo at CodePen.

Understanding the used properties for pure CSS parallax

This technique relies on the CSS3 transform and perspective properties. By using these properties, we can create 3D elements in the space and scale and move them as necessary.

Transform property

This property enables you to transform elements in a two-dimensional and three-dimensional space. By using this property, we can rotate, scale, move and skew the element in the space.

pure CSS parallax

You can see different examples of transform properties in this pen.

Perspective property

This property is used to enable three-dimensional space for the element. The children of the element can be positioned in the space.

pure css parallax

In this pen, you can test the perspective property live.

Implementing the technique

Now that we’ve learned a bit about transform and perspective properties, let’s get our hands dirty and write some actual codes. The codes will be divided into two sections: HTML and CSS codes.

Markup

We need some simple markups for the parallax section. The role of each markup is explained below.

<main class="main">
  <section class="section static static-one">Static</section>
  <section class="section parallax parallax-one"></section>
  <section class="section static static-two">Static</section>
  <section class="section parallax parallax-two"></section>
  <section class="section static static-three">Static</section>
</main>

Notes

  • .main is used for setting perspective and overflow properties.
  • .section is used for setting general styling, not necessarily related to parallax.
  • .static is used for setting the static section properties.
  • .static-(one|two|three) is used for setting different background colors for static sections. 
  • .parallax is used for setting ::after (pseudo-element) which holds the transform properties. 
  • .parallax-(one|two) is used for setting different background images.

Styling

This is where the magic happens. The necessary lines are commended to help you understand the codes.

.main {
  /* Fill the available space */
  height: 100vh;
  
  /* Make the children of the element closer to the viewport */
  perspective: 2px;
  
  /* Hide the overflow */
  overflow-x: hidden;
}

/* General styling, not necessarily related to parallax effect  */
.section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80vh;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: bold;
}

/* Different background colors for demo purpose */
.static-one {
  background-color: #feceab;
}

.static-two {
  background-color: #aacfcf;
}

.static-three {
  background-color: #c06c84;
}

.parallax::after {
  /* Position the pseudo-element to fill the parent */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Scale the image to full */
  background-size: cover;
  
  /* Move the element back then scale the element, it helps to appears more slowly */
  transform: translateZ(-1px) scale(1.7);
  
  /* Set the parallax section before the other elements. */
  z-index: -1;
}

/* Different background images */
.parallax-one::after {
  background-image: url(https://source.unsplash.com/vs6a4EHj_Ro/1600x900);
}

.parallax-two::after {
  background-image: url(https://source.unsplash.com/P86-JPbDnPY/1600x900);
}

Wrapping up

In this article, we covered one of the coolest CSS implementations. By learning these types of techniques, we’ll understand how CSS is powerful and what we may be able to create in pure CSS.

This implementation was one of the most straight-forward ones, you can see the following ones for more advanced usages. 

We’d love to hear about your pure CSS parallax websites, so please share your examples with us in the comment section below.

Gutenberg Block Patterns: Next Awesome Gutenberg Feature

When it comes to the features of the Gutenberg – the new WordPress block editor – the sky’s the limit. The Gutenberg development team is continuing to enhance the editor after each release to bring users more features. One of those features is Gutenberg block patterns, which is a game changer. Before you know it, we’ll be able to create a full site right inside the editor. 

In this article, we’ll cover the Gutenberg block patterns feature and walk you through how we can quickly create our very own custom ones.

Note: To use the block patterns feature, you’ll need to install the latest Gutenberg plugin on your site.

Why block patterns?

If you’re familiar with Elementor, they have a Template feature that allows theme and plugin authors to create reusable combinations of elements/blocks and distribute them for users. This is not only the case for Elementor but nearly every popular page builder has a similar feature. 

This feature was missing in the WordPress new editor and it was proposed in Github. This feature got enough attention and the initial version was released in Gutenberg v7.7 and was stable enough when v8.0 was released.

Creating custom Gutenberg block patterns

This feature starts to shine more when we can create our own block patterns and release them for others to use. Let’s start to create our first pattern. 

It’s worth mentioning that we omitted some technical and other explanations, so you can more easily follow this post’s flow in making your first pattern.

1. Install the Code Snippets plugin

Install and activate the Code Snippets plugin. We’ll use this plugin to add the pattern registration codes in the following sections. You may also use a child theme or plugin to add the codes.

gutenberg block patterns

2. Create a pattern in the editor

Creating a pattern is a fairly easy job. We only need to create a new page and add some blocks in the editor. We used Image, Columns and Paragraph blocks to create the previously shown pattern.

3. Export the pattern codes

For registering a pattern, we need to export the created pattern as explained below.

1. Switch to Code editor and copy the codes.

gutenberg block patterns

2. Escape them by using the Onlinestringtools site.

<!-- wp:image {\"id\":158,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"http://tutorial.test/wp-content/uploads/2020/05/steve-huntington-XT1BJhMkHy4-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-158\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Rapidiously optimize B2B opportunities for interoperable benefits. Intrinsicly underwhelm world-class leadership skills before sticky imperatives.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Phosfluorescently architect equity invested convergence through integrated markets. Enthusiastically incentivize professional systems after quality channels.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->

4. Register your pattern

To display our pattern in the list of patterns, we need to register it via the register_pattern PHP function. This function, as described in the WordPress handbook, receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument.

Add a new snippet from Snippets > Add New then fill in the settings as shown below. Make sure to click on the Save Changes and Activate button.

gutenberg block patterns
if ( ! function_exists( 'register_pattern' ) ) {
	return;
}

register_pattern(
    'my-custom-patterns/pattern-1',
    [
        'title'   => __( 'Pattern 1' ),
        'content' => "<!-- wp:image {\"id\":158,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"http://tutorial.test/wp-content/uploads/2020/05/steve-huntington-XT1BJhMkHy4-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-158\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Rapidiously optimize B2B opportunities for interoperable benefits. Intrinsicly underwhelm world-class leadership skills before sticky imperatives.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Phosfluorescently architect equity invested convergence through integrated markets. Enthusiastically incentivize professional systems after quality channels.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
    ]
);

Finally, you should be able to see the pattern at the end of the Patterns section.

gutenberg block patterns

Conclusion

By now, it’s probably dawned on you the significance of Gutenberg block patterns and how to create a custom pattern in WordPress. We recommend that you keep up-to-date with the Gutenberg Github project to stay informed about developments regarding the feature. 

We’d love to hear about your experiences with the Gutenberg block patterns feature, so please share your patterns with us in the comment section below.

How to Create a Custom Gutenberg Block with the Block Lab Plugin

With the rising popularity of Gutenberg, building tailored Gutenberg blocks is becoming an essential skill for every developer. Throughout time, the WordPress community has made some great contributions to Gutenberg. Today, let’s take a look at the Block Lab plugin. Creating a custom Gutenberg block with the Block Lab plugin is much easier than standard custom block creation via the native Gutenberg API.

In this article, let’s see how we can create a custom Gutenberg block with the Block Lab plugin. But before going forward, you might want to check out the following articles we posted about Gutenberg if you haven’t done so already.

Before diving into codes

First thing’s first. Let’s get familiar with the Block Lab plugin and then we can start creating an example block with this plugin to explore its features.

Features:

  • WordPress- and Gutenberg-friendly UI.
  • 19 available field types.
  • Highly flexible in creating different types of blocks from easy to complex ones.
  • Developer-friendly functions.
  • Good documentation and tutorials.

Creating a custom Gutenberg block with the Block Lab plugin

To demonstrate how this plugin works, let’s create a posts loop block in a few steps. Almost all websites need to use these types of blocks to show posts, portfolios, news and other types of content. Now imagine that you can create any type of posts loop block by yourself using this plugin.

For this article, we are going to create the following posts loop block called Modern Posts. It allows you to fetch posts from different post types and to specify the number of the posts.

custom Gutenberg block with Block Lab

1. Install a child theme

We need to use a child theme for our PHP and JavaScript codes. For the purposes of this article, we’re going to use the Jupiter X Child theme.

custom Gutenberg block with Block Lab

2. Plugin installation

Go to Plugins > Add New, search for the block lab, then install and activate the plugin.

custom Gutenberg block with Block Lab

3. Configuring the block

To configure the essential settings for the Modern Posts block, go to Block Lab > Add New then fill in the Title and Icon settings as shown below. You may change other settings based on your needs.

custom Gutenberg block with Block Lab

4. Add the block fields

Fields allow us to set different settings for each block. Almost all blocks benefit from the flexibility the fields offer. We suggest that you read the Fields documentation.

To create the Modern Posts block’s fields based on the initial design (as shown above), we need the following Post Type and Number of Posts fields. You may add more controls based on your needs. Let’s create them.

1. Click on the Add Field button to add the fields.
2. Add the Post Type field as shown below.

custom Gutenberg block with Block Lab

3. Add the Number of Posts field as shown below.

custom Gutenberg block with Block Lab

4. Click on the Publish button. Afterward, you’ll see the following message which tells you where to create your PHP file in the child theme.

5. Write the block code

Now it’s time to create the PHP and CSS files to make the block show the posts loop. 
1. Create the block-modern-posts.php file in blocks folder in the child theme as shown below.

  • block_value() function gets the value from the fields that we created in the previous section.
  • We used a custom WP_Query to create a custom loop.
<div class="block-modern-posts <?php block_field( 'className') ?>">

	<?php
	// Variables
	$post_type  = block_value( 'post-type' );
	$post_count = block_value( 'number-of-posts' );

	// WP_Query arguments
	$args = array(
		'post_type'      => $post_type,
		'posts_per_page' => $post_count,
	);

	// The Query
	$modern_post_query = new WP_Query( $args );

	// The Loop
	while ( $modern_post_query->have_posts() ) {
		$modern_post_query->the_post();
		?>

		<div class="block-modern-posts--post">
			<img class="block-modern-posts--post-thumbnail" src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>">
			<div class="block-modern-posts--post-content">
				<h4 class="block-modern-posts--post-title"><?php the_title(); ?></h4>
				<div class="block-modern-posts--post-excerpt"><?php the_excerpt(); ?></div>
				<a class="block-modern-posts--post-more" href="<?php the_permalink(); ?>">Read More</a>
			</div>
		</div>

		<?php
	}

	// Restore original Post Data
	wp_reset_postdata();
	?>

</div>

2. Create the block-modern-posts.css file in the blocks folder in the child theme as shown below.

.block-modern-posts--post {
	display: flex;
	margin-bottom: 40px;
	align-items: center;
}

.block-modern-posts--post-thumbnail {
	width: 28%;
	height: 400px !important;
	object-fit: cover;
	border-radius: 30px;
}

.block-modern-posts--post .block-modern-posts--post-content {
	font-family: "Helvetica Neue";
	background: #fff;
	padding: 50px 40px;
	margin-left: -60px;
	box-shadow: 0 0 20px #0000001c;
	border-radius: 30px;
}

.block-modern-posts--post .block-modern-posts--post-title {
	font-family: "Helvetica Neue";
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.block-modern-posts--post .block-modern-posts--post-excerpt {
	margin-top: 20px;
	margin-bottom: 45px;
	color: #999;
	line-height: 1.8;
}

.block-modern-posts--post-more {
	background-color: #7882ff;
	border-radius: 50px;
	padding: 12px 22px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

/* Featured */
.block-modern-posts--post:first-child {
	display: block;
	margin-bottom: 60px;
}

.block-modern-posts--post:first-child .block-modern-posts--post-thumbnail {
	width: 100%;
	height: 550px !important;
}

.block-modern-posts--post:first-child .block-modern-posts--post-content {
	margin: -70px 50px 0;
	position: relative;
}

3. After adding the files, you can now play with the block in the WordPress editor.

Wrapping up

As outlined in this post, we walked you through how you can build a custom Gutenberg block with Block Lab, which is much easier than creating the blocks with the native Gutenberg API. In other words, the Block Lab plugin is a huge timesaver when it comes to creating custom blocks. 

We’d love to hear about your experiences with the Block Lab plugin, so please share your custom blocks with us in the comment section below.

How to Create a Custom Gutenberg Block with Lazy Blocks Plugin

custom Gutenberg block with Lazy Blocks - featured

Every day, we’re seeing more and more plugins extending Gutenberg in different directions. This is great news for Gutenberg lovers since they can enjoy using it even more. One of those handy plugins that we’re going to cover today is called Lazy Blocks
In this article, we’ll look at how we can create a custom Gutenberg block with Lazy Blocks. It’s worth mentioning that we also published similar articles.

Before diving into writing codes

The user-friendly architecture of this plugin will help us to easily create custom Gutenberg blocks. The following sums up the plugin’s key features:

  • User and Gutenberg friendly UI.
  • Various controls (checkbox, email, file, gallery, image, repeater, …).
  • Usage of Handlebars, which makes writing PHP codes a breeze.
  • Separate editor and frontend code blocks to help us write different outputs.
  • Custom templates for your posts.
  • Many hooks for PHP and JS codes.
  • Good documentation.

We recommend that you check out the following resources to become more familiar with this plugin:

Create a custom Gutenberg block with Lazy Blocks

The mentality behind this plugin is to spend your time and energy on the result, not on learning how to create blocks. This mentality will allow you to unleash your potential in creating custom Gutenberg blocks.

In this article, we omitted some technical and extra explanations, so you can more easily follow this post’s flow in making your first block. To learn even more about the process, you might want to read the plugin documentation.

So let’s dive into it and create an attention-grabbing Gutenberg Blockquote block in a few simple steps.

custom Gutenberg block with Lazy Blocks

1. Plugin installation

Go to Plugins > Add New, search for lazy blocks. Then install and activate the plugin.

custom Gutenberg block with Lazy Blocks

1. Configuring the block

To configure the essential settings for the Blockquote block, go to Lazy Blocks > Add New then fill the Title and Icon settings as shown below. You may change other settings based on your needs.

custom Gutenberg block with Lazy Blocks

2. Add the block controls

Controls allow us to specify dynamic settings for a block, and it’s almost necessary for all the blocks to have controls. They offer flexibility for the blocks. We suggest that you read the Controls documentation.

To create the Blockquote block’s controls based on the initial design (as shown above), we need the following Icon Background, Avatar, Text and Author controls. You may add more controls based on your needs. Let’s create them.

1. Under the Controls section, go to the Content tab and click on the + icon to add the controls.

2. Add the controls one by one as shown below.

custom Gutenberg block with Lazy Blocks

3. At the end, your controls should look like below.

3. Write the block code

Now we need to write the actual codes based on the design to make the Blockquote block work. In this section, we also use the created controls in the block to make it dynamic based on the settings.

1. Under the Controls section, go to the Frontend tab and add the following codes. The controls names have been wrapped in curly brackets {{control-name}} then added inside the following code. We recommend that you read the Codes documentation.

<blockquote class="lazyblocks-blockquote">
    <span class="dashicons dashicons-format-quote" style="background-color:{{icon-background}};"></span>
    <p class="lazyblocks-blockquote-text">{{text}}</p>
    <footer class="lazyblocks-blockquote-footer">
        <img class="lazyblocks-blockquote-avatar" src="{{avatar.url}}" alt="{{author}} quote" />
        <span>{{author}}</span>
    </footer>
</blockquote>

2. Update the block and go to a page to see how the block works. You may add different texts, names, avatars and icon backgrounds to the block. All this can also be added in different layouts like columns.

Conclusion

In this blog post, we easily created a custom Gutenberg block with Lazy Blocks without the hassle of creating a separate plugin, child theme or other development obstacle. This Lazy Blocks plugin will definitely help actualize your ideas about custom Gutenberg blocks in no time. 

We’d love to hear from you, so please share your custom blocks with us in the comment section below.

Tweaks Made to Improve Jupiter X Performance

For developers, time is of the essence when it comes to delivering a project on a tight deadline. Every second matters – this is the philosophy that helps the Jupiter X team propel itself forward with every new version it releases. After running some performance checks, we noticed that a couple of factors were hindering the Jupiter X performance from reaching its peak potential. So we set out on a mission to fix the inefficient codes, which then in turns saves valuable time for our users.

This post will provide an overview of the recent tweaks we’ve made, and we’ll further look at the efficacy of those changes in our test cases after the 1.15.0 update.

Inefficient codes

While checking the Jupiter X performance, we noticed that one of the themes’ components – called Compiler – was performing poorly, which affected different parts of user experience.

In the Jupiter X theme, the Compiler is responsible for generating and caching CSS and JavaScript. When there’s no cache, it compiles LESS, CSS and JS files and generates the necessary assets in the upload directory.

The Compiler offers some valuable benefits for developers, allowing them to:

  • Add styles and scripts to the theme on the fly.
  • Filter or override the LESS variables used for generating styles.
  • Exclude/include different styles and scripts.
  • Generate automatic RTL styles.

At the start of the Jupiter X road, these benefits seemed quite promising in terms of bringing lots of customizability to the themes. But throughout the years, it appears that the theme industry is moving toward lightweight themes and relying on page builders to increasingly do the job.

All in all, we started to optimize the Compiler to bring faster-compiling assets for the new version of Jupiter X. We did the following optimizations until v1.17.0.

Reduce calling Customizer variables

The Jupiter X Customizer settings rely on the Compiler to generate styles for the frontend. In this way, we send the Customizer settings as an array (variables) to the Compiler, and it generates the proper styles.

That said, it works pretty well – however, we found out we were calling the variables multiple times during each page load. Now, it’s limited to only when generating the styles.

Single post compiling preview/update asset

There are a few post meta options (build via ACF) for single posts. Some of them are styling options. To generate styles for the frontend, we were sending the styles to the Compiler and recompiling the main CSS file.

It turned out that this caused unnecessary recompiling for each post update/preview. We decided to generate separate CSS files for each post (e.g. jupiterx-post-12.css) when necessary.

Refactoring the CSS parser function

We have a CSS parser in the theme which is responsible for the following actions:

  1. Removing empty CSS properties. (Replaced by standard PHP functions)
  2. Minifying CSS. (Replaced by standard PHP functions)
  3. Adding necessary vendor prefixes. (Dropped adding automatic vendor prefixes)
  4. Generating automatic RTL CSS. (Replaced by a faster PHP class)

Using static script

The theme’s main JavaScript file was generated via the Compiler from smaller files, and we came to the conclusion that we don’t need to have on-the-fly compiling for the script file. That said, we replaced it with a Gulp solution to build and distribute the static script in the theme.

Jupiter X Performance test cases

We measured the loading time in the following 5 test cases for comparison. To have a stable testing result for all the tests, the factors below were considered.

  • The comparison was done between version 1.15.0 and 1.17.0. You can check the release notes.
  • Each test was run 3 times (with 30s interval) to calculate the average load time.
  • Development mode (Control Panel > Settings) was set to off.
  • Tested on load environment.
  • Tested on a fresh installation.
  • Activated Jupiter X Core, Advanced Custom Fields and Elementor plugins.

1. Default home page

Improve Jupiter X Performance

This test was completed on a default Jupiter X homepage. The page was loaded 3 times without a cache, and the loading time was recorded.

Result

The v1.17.0 is almost one second faster than v1.15.0, so there was a one-second improvement (30%) in loading without a cache.

2. Loading Customizer

Improve Jupiter X Performance

This test was completed on Customizer loading the default Hello world single post page. The page was loaded 3 times without a cache, and the loading time was recorded.

Result

The loading time in v1.17.0 is almost one second faster than v1.15.0, which is the equivalent to 15% faster loading without a cache.

3. Reloading the Customizer preview

This test was done on Customizer > Blog > Blog Single when changing the Typography settings of the Author Box. The test was done 3 times.

Result

It’s not possible to measure the loading time in Customizer preview, but based on the checks, v1.17.0 is about 40% faster than v1.15.0.

4. Loading the Elementor editor

This loading test was conducted with Elementor on a page with 9 sections. The page was loaded 3 times without a cache, and the loading time was recorded.

Result

The loading time in v1.17.0 is almost 2s faster than v1.15.0, which is the equivalent to a 25% faster loading time without a cache.

5. Elementor previewing

Improve Jupiter X Performance

This test was done on Elementor previewing on a page with 9 sections. The page was previewed 3 times, and the loading time was recorded.

Result

The loading time in v1.17.0 is almost 2s faster than v1.15.0. This is the equivalent to a 50% faster loading time without a cache.

Conclusion

As mentioned before, we strived to enhance Jupiter X performance in various areas of the theme. By improving the code base without sacrificing current features, we were able to significantly decrease loading times, which translates into time saved for our users. 

In the table below, you’ll be able to see the summary of all the test cases mentioned in this article.

Test caseAverage improvement
Default home page30%
Loading Customizer15%
Customizer preview reloading40%
Loading Elementor editor25%
Elementor previewing50%

Last but not least, since we improved the codes to run more efficiently, the usage of CPU and RAM of your server will be decreased.

Of course, there’s still room for performance enhancement, and we’re continually working to improve the theme to make it as performant as possible.

We’d love it if you could share your feedback with us in the comments section.

A Beginner’s Guide to Create a Custom Block for WordPress Gutenberg

Gutenburg, the new WordPress editor, is the future of WordPress. In no time, it’s going to bring a full-site editing experience for users. That said, learning how to create a custom block for WordPress Gutenberg is a fantastic investment. These days, more and more themes (such as the Twenty Twenty theme) are taking advantage of what Gutenberg has to offer.

This post will go over a general introduction of Gutenburg blocks and will then explain how to create a custom block for WordPress Gutenberg.

What are Gutenberg blocks?

Blocks are the core building functionality of the new editor. The idea is that you can add blocks anywhere you want. Blocks are created mostly in JavaScript (sad news for PHP lovers).

Learning a few concepts is necessary before diving into writing codes.

Block registration

First things first – we need to register a block. To register, we need to use the registerBlockType function.

// Registering my block with a unique name
registerBlockType( 'mcb/call-to-action', {} );

Edit and Save

After registering a block, the next step is to tell the editor how to show the block in the editor and how to save it in the database.

Having a proper understanding of the edit and save functions is essential to create a custom block for WordPress Gutenberg.
The edit function is responsible for making the block editable in the editor, and the save function is responsible for saving the block in the database for showing it in the frontend.

// A static div
edit: function() {
    return wp.element.createElement(
        'div',
        null,
        'My custom block.'
    );
}

save: function() {
    return wp.element.createElement(
        'div',
        null,
        'My custom block.'
    );
}

Attributes

Almost all blocks need to have attributes. Think of them as a way to talk to the block to change the color, text or spacing for instance.

{
    url: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
    }
}
// { "url": "https://lorempixel.com/1200/800/" }

Are you a PHP lover?

If so, sorry to tell you that Gutenburg is a React.js based editor. The JavaScript frameworks have taken a leap in popularity among developers. Nowadays, JavaScript is an essential skill to have under your belt.

Take every opportunity to really beef up your JavaScript chops.
– Matt Mullenweg, Creator of WordPress

Available built-in blocks

Following are the list of built-in Gutenberg blocks in WordPress. If you need more blocks, you can read this article about free blocks.

Common blocks

This includes Paragraph, Image, Heading, Gallery, List, Quote, Audio, Cover, File, Video blocks.

custom block for WordPress Gutenberg

Formatting

This includes Code, Classic, Custom HTML, Preformated, Pullquote, Table, Verse blocks.

Layout elements

This includes Buttons, Columns, Group, Media & Text, More, Page Break, Separator, Spacer blocks.

custom block for WordPress Gutenberg

Widgets

This includes Shortcode, Archives, Calendar, Categories, Latest Comments, Latest Posts, RSS, Search, Tag Cloud blocks.

Embeds

This includes Embed, Twitter, YouTube and 29+ blocks.

custom block for WordPress Gutenberg

How to create a custom block for WordPress Gutenberg

Enough is enough – let’s get our hands dirty and start coding! There are different techniques for creating a custom block for WordPress Gutenberg. For the purpose of this article, let’s use one of the most straightforward techniques to build a tailored Call to Action block.

Note: It’s worth mentioning that many detailed explanations have been intentionally omitted to help you follow the flow of the article easily. The intention is to help you create your first block without being weighed down in the minutiae of block creation.

1. Prepare a base plugin

Before doing anything else, we need a plugin to place our codes. Depending on your preferences, you can use a child theme instead of a plugin.
1. Go to your plugins folder on your site, then create a my-custom-blocks folder.

custom block for WordPress Gutenberg

2. Create a plugin.php file as shown below.

3. Activate the plugin from WordPress admin.

custom block for WordPress Gutenberg

2. Enqueue block script and style

Using the register_block_type function, we can enqueue the block’s script and style it with the Guttenberg.

1. Add the following function in the plugin.php file to enqueue the style and script.

function mcb_register_blocks() {

	// Check if Gutenberg is active.
	if ( ! function_exists( 'register_block_type' ) ) {
		return;
	}

	// Add block script.
	wp_register_script(
		'call-to-action',
		plugins_url( 'blocks/call-to-action/call-to-action.js', __FILE__ ),
		[ 'wp-blocks', 'wp-element', 'wp-editor' ],
		filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.js' )
	);

	// Add block style.
	wp_register_style(
		'call-to-action',
		plugins_url( 'blocks/call-to-action/call-to-action.css', __FILE__ ),
		[],
		filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.css' )
	);

	// Register block script and style.
	register_block_type( 'mcb/call-to-action', [
		'style' => 'call-to-action', // Loads both on editor and frontend.
		'editor_script' => 'call-to-action', // Loads only on editor.
	] );
}

add_action( 'init', 'mcb_register_blocks' );

2. Create the following files in the plugin folder to hold the style and script.

blocks/call-to-action/call-to-action.css
blocks/call-to-action/call-to-action.js

3. Register the block

After preparing the base, it’s now time to create the actual block.

1. In the call-to-action.js file, add the following function to register an empty block.

( function( blocks, editor, element ) {
	var el = element.createElement;

	blocks.registerBlockType( 'mcb/call-to-action', {
		title: 'MCB: Call to Action', // The title of block in editor.
		icon: 'admin-comments', // The icon of block in editor.
		category: 'common', // The category of block in editor.
		attributes: {},
		edit: function( props ) {
			return null;
		},
		save: function( props ) {
			return null;
		},
	} );
} )( window.wp.blocks, window.wp.editor, window.wp.element );
custom block for WordPress Gutenberg

2. For this block, we need both the content and button attributes. Add them as shown below.

attributes: {
	content: {
		type: 'string',
		default: 'Collaboratively customize web-enabled supply chains and turnkey collaboration and idea-sharing Assertively cultivate.'
	},
	button: {
		type: 'string',
		default: 'Join Today'
	}
},

3. In the edit function, we’re going to use the RichText component to create a div to hold the content and a span to hold the button. Basically, this component allows to create an editable text area.

The onChange function is responsible for updating the attributes when you change the block content.

edit: function( props ) {
	return (
		el( 'div', { className: props.className },
			el(
				editor.RichText,
				{
					tagName: 'div',
					className: 'mcb-call-to-action-content',
					value: props.attributes.content,
					onChange: function( content ) {
						props.setAttributes( { content: content } );
					}
				}
			),
			el(
				editor.RichText,
				{
					tagName: 'span',
					className: 'mcb-call-to-action-button',
					value: props.attributes.button,
					onChange: function( content ) {
						props.setAttributes( { button: content } );
					}
				}
			),
		)
	);
},
custom block for WordPress Gutenberg

4. In the edit function, we’re going to use the RichText component to generate the content and a HTML button to generate the button.

save: function( props ) {
	return (
		el( 'div', { className: props.className },
			el( editor.RichText.Content, {
				tagName: 'p',
				className: 'mcb-call-to-action-content',
				value: props.attributes.content,
			} ),
			el( 'button', { className: 'mcb-call-to-action-button' },
				props.attributes.button
			)
		)
	);
},

4. In the call-to-action.css, add the following codes to add some visual styling to the block.

.wp-block-mcb-call-to-action {
	background: #3f39ff;
	padding: 45px;
	text-align: center;
	border-radius: 10px;
}

.mcb-call-to-action-content {
	font-family: serif;
	font-size: 24px;
	color: #fff;
	padding-bottom: 30px;
	margin-bottom: 0;
}

.mcb-call-to-action-button {
	background: #000;
	border: 0px;
	border-radius: 5px;
	padding: 12px 35px;
	color: #fff;
	font-family: sans-serif;
}
custom block for WordPress Gutenberg

5. Now, you should be able to play with the block in the editor.

Wrapping Up

This post provided a basic introduction of what Gutenburg is and how we can create a custom block for WordPress Gutenberg. In other words, think about this article as the very first step in entering the Gutenberg world.

We recommend that you read the WordPress official handbook in order to gain a deeper understanding of the Gutenberg editor.

We’d love it if you would share your custom block with us in the comment section below!

How to Create a Custom Gutenberg Block Using the ACF Plugin

Due to its popularity – as well as its popularity in the WordPress community – the Advanced Custom Fields (ACF) plugin needs no introduction. In a nutshell, ACF has made the developer’s job a breeze for adding custom fields anywhere in WordPress, now it’s time to help them create a custom Gutenberg block using ACF.

Not surprisingly, Elliot Condon (the creator of ACF) hasn’t stopped there. He introduced a groundbreaking feature called ACF Blocks for Gutenberg in the ACF PRO version 5.8, which is a game changer for ACF and Gutenberg players.

In this article, let’s see how we can implement this in real life and create a custom Gutenberg block using ACF.

Note: This article requires the ACF PRO plugin version 5.8.0 and above. If you’re a Jupiter X user, you can activate the plugin from Control Panel > Plugins.

Before diving into writing codes

ACF is a simple yet advanced plugin. If you’re unfamiliar with the ACF plugin, we recommend that you read the following articles to build a good foundation before proceeding any further.

Create a custom Gutenberg block using ACF

Creating native custom Gutenberg blocks requires decent knowledge of JavaScript, which is not ideal for many users. The ACF Blocks feature is here to save time and help you to unlock your potential for creating custom Gutenberg blocks.

Let’s create a Blockquote block in a few simple steps.

custom Gutenberg block using the ACF

1. Prepare a base plugin

Let’s create a base plugin to hold the block codes. Depending on your preferences, you can use a child theme instead of a plugin.

1. Go to your plugins folder on your site, then create a my-acf-blocks folder.

custom Gutenberg block using the ACF

2. Create a plugin.php file as shown below.

custom Gutenberg block using the ACF

3. Activate the plugin from WordPress admin.

custom Gutenberg block using the ACF

2. Register a block

Using the acf_register_block_type() function, we can add a new block in Guttenberg with PHP. 

1. Add the following function in the plugin.php file to define the block properties.

function mab_register_acf_block_types() {
    acf_register_block_type( [
        'name'            => 'blockquote',
        'title'           => __( 'Blockquote' ),
        'description'     => __( 'My blockquote block.' ),
        'render_template' => dirname( __file__ ) . '/blocks/blockquote/blockquote.php',
        'category'        => 'formatting',
        'icon'            => 'format-quote',
    ] );
}

2. Hook into acf/init action to register the block.

if ( function_exists( 'acf_register_block_type' ) ) {
    add_action( 'acf/init', 'mab_register_acf_block_types' );
}
custom Gutenberg block using the ACF

3. Now you should be able to see the block in the Gutenberg editor. As you see, the block is empty and has no settings. In the next step, we’ll add some settings.

custom Gutenberg block using the ACF

3. Create a field group

To create the block settings, you need to register your settings in a field group.

1. Add a field group called Block: Blockquote in Custom Fields > Fields Group, then add the following fields (settings). There’s no limitation to add the fields but it’s recommended to keep it as few as possible.

2. In the Location, set the Block to Blockquote. By doing so, ACF will show the created fields (settings) for the Blockquote block.

3. Now, you should be able to see the settings in the Gutenberg editor. If you change the settings, nothing will happen. In the next step, we’ll implement the settings.

4. Render the block

Finally, we need to tell ACF how to render the block. This is just a standard process to get the settings and generate the HTML properly.

1. Create blockquote.php in the blocks/blockquote folder in your plugin, then add the following codes. The codes are based on standard ACF docs.

<?php

// Create id attribute allowing for custom "anchor" value.
$id = 'blockquote-' . $block['id'];
if ( ! empty( $block['anchor'] ) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'blockquote';
if ( ! empty( $block['className'] ) ) {
    $className .= ' ' . $block['className'];
}
if ( ! empty( $block['align'] ) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assign defaults.
$color = get_field( 'color' );
$quote = get_field( 'quote' ) ?: 'Your blockquote here...';
$author = get_field( 'author' ) ?: 'Author name';

?>
<div id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $className ); ?>">
    <blockquote class="mab-blockquote">
        <span class="mab-blockquote-text"><?php echo $quote; ?></span>
        <span class="mab-blockquote-author"><?php echo $author; ?></span>
    </blockquote>
</div>

2. Now you should be able to see the block in the Gutenberg editor. By default, it has some default values, which you can change by altering the Quote and Author settings.

3. Now, let’s spice it up by adding some styling. Add blockquote.css in the blocks/blockquote folder in your plugin, then add the following codes.

.mab-blockquote {
    padding: 50px 30px;
    text-align: center;
    border: 8px solid #ff3131;
}

.mab-blockquote-text {
    display: block;
    padding-bottom: 30px;
    font-size: 26px;
    font-family: serif;
}

.mab-blockquote-author {
    color: #777;
    font-family: sans-serif;
    font-size: 18px;
}

4. ACF can’t automatically detect the styling files. In other words, we need to tell it where to find the file. Add the enqueue_style param in the plugin.php file.

'enqueue_style'   => plugin_dir_url( __FILE__ ) . '/blocks/blockquote/blockquote.css',

5. Now, you should be able to see the block in the Gutenberg editor as shown below.

6. Now, let’s take another step and make the border color dynamic based on the Color setting. Open the blockquote.php file then do the following modifications.

<blockquote class="mab-blockquote" style="border-color:<?php echo $color; ?>;">

7. Now you should be able to set a different border color from the block settings.

Conclusion

Now that you have enough knowledge to create a custom Gutenberg block using ACF, you can create any type of custom blocks for Gutenberg.

We’d love to hear from you, so please share your custom blocks with us in the comment section below.

How to Create a Website with Google Sheets for Free

Honestly, I can’t believe my eyes, and I have to share what I just found out with you.  I recently stumbled across a service that I can use to power websites, apps or whatever else I want – all with a simple Google Sheet. This service is called Sheety, which I found on Product Hunt. In short, Sheety allows you to create a website with any Google Sheet and instantly turn it into an API – all for free.

Why build a website with Google Sheets

You’re probably wondering why you should build a website with Google Sheets when there are numerous services out there like WordPress.

And that’s a fair question. So let’s break it down: the idea behind Sheety and comparable tools is definitely not to replace services like WordPress as they are irreplaceable. That said, let’s briefly go over some benefits of building a website with Google Sheets, so you can decide if this is the tool for your project.

  • Google Sheet is basically a spreadsheet – and it’s free.
  • Almost anyone knows how to create/update a spreadsheet.
  • Spreadsheets can be easily stored and backed up.
  • Good for creating a quick and free personal site.
  • Suitable for rapid website prototyping.
  • Ideal for building a newsletter list.
  • No need to export/import your spreadsheets data.

Which service should I use?

As mentioned before, Sheety is one of these available services. There are alternatives to Sheety ranging from free to premium to help you to create your website.

For the purpose of this article, let’s use the Sheety service which is free yet powerful.

Sheety – turn your Google Sheet into an API

The Sheety service turns any Google Sheets into an API, so you can fetch your data in any website. Before getting the ball rolling, it’s a good idea to read the following articles to get more familiar with this service.

How to create a simple portfolio website with Google Sheets

Because nearly everyone needs a way to show off their work, portfolios are one of the most popular types of website. So then let’s create a simple portfolio website like the one you see below.

You can see the final live version on CodePen.

create a website with Google Sheets

Prepare a Google Sheet

1. Create a new Google Sheet, then add two sheets called Meta and Items.

create a website with Google Sheets

2. In the Meta sheet, add the Title, Read more and Footer data as shown below.

create a website with Google Sheets

3. In the Items sheet, add Title, Description, Tags and Screenshot columns as shown below. These columns will function as dummy data to populate the portfolio items.

create a website with Google Sheets

Connect the Google Sheet to Sheety

1. Sign into Sheety with your Gmail login information.
2. Add a new project, then set Project Name to Portfolio and Spreadsheet URL to your Google sheet and click on the Create button.

create a website with Google Sheets

3. Click on the Sync button to generate the API endpoints. After doing so, you should be able to see the Meta and Items endpoints.

create a website with Google Sheets

Prepare the website

For this article, I used the CodePen website. You can use any other services or create your own HTML in your local host.

1. Create a pen in CodePen and call it Sheety Portfolio.
2. Add Tailwind CSS framework. This is used to quickly create a visually appealing layout.

https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css

3. Add the Vue.js framework and Axios library, which are used to fetch data from API and populate the HTML properly.

https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

4. Copy and paste the HTML and JS from this pen to your pen. There’s no need to explain the HTML and JS codes here since it’s outside the scope of this article. However, I did add some comments in the codes to help you understand the codes.

create a website with Google Sheets

5. Now, you should be able to see a website like in the first screenshot. From now on, as soon as you update your Google Sheet and refresh your pen, the new data will be automatically shown.

Conclusion

All-in-all, I’m glad that I found this Sheety website and shared this service with you. In this article, we first learned about a cool service to create a website with Google Sheets. Secondly, we created a simple websites to grasp the potential of these services.

It’d be cool to share your websites powered by Google Sheets with us in the comment section below.

Extend Gutenberg with Free Blocks

Released in late 2018, the WordPress Gutenberg editor is getting more and more popular by the day. By default, it has some blocks for you to kickstart creating a website, but they are far from enough to create a professional website. To do this, you’ll need to install some add-ons to access advanced blocks.In this article, we’ve included some popular, free plugins to help you extend Gutenberg with free blocks. Now let’s briefly name and introduce the plugins.

Note: It’s worth mentioning that the following statistics are relevant to when this article was written. These figures might have changed by the time you read this article.

Page Builder Gutenberg Blocks – CoBlocks

extend Gutenberg with free blocks - coblocks

CoBlocks contains an amazing archive of page building blocks to be used with the Gutenberg WordPress block editor.

One of the best features of CoBlocks is that the page builder is robust but lightweight, which means that you’ll be able to get maximum functionality without compromising on performance.

Read more about CoBlocks on WordPress.org

Specifications

Gutenberg Blocks – Ultimate Addons for Gutenberg

This add-on simplifies that website building process. It provides you with several  unique and creative blocks for Gutenberg that help you create pages or posts without writing a single line of code.

Read more about Gutenberg Blocks on WordPress.org

Specifications

  • 200,000+ active installations
  • 20 blocks
  • Frequent updates
  • 5 star rating
  • Translated to 6 languages
  • Compatible with free popular Gutenberg ready themes
  • Pre-built templates
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.
  • Developed by Brainstorm Force.

Kadence Blocks – Gutenberg Page Builder Toolkit

extend Gutenberg with free blocks - kadence

This plugin adds custom blocks and options to extend Gutenberg’s editing capabilities so you can create custom layouts and more engaging content.

This plugin is meant to be a toolkit that makes the WordPress block editor capable of creating content usually only possible through popular page builder plugins.

Read more about Kadence Blocks on WordPress.org

Specifications

  • 50,000+ active installations
  • 12 blocks (interactive demo).
  • Frequent updates
  • 5 stars rating.
  • Translated to 3 languages.
  • Compatible with free popular Gutenberg ready themes.
  • Block management to help you enable/disable the blocks.
  • Documentation and support friendly.
  • Developed by Kadence WP.

Atomic Blocks – Gutenberg Blocks Collection

extend Gutenberg with free blocks - atomic blocks

Atomic Blocks is a collection of page building blocks for the new Gutenberg block editor.

On top of the handy, time-saving blocks already found in Atomic Blocks, this plugin has a new Section and Layout block! This block comes with a library of pre-designed sections and layouts to help you quickly and easily build a beautiful site with the new block editor.

Read more about Atomic Blocks on WordPress.org

Specifications

  • 40,000+ active installations
  • 15 blocks
  • Frequent updates
  • 4.5 stars rating.
  • Translated to 7 languages.
  • Default theme and compatible with free popular Gutenberg ready themes.
  • Pre-designed sections and layouts.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Stackable – Gutenberg Blocks

extend Gutenberg with free blocks - stackable

Stackable is one of the first and most expansive block libraries made specifically for the new WordPress Block Editor (Gutenberg).

It adds essential custom blocks to Gutenberg’s arsenal to achieve a smooth page building experience.

Read more about Stackable on WordPress.org

Specifications

  • 20,000+ active installations
  • 23 blocks (interactive demo)
  • Frequent updates
  • 5 stars rating.
  • Translated to 5 languages
  • Default theme and compatible with free popular Gutenberg ready themes.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Advanced Gutenberg

advanced gutenberg

Advanced Gutenberg adds the missing blocks and configuration you need to build professional websites.

This plugin helps you to take control of the new Gutenberg editor with a user edition profile configuration.

Read more about Advanced Gutenberg on WordPress.org

Specifications

  • 20,000+ active installations
  • 27 blocks
  • Frequent updates
  • 4.5 stars rating.
  • Translated to 3 languages
  • Compatible with free popular Gutenberg ready themes.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Conclusion

In this article, we did our homework and briefly presented some helpful plugins to extend Gutenberg with free blocks. Gutenberg is becoming more and more popular in the WordPress community, which will lead to the development of more add-ons.

Feel free to share your favorite Gutenberg add-on with us in the comments.

Two Techniques to Crop Images in CSS

During the past couple of years, CSS has been improved rapidly with many features now possible in pure CSS. There are several websites that provide tutorials and introductions for CSS features. One of the best among all of them is MDN Web Docs.

The MDN site contains interactive examples, allowing you to learn many of the current and upcoming features. It also shows the browser compatibility table so you can understand the coverage of whichever feature in different browsers.

One of the features needed for nearly all websites is cropping images. Many websites rely on PHP, Node and other programming languages to crop images. But let’s not get bogged down in programming languages and focus on two CSS techniques that rely less on these languages. Sometimes, we just need to hide a part of an image instead of actually cropping the image.

Using object-fit and object-position to crop images in CSS

The object-fit and object-position properties in CSS allow developers to have control over images and videos similar to the way they have control of background images. These two properties offer a wide range of usages in pure to crop images in CSS and position them within a container.

Exploring the object-fit property

The object-fit property tells the content – like an image – to respond in certain ways to its content box (the black border in the below images). By using object-fit, you can tell an image to fill the content box by keeping or ignoring its aspect ratio.

This property can accept five values according to the standards. You can view the following examples live in CodePen. Each example shows an image that is contained in a content box that has a different width.

The contain value

The image is scaled to maintain its aspect ratio while fitting within the content box. The entire image is made to fill the box while preserving its aspect ratio.

img { object-fit: contain; }
Crop Images in CSS 1

The cover value

The image is sized to keep its aspect ratio to fill the entire content box. If the image’s aspect ratio isn’t the same as the aspect ratio of the box, then the image will be clipped to fit.

img { object-fit: cover; }
Crop Images in CSS 2

The fill value

The image is sized to fill the content box. If the object’s aspect ratio isn’t the same as the box’s aspect ratio, then the image will be stretched to fit it.

img { object-fit: fill; }
Crop Images in CSS 3

The none value

The image will not be resized.

img { object-fit: none; }
Crop Images in CSS 4

The scale-down value

The image is sized as if none or contain were specified, which results in smaller concrete image size.

img { object-fit: scale-down; }
Crop Images in CSS 5

Putting the object-position property into practice

This property is a game-changer in positioning the images when using object-fit. It works similarly to the background-position property.

This property can accept different values according to the standards. You can view the following examples live in CodePen.

Values can be directions (top, left, right) or numeric (10px, 20%).

img { object-position: top left; }
img { object-position: 100px 50px; }

Using width, height and overflow to crop images in CSS

This method sounds like a workaround but it has its own use cases. In this technique, we use width, height and overflow properties in CSS.

You can view the following example live in CodePen.

  1. Add a div can give it class container.
  2. Set width and height to 150px then set the overflow to hidden.
  3. Use margin to position the image based on your needs. In this case, set it to -100px 0 0 -150px.

Conclusion

The object-fit property is a popular and modern method used to crop images in CSS. This feature is well supported among modern browsers, meaning that you can make use of it without worrying about compatibility issues.

The object-fit technique can be used in many different cases, but it might not be a perfect solution for every website. In some websites, we need actual background cropping to prevent loading large images.

We’ve used the object-fit technique in the Raven plugin for the Jupiter X theme, which made the development a breeze. Feel free to share your use cases in the comment section below.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Add Two-Factor Authentication in WordPress

Two-factor authentication – commonly referred to as 2FA – adds an extra level of protection for user accounts. As much of our daily lives these days happens online with the use of mobile and laptop devices, it’s only natural that our accounts have become a target for criminals. This means that we need to adapt to new technologies to improve our security – and learning how to add two-factor authentication in WordPress can do just that.

Each type of technology has its own benefits and drawbacks – and two-factor authentication is no exception. Let’s see how it stacks up.

Benefits

Two-factor authentication systems gained widespread popularity due to the next level of security it offers users. Briefly, it provides the following benefits:

  • Stronger protection
  • Low cost
  • Easy to implement

Drawbacks

This technology is a reliable and effective system that blocks malicious access to accounts. Like any other system, it still has some drawbacks.

  • Vulnerabilities
  • Takes longer to log in
  • Maintenance

Common Types of Two-Factor Authentication in WordPress

Various types of 2FA have been created and adapted in different environments to increase the level of protection. We’re going to cover this briefly in this section.

Hardware Tokens

Probably the oldest method is the one that produces a token. They normally are in the shape of a key fob or a USB and produce a token key which is for 30 seconds.

Software Tokens

This method is one of the most popular forms of producing tokens. It relies on some software on your mobile app, for example, to provide users with a one-time passcode.

SMS Text/Voice

Some of the big companies like Google have quickly come around to using voice/text message for tokens. Chances are that you’ve used this if you have a Gmail account.

In this method, after entering a username and password, the site sends a one-time passcode to the user’s phone to complete the login process.

Push Notifications

Instead of getting a passcode, the sites send push notifications to a user’s mobile device to approve or deny access.

Biometric

With new innovations such as detecting fingerprints and facial recognition, it’s now possible to treat the user as a token. It’s likely that this method will soon be the most popular.

Popular Plugins for Two-Factor Authentication in WordPress

Some WordPress plugins are available that allow you to quickly implement two-factor authentication in your website. We selected the following plugins based on their popularity and the number of downloads. We’ll briefly explain three of them in the following sections.

Google Authenticator Plugin

The Google Authenticator plugin provides WordPress users with 2FA while also using the Google Authenticator app (which can be downloaded on any IOS or Android devices).

If you’ve taken steps to enhance your security, then you might have already downloaded the Google Authenticator app on your mobile device. This plugin is already in use for a number of other sites and services including Gmail, Dropbox, and Amazon.

Features

  • Fast setup
  • Usage of software to generate codes

Quick Setup

  1. Install the Google Authenticator plugin and activate it.
  2. Go to the Settings > Google Authenticator page and configure the settings as it fits your site.
 Two-Factor Authentication in WordPress First

Two Factor Authentication Plugin

You can secure your WordPress login with this Two Factor authentication plugin. Users for whom it is enabled will require a one-time code in order to log in.

Features

  • Supports standard TOTP + HOTP protocols (and so supports Google Authenticator, Authy, and many others).
  • Displays graphical QR codes for easy scanning into apps on your phone/tablet
  • TFA can be made available on a per-role basis (e.g. available for admins, but not for subscribers)
  • TFA can be turned on or off by each user
  • TFA can be required for specified user levels, after a defined time period (e.g. require all admins to have TFA, once their accounts are a week old) (Premium version)
  • Works together with “Theme My Login” (both forms and widgets)
  • Includes support for the WooCommerce and Affiliates-WP login forms
  • Does not mention or request the second factor until the user has been identified as one with TFA enabled (i.e. nothing is shown to users who do not have it enabled)
  • WP Multisite compatible
  • Simplified user interface and code base for ease of use and performance
  • Added a number of extra security checks to the original forked code
  • Works together with “WP Members” (shortcode form)

Read more about this plugin here.

Quick Setup

  1. Install the Two Factor Authentication plugin and activate it.
  2. Go to the Two Factor Auth page and enable it.
 Two-Factor Authentication to WordPress Second

Wordfence Security – Firewall & Malware Scan Plugin

Included in the Wordfence plugin is an endpoint firewall and malware scanner, both of which were created from scratch to safeguard WordPress.

This plugin is an all-in-one stop plugin for security. Two-factor authentication is only one of its features.

Features

  • Two-factor authentication (2FA), one of the most secure forms of remote system authentication available via any TOTP-based authenticator app or service.
  • Login page CAPTCHA stops bots from logging in.
  • Disable or add 2FA to XML-RPC.
  • Block logins for administrators using known compromised passwords.

Read more about this plugin here.

Quick Setup

  1. Install the Wordfence Security – Firewall & Malware Scan plugin and activate it.
  2. Go to Wordfence > Login Security and scan the codes with your authenticator app. If you need further guidance, you can read this article.
 Two-Factor Authentication to WordPress Last

Wrapping Up

In this article, we first explained what 2FA is and the different ways in which it’s used. In today’s world, digital technologies play an increasing role in our lives, which means the importance of security now takes center stage. This is where 2FA comes into play: this system is crucial for almost all websites and it’s highly recommended that you use it for your website. We further highlighted some WordPress plugins specifically designed for 2FA and their features and provided the steps you need to take to seamlessly install each plugin.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Create a Shortcode in WordPress – Beginner’s Guide

Shortcodes are the swiss knife feature in the WordPress world. They allow you to add dynamic content to any page, post or sidebar easily. They look like small pieces of codes, but they enable you to run a small or big function on any place of your site quickly.

Shortcodes are displayed inside square brackets like: [ gallery ] and they can accept attributes depending on their features like: [ gallery id=”123″ size=”medium” ]

Built-in Shortcodes

By default, WordPress includes a few built-in shortcodes. Some of them are helpful for daily use.

  • [ caption ] – allows you to wrap captions around content.
  • [ gallery ] – shows image galleries.
  • [ audio ] – embeds and plays audio files.
  • [ video ] – embeds and plays video files.
  • [ playlist ] – displays a collection of audio or video files.
  • [ embed ] – allows you to wrap embedded items.

Useful Ready-to-use Shortcodes

The WordPress community has created many plugins to offer ready-to-use shortcodes for users. Most of the plugins are free and only one click away from your site. Here, we mention a few of them, and you can find more in WordPress plugin directory.

Using a Shortcode in WordPress

Thanks to the nature of shortcodes, there are different methods to use them almost anywhere in WordPress.

Use in Gutenberg (new WordPress editor)

As you know, Gutenburg is the new default editor in WordPress, and it provides a user-friendly UI to create your content. To use a shortcode, just add a Shortcode block.

Shortcode in WordPress Gutenburg

Use in TinyMCE (old WordPress editor)

TinyMCE was the default WordPress editor before and some people still prefer to use it. To use a shortcode, simply add your shortcode in the editor.

Shortcode in WordPress Tiny

Use in Elementor

Elementor is a popular page builder for WordPress. The Jupiter X theme also uses this page builder as the primary page builder.

Using shortcodes in Elementor is straightforward by using the Shortcode element.

Shortcode in WordPress Elementor

Use in Sidebars/Widget Areas

The text widget allows you to use shortcodes in sidebars/widget areas.

Shortcode in WordPress Widgets

Use in the WordPress Menu

By default, there is no way to use shortcodes in the WordPress Menu, to enable this feature, you need to install and active Shortcode in Menus plugin.

Use in Theme/Plugin Files

In some cases, we need to use the shortcodes in theme/plugins PHP files. Fortunately, WordPress provided a built-in function to help us.

<?php echo do_shortcode( '[your-shortcode]' ); ?>

Different Methods to Create a Shortcode in WordPress

Normally, there are two methods to create a shortcode in WordPress. Each method has its own pros and cons depending on your needs.

  • Using plugins (intended for normal users)
  • Writing code (intended for developers)

Using Plugins to Create a Shortcode in WordPress

The WordPress community is highly active and created some free plugins to help normal users create shortcodes directly from the WordPress dashboard. Let’s cover two of them from there.

Shortcoder Plugin

This plugin allows users to create a custom shortcode and store HTML, JavaScript and other snippets in it.

Features

  • Create custom shortcodes easily and use them within WordPress.
  • Use any kind of HTML as shortcode content.
  • Insert custom/WordPress parameters in the shortcode.
  • Visual editor for adding shortcode content.
  • Globally disable the shortcode when not needed.

Create a Basic Shortcode

1. Install and activate the Shortcoder plugin.

2. Go to Settings > Shortcoder page, then click on the Create a new shortcode button.

3. Fill out the settings as shown below then click on the Create shortcode button.

Shortcode in WordPress Shortcode

4. Voila! Now you can use the shortcode as previously explained.

Shortcode Maker Plugin

This plugin helps you to create a shortcode by yourself or choose built-in shortcodes to use them easily.

Features

  • You can use built-in shortcodes to create widgets like tabs, alerts, accordions, tables, etc…
  • Add as many attributes as you want with the ability to define a default value.
  • You can write the PHP code in definition. To use code, use [php_code][/php_code] in your shortcode definition and place the code inside it.
  • Bootstrap v4.0.0 compatible

Create a Basic Shortcode

1. Install and activate the Shortcode Maker plugin.

2. Go to Shortcode > Add New Shortcode page then fill out the settings as shown below and hit the Publish button.

3. Voila! Now you can use the shortcode as previously explained.

Writing Codes to Create a Shortcode in WordPress.

Being able to write codes in WordPress, opens an infinite possibility for creating shortcodes. Let’s create a basic shortcode in WordPress in 2 simple steps. After following the steps, you can use the shortcode in WordPress as explained before.

For this tutorial, we’ll use the Code Snippets plugin to add the codes. You may use a child theme or write a plugin to add the codes.

1. Write the Shortcode Callback Function

Each shortcode requires a function to run when it is called. This function can be a basic/advanced function.

function artbees_hello_wordpress() {
     return 'Hello WordPress';
 }

2. Registering the Shortcode

Now that we have the function, we’ll register the shortcode with the add_shortcode function in WordPress and start to use it. This function accepts two parameters: The name of the shortcode and the callback function that we wrote in the previous section.

Add the following codes in a new snippet then click on the Save Changes and Activate button.

function artbees_hello_wordpress() {
     return 'Hello WordPress';
 } 

add_shortcode( 'hello_wordpress', 'artbees_hello_wordpress' );

Shortcodes vs. Gutenberg Blocks

Shortcodes and Gutenburg blocks have some similarities in concept, and both can help you to get the job done faster.

If you find the shortcodes helpful, you’ll like Gutenburg blocks. Popular plugins switch to Gutenburg blocks instead of shortcodes since they are more innovative and user-friendly.

Summary

The handy shortcode feature in WordPress has helped many people to write fewer codes in their daily job. In this article, we introduced shortcodes and covered two methods to create a basic shortcode in WordPress. Shortcodes have a wide-ranging use in WordPress, so feel free to share yours in the comment section below!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.