Bon Voyage! Key Elements for Creating a Hotel Website

Creating a Hotel Website Featured
Creating a Hotel Website Featured

If you have a hotel and want to showcase all its features, then you’ll need to create a site so visitors can learn all the need-to-know info and services on offer. You’ll also be able to offer online bookings, which will be much more convenient for your prospective customers. In this article, we’ll take a look at five Jupiter X hotel templates and highlight the key elements you’ll need when creating a hotel website.

Visual Presentation

Presenting your hotel visually through the use of images will allow your website visitors to see how comfortable the rooms are and what to expect upon arrival. You can create 3-4 columns and add an image element to each. You can also make use of a switch feature to show a different image on the hover as it’s shown in the Fortuna template:

Creating a Hotel Website Visual

While creating a hotel website, keep in mind that images help you make the best first impression. They give your visitors the power to visualize, which in turn creates more opportunities for sales.

However, we suggest against the overuse of images on your website when text is more appropriate. Text is better for search engine optimization because index robots can index each word, meaning there’s a good chance your hotel will appear first on the search engine list.

Additionally, overdoing it on the images can make your webpage look too cluttered. In other words, use images meaningfully.

Form builder

Having a booking form on your hotel site will simplify the reservation process for a user. You can create a simple form in seconds with the Form element. Just drag and drop this element to your page, edit the placeholders, add an action email to collect the information and that’s it! You now can receive bookings.

Avoid too many fields and ask questions with short answers as much as possible in order to make the booking process easy and efficient.

The form used in the Jupiter X Luxury Hotel template is a good example.

Creating a Hotel Website Form

Another element you can use for the booking process is the JetEngine plugin. It’s bundled in the theme, and you can install it easily via the Jupiter X Control Panel. The plugin authors created a tutorial to describe how a booking form can be made with JetEngine.

To see how it looks, you’ll need to check the Hotel Listing template:

Creating a Hotel Website JetEngine


The Counter element will add credibility to your hotel, increasing trust among existing customers and creating new potential visitors. The Counter element will allow you to show the number of satisfied customers, rooms at your hotel, certifications awarded, as well as any other interesting figures.

Here is an example of the Counter element in action in the Jupiter X Vyasa template:


Displaying testimonials on your website is a great way to show that previous customers have been satisfied with your services and offerings. In turn, this will promote your hotel and provide potential customers with guidance in choosing your accommodation. With the Testimonials element, while creating a hotel website, you can add a beautiful set of customer testimonials, customize the style and play with its animation settings. The Jupiter X Hotel Listing template features a nice example of this element in action:

Creating a Hotel Website Testimonials

Make your testimonials eye-catching by adding an image next to your customer’s statement, which will help boost confidence and trust in your services.

Check out the following example in the Fortuna template:

It’s been proven that testimonials can help businesses grow. How does that happen? Like this: people first search for info about your hotel before submitting a booking form. If the testimonials are positive, then potential customers will be more drawn to your hotel. Of course, this means more business for you.


You can showcase various types of rooms with a portfolio so customers can visually choose what best fits their needs.

This can be achieved by using the Posts element. There are many features to play with, and you can customize everything to your taste, skin type and layout. Good examples of a portfolio are visible in the Luxury Hotel and Marble Producer templates:

Your portfolio should offer information about your hotel and allow prospective clients to browse through the hotel features.


It’s no surprise that people online are more attracted to visuals than to text. Visitors to your website prefer looking at more images, and a slider can help you obtain this goal without causing any problems.

In this way, the Slider widget is invaluable while creating a hotel website. You can showcase your hotel’s main features or show fantastic landscapes that the visitors can view from their rooms.

Want to tell a visual story about your hotel, but don’t want to use a lot of vertical scrolling to do so? A slider does this for you. Creating a bright and attractive slider will liven up your website page.

Creating a Hotel Website Slider

Introduce your team

Let your visitors know who is working at your hotel. Describe the main positions and how qualified they are. Your customers should know that your team is professional! The Team Member element allows you to do exactly this. Check out the Hotel Listing template to see how it might look on your site:

Creating a Hotel Website Team

Create a filter for faster search

Allowing your visitors to find appropriate hotels or search for the rooms with specific requirements by using a filter will give you a leg up. It’ll shorten the amount of time that visitors will put into their search, and they’ll be able to select only the features they need.

To implement such a filter on your site, you’ll need to use the JetSmartFilter plugin, which is bundled in the Jupiter X theme. The image below shows a good example of it in the Hotel Listing template.

Here is a detailed tutorial about creating the search filter.

Listing Grid

This element gives you the possibility to build a listing for any post type or taxonomy, and use it to showcase the posts and terms in the form of a grid layout. You can post information about upcoming events, new specials, and features offered by your hotel. A listing grid is an easy way to display such content and make it visible to the people who are searching for information about your destination.

To learn more, then make sure to read this tutorial.

Wrapping Up

The aforementioned elements are not the only ones used in creating a hotel website. They are website tips that’ll simplify the creation process.

Feel free to check the list of the hotel templates for Jupiter X where you can find the readymade design provided by Artbees experts. Don’t hesitate to let us know in the comments if there are any elements you think are missing and should be included in this list. Feel free to share your experience putting these practices into use on your hotel website.


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

WunderWP: Introducing Preset and Custom Elementor Templates on the Cloud!

Preset and custom Elementor templates Featured

Earlier in October, we introduced WunderWP, a small, useful and completely free tool that helps you save your widget styles to the Cloud and reuse them in any Elementor project. Additionally, you can use the free preset styles created by WunderWP and use them in your projects for free. To get a head start in 2020, we are now back with even more features for WunderWP!

In addition to custom and preset styles collection, WunderWP now allows preset and custom Elementor templates on the Cloud. You can now create and save your section or page templates in the Cloud and reuse them in any Elementor project. Or – just like preset styles – you can simply choose one of the preset templates created by professional designers and quickly and easily put your content together.

Reusable content templates

Ever spent time and energy in creating an Elementor page only to later notice other Elementor projects contain the same content and design? WunderWP now allows you to save your content templates – such as a specific section or whole page – and reuse them as many times as you want. Just create a section or a whole page, save it in the WunderWP Cloud and use it in as many websites as you’d like.

Elementor itself allows you to save and reuse content templates but it can only be used in the same Elementor installation, meaning it cannot be used in your other Elementor projects. WunderWP now makes it possible to use all the templates you save in the Cloud in any of your connected websites.

Preset and custom Elementor templates Gif

Readymade content templates

These days, most websites repeat the same type of design. A header section is mostly a combination of a logo, a menu bar and search field put together in a particular order – such as left-aligned or centralized, sticky or multiple-row. So what if there was a collection of header layouts with different combinations of these elements that we could quickly insert, tweak and use in our Elementor websites? Or let’s say that you don’t have a taste for design at all and don’t want to pay a fortune to hire a designer.

The new preset templates provide you with a collection of preset templates for a complete page or a section of a page. Instead of building everything from scratch, the preset Elementor templates allow you to put a page together quickly with preset content. Simply drag a preset intro section, an about section, a services section or a call-to-action section to your page and create a beautiful page in seconds.

Preset section templates are a combination of widgets created and optimized to be usable in a variety of contexts and for different purposes. For example, the About Us readymade section template comprises a nice heading widget along with a description beneath it and a Team Element widget along with a Learn More button for each member. Everything is well-organized with the right order, composition, and appearance.

There more than 50 premade section templates available at the moment covering a wide array of purposes such as team, about, contact, call to action, header, footer, services, countdown among much more. We’ve provided a few examples below.

Contact Us

Preset and custom Elementor templates Contact
Free Contact Section templates

Call To Action

Preset and custom Elementor templates CTA
Free Call-to-Action Section templates


Free Features Section templates


Free header Section templates


Free Team Section templates

All your Elementor design assets together on the Cloud

WunderWP allows you to store your Elementor design assets – including your custom widgets styles and content templates – all in one place on the Cloud and easily use them for the websites connected to WunderWP.

It helps web designers or even beginner Elementor users save a lot of time creating content in Elementor. WunderWP enables anyone who uses it to quickly create a layout with preset and custom Elementor templates and to save their hard-earned design work as reusable assets for future projects. All this without repeating all that effort.

At this phase, we’ve delivered the 4 main features of WunderWP, and we’re thrilled that we could make them available all for free. We’d like to know the Elementor community’s feedback on it and what they think should be the next step to take for WunderWP😉. If you have questions, ideas or comments for WunderWP, please do share it with us to help WunderWP evolve in the best way.


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

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.


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 to Artbees Themes Blog for the best WordPress tips and insights.

How to Add Two-Factor Authentication in WordPress

Two-Factor Authentication in WordPress Featured

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.


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


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.


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.


  • 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.


  • 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.


  • 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 to Artbees Themes Blog for the best WordPress tips and insights.

Everything You Need to Know about WordPress Development Workflow

WordPress Development Workflow Featured

It’s no secret that WordPress is the most popular CMS in the world. Due to its popularity, there are a number of tools and services out there you can use to simplify your WordPress development workflow and improve the delivery time of your project. In this blog post, we’re going to take a look at these tools and services, as well as a few methods you can use to better develop websites.

Local or remote development

When it comes to developing WordPress themes, you’ll need to set up a development environment suited to WordPress. To get started, you’ll need to choose a decent hosting environment for your project, which can be a local environment or a live website. Both have their advantages and disadvantages as well as different methods and tools. Let’s take a closer look.

Local environment – Ideally, the web development for any project always flows in one direction: local → staging → production. This is a proven method for avoiding collisions. All core, plugin and theme updates are first done locally, then tested in staging and finally deployed to production.

A local environment or local server is a web server that runs on a personal computer and is used for development. In other words, it’s not used to make the website available for others on the internet.

Benefits of a local environment:

  • Themes and plugins testing: In your local environment, you can try out as many themes and plugin combinations as you want without risking taking your live site out due to incompatibilities.
  • Safe updates: With a local environment, you can update WordPress core and components to see if there are any problems before applying the updates to your live site.
  • No internet needed to work: With the WordPress site on your computer, you can work on it without being connected to the internet. This means that you can get work done even if there is no WiFi.
  • Best performance: Since site performance is not limited by an online connection, local sites usually run much faster, which makes for a better WordPress development workflow.
  • Low or no cost: You can set everything up with free software and eliminate the need for a paid staging area.

Furthermore, there is a variety of services that you can make use of:

1. Local by Flywheel – This is the easiest way to install and deploy your website from local to remote.

WordPress Development Workflow Flywheel

2. MAMP – This stands for Macintosh, Apache, MySQL, and PHP and allows you to set up a localhost environment on OS X. A beta version is also available for Windows. MAMP is free, but there’s also a premium version available with the ability to set up any number of virtual servers, as well as the option to install WordPress automatically.

WordPress Development Workflow Mamp

3. XAMPP – This is a free and open-source localhost PHP development environment available for Windows, OS X, and Linux. The Apache Friends website includes a fantastic forum for users who run into trouble and need some help.

4. DesktopServer – DesktopServer is extremely easy to set up as it can take as little as five minutes to get WordPress up and running on your local machine. Unfortunately, if you want to use a multisite setup then you’ll have to upgrade to the premium version.

5. WampServer – WampServer is a popular Windows web development environment that allows you to create web applications with Apache2, PHP and MySQL.

The above five services don’t make up a comprehensive list but instead are the most popular. Of course, other local services exist on the market that enables you to work on a project in the local environment.

Remote environment – The remote environment is made up of hosting providers. In this case, if you’re working directly on a live website, any changes you make are published immediately (that is, as long as you’re not using Staging). This setup is the easiest to maintain, as new configuration options or software need to be deployed in one place only.

Hosting companies today offer the best technologies ever, starting from syncing in multiple servers to CLI technology. There is also dedicated WordPress hosting that is focused only on WordPress website hosting and their infrastructure is specially optimized to host WordPress CMS. We are not going to review hosting companies because there are thousands of reviews on the net.

Choosing a starter theme?

When building a WordPress site, one of the most significant decisions you’ll make is which theme to use. There is a plethora of themes available for you to choose from – each of which has its own pros and cons. This post will break down and compare two major theme types, frameworks and starter themes.

What exactly is a WordPress starter theme? It’s a blank theme with minimal design. It comes with either a basic layout or without a layout at all. Usually, such themes come with the most commonly used templates in a WordPress theme.

In WordPress starter themes, you’ll find all the required template files, including the basic CSS styles and functionalities that are required to create a WordPress theme. These themes come with the code to help you display posts, comments, and archive pages, with minimum or no styling. This saves you the effort of creating everything from scratch.

With these themes, developers can start adding their own styles to create an entirely new and fresh theme. These differ from the parent themes that usually completely style WordPress themes, which can be directly installed and used on live websites. A starter theme or child theme can be used to create a parent theme. As discussed, starter themes come with no styling, but you can add those.

Let’s check some starter themes to see what they offer:

Underscores – Underscores is one of the most popular WordPress starter themes. It comes with an ultra-minimal CSS, which means that you’re free to write your own CSS stylesheets when creating your WordPress theme as there is less stuff to bother the developer.

A large number of WordPress developers have already used Underscore to create both free and premium WordPress themes. The majority of the codebase in _s is well-optimized with comments on nearly every function and call. It is one of the best options for SASS users as it comes with a SASS configuration as well.

Sage – Sage – formerly known as Roots – is a more feature-heavy starter theme that focuses on offering a few different capabilities from the start. It ships with Gulp/Bower supporting a “modern WordPress development workflow,” which means that you can quickly compile SASS into the normal CSS.

This means that you are able to spot any possible bugs or mistakes as you make them as opposed to writing a ton of code, then compiling and testing later, only to struggle to find out what’s breaking your site when everything is put together the way it will be when it goes live. (With the CSS compiled and JS minified into a single file etc.)

Genesis – Genesis is a long-time staple of the WordPress general user – and more importantly – the developer community. It’s a premium framework made for working with child themes.

Genesis has a big community of developers working with it, which means that not only are there lots of people you can connect with and learn from (with lots of tutorials available online), there are also a ton of genesis specific plugins.

If you’re looking to work with a trusted framework, Genesis is the right choice for you. While Genesis is not free, there is no developer option and the basic price ($59.99) includes unlimited domains, even if you’re developing sites for clients.

Bones – This is a bare-bones (no pun intended) starter theme that is perfect for a starting developer. The well-documented CSS makes it easy for beginners to go in and make significant changes to mold the theme into their own design.

Bones is a great choice if you’re a beginner to WordPress but already know some CSS/HTML and can’t wait to get your hands dirty.

So, this leads us to a question: What is the Best WordPress Starter Theme?

There’s no one theme that is universally the best choice for everyone. While there are a lot of great starter themes and frameworks out there, these stand out from the pack in many ways. If you’ve picked a starter theme or framework to work with, please let us know in the comments. We would also love to hear about your progress as a WP developer.

Best plugins for development

WordPress plugins for developers are rated highly by developers since they help ease their WordPress development workflow. I’ve done the research (so you don’t have to!) and found that the following 10 WordPress plugins stand out as the most useful plugins for developers.

Theme Check – This plugin checks your new theme against the current coding standards and all the requirements for the theme to be functional. If you want to develop themes that are up to WordPress standards, this plugin is a must-have. It helps you keep up with the WordPress coding standards without worrying about likely mistakes in your code.

Debug Bar – This adds an admin bar to your WordPress admin, providing a central location for debugging. I like this plugin since I can tell from a single click the total queries, total queried time and memory usage – all of which is absolutely useful for debugging. This plugin also shows you PHP warnings and notices, but you need to ensure your WordPress error reporting is enabled in wp-config.php

Query Monitor – This allows for the debugging of database queries, API request and AJAX called used to generate theme pages and theme functionality.

Monster Widget – The Monster Widget consolidates the core WordPress widgets into a single widget, which allows you to test widgets styling and functionality in your theme.

Developer – This is the ultimate plugin for testing your WordPress development environment. This plugin checks and ensures that your development environment is configured correctly including the plugins, constants and other settings.

What The File – This plugin allows you to see the files being used to render a particular page. The best thing about this plugin is that when you’re on the frontend of the page on the WordPress bar, you can actually see the template files list used for building this page. You can also click on the files, and you’ll be directed to the file editor page.

Version Control – No more cowboy coding

Do you know what cowboy coding means? Well, if you don’t, then let me tell you. Cowboy coding is when you or your team download a file from the FTP and then upload the changed files and refreshes the page in the hope to see the changes. This is not only inefficient but dangerous!

This WordPress version control helps you track changes to your WordPress site to monitor what’s happening and roll back those changes if needed. Those changes could be simple tweaks like edits to a post or more technical changes like edits to your site’s codebase. Something like a demo version of version control is a built-in WordPress feature that you may know as a WordPress revision feature.

WordPress Development Workflow Feature

This feature enables you to compare the current state of the post to the previous version. This is how version control works. Aside from this, you can also implement a third-party version control system in your project which will highly improve control over your project. For starters, let’s explore why you would use version control and what it can offer in improving your WordPress development workflow.

First of all, version control is used to protect you from unexpected changes. Did you make changes that messed something up? No worries, you can restore your site with a few clicks. The second major benefit of version control is working with a team. Your work will be more efficient, and you’ll be able to control everything everywhere. Moreover, if you are using branching and merging, you’ll be able to copy part of your site’s code to work on and then “merge” that code back into your live site when it’s ready for production.

Best use cases for WordPress Version Control

There are several methods and tools to use in WordPress for version controlling. I’ve gone ahead and listed the best below:

Git – It’s a little more technical, but it’s one of the most popular version control systems. Git is used by all types of developers. If you want to use Git, you have to use hosted repositories like Github, Bitbucket or Gitlab and then deploy your site from that repository to your live server.
To automate the deployment of your code onto the live server, you have several options at your disposal. WP Pusher and Revisr are some of the popular tolls.

VersionPress is an open-source project that aims to “bring the full power of Git to WordPress” by version controlling both your site’s files and database. Though, it also relies on Git. The unique thing about VersionPress is that it tracks every little change and does it in natural human language.

For example, instead of just logging a change to your database, VersionPress will tell you that someone “updated the Hello World!” post. Obviously, this makes Git a lot more useful and accessible in the context of a WordPress website.

WordPress Development Workflow VersionPress

WP Rollback – This only works for themes and plugins from, which means that you can roll back the previous version of your theme or plugins that were downloaded from the WordPress repository. Let’s say that your plugin update breaks something that you can’t fix immediately. (First of all, you have to use the staging site for this) WP Rollback can be used to roll back to the previous version of the plugin.

The plugin adds a rollback button to any WordPress theme or plugin, which makes the rollback feature very easy to operate.

WordPress Development Workflow Final

Final thoughts

The methods and tools that we reviewed in this post – plus dozens of others – can be found on the internet, but we compiled a list of the most popular ones to help dramatically improve your WordPress development workflow.

The tools used in developing your projects might change from one to another, however certain methods and approaches should be kept the same – such as version control in any situation and always backing up before updating your site.

If you enjoyed this article, please share with us the tools and methods that you are using to develop your projects. We’d love to hear from you!


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

How to Restrict WordPress Website Content

Restrict WordPress Website Content Featured

If you have a website, you may need to restrict the content of a WordPress website to certain people. You might want to set the content of the site visible only to logged-in users – or you might need it to be even more specific and make it visible to logged-in users with defined roles. WordPress allows you to assign each logged-in user with specific roles. One can then use this role and set content to be either visible or hidden.

Why would you need to restrict content?

There are many reasons – and many ways – you can restrict WordPress website content.

Usually, such restrictions are necessary if you offer your users the chance to download an e-book, file or something else in return for doing something like registering, subscribing to a newsletter or publication.

There are certain benefits for all those WP users and web owners who try to restrict content on a WordPress website. In particular, it will help them create a stronger and larger community around their specific business or undertaking and make more money from “selling” access to tutorials, learning courses, documents, instructions, videos, and audio recordings, as well as from any other type of multimedia or content.

If you want to restrict content on a WordPress website, there are some options available:

  • Set password protected and private pages
  • Create a simple Members Area on your WordPress site through coding
  • Free plugins that will help you control access to your site’s pages, posts, and other content

Restricting content through coding can be tricky for many users, so we’ll discuss the WP plugin you can use to limit access to different types of content.

Password protected pages

The simplest way to restrict access to your page is to use the ‘visibility‘ settings that WordPress provides by default.

You can find these options in the right-hand panel when you add a new page or post:

Restrict WordPress Website Content Password Protected

Under the visibility settings, there are three options:

Public – Under this default setting, the content is available to all site visitors.
Password protected – Only the readers with the page’s (or post’s) password can unlock access to the content.
Private – This option allows access to specific users based on their role.

In other words, the password protected and private visibility options allow you to restrict content.

Password protected pages/posts

This option helps you to have specific pages and posts that are password protected simply by assigning a password to that page (or post). Anyone who knows the password can access the content.

Restrict WordPress Website Content Access

Marking pages/posts private

Private pages don’t require individual passwords to unlock. Access to such pages is granted after checking a user’s role. Typically, only site admins or editors can view such private pages. For others, such pages will display a “Not Found” message or might not even load.

So the big difference between password protected and private pages is that if you don’t have sufficient privileges to view a page, then it won’t be displayed on the website anywhere. To avoid coding when creating a members area, consider installing one of the following plugins. They can help you protect your content from unregistered users:

Paid Memberships Pro – With this plugin, only your members will get access to different content of your website such as pages, posts, categories, and more.
Restricted Site Access – This plugin limits access to your site to visitors who are logged in or are accessing site content from a specified IP address range. Guests can be redirected to a different page including a login page or a message displayed by you.
Ultimate Member – This is a simple and effective plugin that makes it possible to create an easy registration form and to build new communities online. You can create custom user roles and also engage in content restriction on a global scale and on a per post/page basis. This plugin differentiates between three categories: logged-in users, logged-out users and everyone else.

Let’s install the Ultimate Member plugin on the Jupiter X site as an example of restricting WordPress website content.

To install Ultimate Member, you can check out our article, which provides instructions on how to install any compatible third-party plugin. To get started with Ultimate Member, we suggest that you also read their documentation.

After the installation of the plugin, you’ll see the menu labeled “Ultimate Member” in your WP Dashboard. After clicking the menu, you will be able to see the settings. In the settings, you can manage everything including user roles, emails, access control, etc.

Before setting up the plugin, you’ll have to go to the general settings and tick the box labeled “Anyone can register.” This way, every user who is visiting your website will be able to register and become a member of your community.

Restrict WordPress Website Content Community

After that, check out the users setting where you can set the default roles of the members or subscribers. You can set all the fields based on your requirements.

Then you can move to the Access bar where you can manage the accessibility of the website for general users and community members.

You can also build your own restricted access message that users will see when they are trying to access the content they don’t have permission to use or see. You can also restrict, post, page, category and taxonomy access if you want.

If you would like to know how to restrict content for different users, you can read the detailed instructions in the plugin’s documentation.

To learn how to create a registration form on your website, you can refer to this article, which also has detailed instructions.

Setting up a membership website with Ultimate Member is easy. However, you can use any other membership plugin that you think will be better for you, and you’ll be happy with the results. In any case, Ultimate Member offers several benefits and multiple features including front-end user registration/login, front-end user profiles, a drag and drop form builder, and much more.

Wrap up on how to restrict WordPress website content

While it’s possible for you to build a completely private website, sometimes it’s easier to just deny your visitors access to certain content based on their user roles. Select a plugin that you find is the best for your needs and set to display content to a specific group of visitors.

In this particular article, we described how to install and restrict WordPress website content using the Ultimate Member plugin on a Jupiter X site. We’re excited to hear about your experiences or questions, so please comment below!


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

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

Shortcode in Wordpress Featured

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.


  • 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.


  • 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.


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 to Artbees Themes Blog for the best WordPress tips and insights.

How to Add a Custom Setting Page in WordPress

In the previous post about WordPress custom admin pages, we defined a custom admin page and explained how to add a new admin page to WordPress.

One of the most important usages of WordPress custom admin pages is the Settings Pages. Almost every plugin has custom setting pages, which allows developers to have an option page for their plugin. Some plugins like Akismet ask for integration codes and others have the option to enable or disable their features. WooCommerce has several options to customize shop, and all of them are implemented using Settings API.

In this post, we’ll delve into how to create a custom setting page in WordPress for what we created in the previous post. We’ll also add a new setting and the required UI for it. We’ll then save and use this saved value on the site.

Adding a new setting in WordPress

In order to add new settings to WordPress, we have to use WordPress Settings API. Settings API is a core API that allows developers to add a new custom setting page in WordPress.

This includes functions to register settings, setting the section and setting fields, form rendering and error handling.

Before adding settings

For the first step, we need to make sure we have a form and that it’s set to work with options.php. In the following code that we have a call back function to generate the heading, we need to load settings for the API functions to let our custom settings work with WordPress.

The code from the previous post about how to have a custom admin page can be accessed here.

We need to change the my_admin_page_contents function to the following:

function my_admin_page_contents() {
    <h1> <?php esc_html_e( 'Welcome to my custom admin page.', 'my-plugin-textdomain' ); ?> </h1>
    <form method="POST" action="options.php">
    settings_fields( 'sample-page' );
    do_settings_sections( 'sample-page' );

We just loaded the setting fields and the setting sections (which we will create) and added a submit button to save them.

Settings section

A setting section is part of the WordPress settings API which allows developers to have a group of settings under a heading. It’s possible to add a setting section to an existing WordPress admin page or to a new custom admin page.

Here, we are going to add a new setting section to our custom admin page.

Adding a new setting section

Now, we’ll go ahead and use the add_settings_section function to have a new setting section in our custom admin page which have sample-page as the slug.

	__( 'Custom settings', 'my-textdomain' ),

In the above code, we have added a new setting section and the arguments are:

<?php add_settings_section( $id, $title, $callback, $page ); ?>

$id A custom slug for the setting section.
$title Setting section title. Make sure it is translatable.
$callback A function that adds markups to the settings section.
$page The page slug that we want to add our settings section.

As we have used a callback function (my_setting_section_callback_function), let’s define it.

my_setting_section_callback_function( $args ) {
	echo '<p>Intro text for our settings section</p>';

And let’s wrap our codes to a new function to call it on admin_init.

add_action( 'admin_init', 'my_settings_init' );

function my_settings_init() {

        __( 'Custom settings', 'my-textdomain' ),

function my_setting_section_callback_function() {
    echo '<p>Intro text for our settings section</p>';

The result will be like the following:

Custom Setting Page in WordPress 1

Note that WordPress automatically adds a Save Changes button.

Settings fields

After having a section for our settings, which includes a title, custom markup and save button, it’s time to have some real settings that will allow us to get some inputs. In order to do that, we’ll use the settings_fields function.

settings_fields function is not only for having settings and input markups, but it also adds nonce and takes care of security as well as adds the required actions and functionality to make sure our settings will work.

Adding a new setting field

The usage of the settings_fields function is like

   __( 'My custom setting field', 'my-textdomain' ),

which is actually

<?php add_settings_field( $id, $title, $callback, $page, $section, $args ); ?>

and the arguments are:

$id A custom slug for the setting field.
$title Setting the field title.
$page The page slug of which we want to show setting field on it.
$section The section that we want to show setting field under it.
$args Extra arguments. See more here.

Like adding a setting section, we have a callback function that generates the markup.

function my_setting_markup() {
    <label for="my_setting_field"><?php _e( 'My Input', 'my-textdomain' ); ?></label>
    <input type="text" id="my_setting_field" name="my_setting_field">

We should wrap the settings_fields function to our my_settings_init function. So our code will be:

add_action( 'admin_init', 'my_settings_init' );

function my_settings_init() {

        __( 'Custom settings', 'my-textdomain' ),

		   __( 'My custom setting field', 'my-textdomain' ),

		register_setting( 'sample-page', 'my_custom_settings_options' );

function my_setting_section_callback_function() {
    echo '<p>Intro text for our settings section</p>';

function my_setting_markup() {
    <label for="my_setting_field"><?php _e( 'My Input', 'my-textdomain' ); ?></label>
    <input type="text" id="my_setting_field" name="my_setting_field">

And the output will be

Custom Setting Page in WordPress 2

If you try to save the settings, you may see some errors like option page not found. The reason is that we just added markups, but our settings are not registered to WordPress yet, and we’re not ready to save values to the WordPress database.

Registering custom settings in WordPress and saving values

The WordPress settings API has the needed functionality for getting and saving values from a setting. So we should use the register_setting function. Using the following code, we’ll register our settings in WordPress.

register_setting( 'sample-page', 'my_setting_field' );

Again, we need to use that in the init. So our code will be:

add_action( 'admin_init', 'my_settings_init' );

function my_settings_init() {

        __( 'Custom settings', 'my-textdomain' ),

		   __( 'My custom setting field', 'my-textdomain' ),

		register_setting( 'sample-page', 'my_setting_field' );

function my_setting_section_callback_function() {
    echo '<p>Intro text for our settings section</p>';

function my_setting_markup() {
    <label for="my_setting_field"><?php _e( 'My Input', 'my-textdomain' ); ?></label>
    <input type="text" id="my_setting_field" name="my_setting_field">

As a final step, we need to make sure we are showing the saved value in the form after getting back to our custom setting page in WordPress.

Let’s add the following code to the my_setting_markup function

value="<?php echo get_option( 'my_setting_field' ); ?>"

And it will be

function my_setting_markup() {
    <label for="my_setting_field"><?php _e( 'My Input', 'my-textdomain' ); ?></label>
    <input type="text" id="my_setting_field" name="my_setting_field" value="<?php echo get_option( 'my_setting_field' ); ?>">

Wrapping it up, we’ll have our plugin:


 * Plugin Name: My custom admin page
 * Description: Adds a custom admin pages with sample styles and scripts.
 * Version: 1.0.0
 * Author: Artbees
 * Author URI:
 * Text Domain: my-custom-admin-page

function my_admin_menu() {
        __( 'Sample page', 'my-textdomain' ),
        __( 'Sample menu', 'my-textdomain' ),
add_action( 'admin_menu', 'my_admin_menu' );

function my_admin_page_contents() {
    <h1> <?php esc_html_e( 'Welcome to my custom admin page.', 'my-plugin-textdomain' ); ?> </h1>
    <form method="POST" action="options.php">
    settings_fields( 'sample-page' );
    do_settings_sections( 'sample-page' );

add_action( 'admin_init', 'my_settings_init' );

function my_settings_init() {

        __( 'Custom settings', 'my-textdomain' ),

		   __( 'My custom setting field', 'my-textdomain' ),

		register_setting( 'sample-page', 'my_setting_field' );

function my_setting_section_callback_function() {
    echo '<p>Intro text for our settings section</p>';

function my_setting_markup() {
    <label for="my-input"><?php _e( 'My Input' ); ?></label>
    <input type="text" id="my_setting_field" name="my_setting_field" value="<?php echo get_option( 'my_setting_field' ); ?>">

Now, we have a custom admin page that includes a custom settings page in WordPress. We can save options in the database and retrieve and use it to implement complex functionalities in our plugins.

In order to get the saved value of the added setting, we can use the get_option function. The following code will return the saved value for setting that we have added in this post:

get_option( 'my_setting_field' );


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

2019 in Review: Happy New Year to the Artbees Community

2019 in Review Featured
2019 in Review Featured

I’m happy that a new year is unfolding – but not because it’s the holiday season or it’s a fresh start. Frankly, I kinda hated 2019. In reviewing 2019, I’d say the past year was quite an overwhelmingly busy year for us at Artbees. But it was amazing to see how our hard work paid off tremendously. When I look back and see what we have achieved as a team, I can’t help but share with you exactly what I am very excited about:

29,000 websites created with Jupiter X in 2019. Mostly built with our pre-made templates

We released Jupiter X almost a year ago. And we immediately started providing pre-made templates (or demos) and reached more than 150 templates in less than 6 months. Now Jupiter X offers more than 250 templates. And these aren’t just any templates. For the first time on the market, we crafted these beautiful pre-made templates with the marketing best practices and customer conversion in mind. And – looking over our numbers in reviewing 2019 – it paid off. Our templates install rate was record-breaking during 2019. It involved a big chunk of the nearly 30,000 websites built by Jupiter in 2019 alone.

Stats 2019 in Review

Jupiter X on the path to perfection in 2019

It is almost impossible to avoid customers who are angry over the bug when releasing a new product. It just happens. You need time and of course a bit of luck to pass through this dangerous stage. We worked tirelessly, stayed up at night, released hundreds of bug fixes and improvements to make sure that Jupiter X is once again reliable like ever before. In the meantime, we also added numerous glamorous features.

  • Introduction of free Jupiter X Lite
  • Custom single and archive page
  • Custom post types
  • Gutenberg compatibility
  • Addition of more free plugins such as Jet Tabs, Jet Tricks, Jet WooBuilder, Jet Engine, and SmartFilters
  • Accessibility improvements
  • Donut plugin to migrate old WPbakery content to Jupiter X
  • German, Spanish and Turkish translations
  • And much, much more.
Templates 2019 in Review

2019 in Review: New products

I – along with two other crazy guys – founded Artbees as a freebie company! Maybe we were too naive back then, but even now that we sell some of our products, we have not forgotten our old dreams. We released two products, and they are both amazing. And yes, they are free too:


WunderWP 2019 in Review

WunderWP is an extremely useful plugin that allows you to save your Elementor widget styles, section or page designs on the Cloud and reuse them on other pages or websites. Moreover, a huge collection of ready-made styles and page designs are at your disposal. And we constantly pump our more beautiful designs. If you create websites using WordPress and Elementor, this is your Lightsaber! Just give it a try and see for yourself. Download it here for free.

audiosome 2019 in review

Most of the music online that has been composed skillfully is for sale. Copyright is also a serious issue – even when you are using music only for your homemade family video. It just sucks. And that is why we started a movement. It is called Audiosome, which is an insane and completely FREE music and audio collection. It is a community where artists and enthusiasts share their great works with others without charging a penny. It is also a place built upon trust and hope. Check this out now.

What is next?

After getting a comprehensive review of 2019 for Artbees, you’re probably wondering what’s next for us. Well, we’re not in the business of spoiling surprises. So I will be silent. But there is one thing we will never give up in the following year. The betterment of Jupiter X. Our focus remains on getting rid of anything that could be somewhat unpleasant with Jupiter X.

We need you

To deliver the best experience of building a WordPress website, we need your feedback. And we need it a lot. I assure you that anything you report whether it is a bug or improvement, is extremely valuable and will be immediately taken care of. Just tell us what annoys you or could be better. Here is how we can stay in touch if you are interested:

Jupiter X Facebook Group
Artbees on Twitter
Artbees on Facebook
Artbees on Instagram
Artbees YouTube Channel

Thank you for your support and wish you a Happy New Year on behalf of the Artbees team 😉


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