Page 17 – Artbees

Everything You Need to Know about WordPress Development Workflow

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.

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.

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.

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 WordPress.org, 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.

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!

How to Restrict WordPress Website Content

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!

restrict wordpress website content website content WordPress Development

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.

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.

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.

Use in Sidebars/Widget Areas

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

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.

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!

Shortcode in WordPress WordPress Development

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">
    <?php
    settings_fields( 'sample-page' );
    do_settings_sections( 'sample-page' );
    submit_button();
    ?>
    </form>
    <?php
}

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.

add_settings_section(
	'sample_page_setting_section',
	__( 'Custom settings', 'my-textdomain' ),
	'my_setting_section_callback_function',
	'sample-page'
);

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() {

    add_settings_section(
        'sample_page_setting_section',
        __( 'Custom settings', 'my-textdomain' ),
        'my_setting_section_callback_function',
        'sample-page'
    );
}

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

The result will be like the following:

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

add_settings_field(
   'my_setting_field',
   __( 'My custom setting field', 'my-textdomain' ),
   'my_setting_markup',
   'sample-page',
   'sample_page_setting_section'
);

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">
    <?php
}

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() {

    add_settings_section(
        'sample_page_setting_section',
        __( 'Custom settings', 'my-textdomain' ),
        'my_setting_section_callback_function',
        'sample-page'
    );

		add_settings_field(
		   'my_setting_field',
		   __( 'My custom setting field', 'my-textdomain' ),
		   'my_setting_markup',
		   'sample-page',
		   'sample_page_setting_section'
		);

		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">
    <?php
}

And the output will be

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() {

    add_settings_section(
        'sample_page_setting_section',
        __( 'Custom settings', 'my-textdomain' ),
        'my_setting_section_callback_function',
        'sample-page'
    );

		add_settings_field(
		   'my_setting_field',
		   __( 'My custom setting field', 'my-textdomain' ),
		   'my_setting_markup',
		   'sample-page',
		   'sample_page_setting_section'
		);

		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">
    <?php
}

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' ); ?>">
    <?php
}

Wrapping it up, we’ll have our plugin:

<?php

/*
 * 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: http://artbees.net
 * Text Domain: my-custom-admin-page
*/

function my_admin_menu() {
    add_menu_page(
        __( 'Sample page', 'my-textdomain' ),
        __( 'Sample menu', 'my-textdomain' ),
        'manage_options',
        'sample-page',
        'my_admin_page_contents',
        'dashicons-schedule',
        3
    );
}
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">
    <?php
    settings_fields( 'sample-page' );
    do_settings_sections( 'sample-page' );
    submit_button();
    ?>
    </form>
    <?php
}


add_action( 'admin_init', 'my_settings_init' );

function my_settings_init() {

    add_settings_section(
        'sample_page_setting_section',
        __( 'Custom settings', 'my-textdomain' ),
        'my_setting_section_callback_function',
        'sample-page'
    );

		add_settings_field(
		   'my_setting_field',
		   __( 'My custom setting field', 'my-textdomain' ),
		   'my_setting_markup',
		   'sample-page',
		   'sample_page_setting_section'
		);

		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' ); ?>">
    <?php
}

Here is the result of our custom WordPress development. 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' );

custom settings page in WordPress WordPress Development

2019 in Review: Happy New Year to the Artbees Community

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.

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.

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

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

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 😉

2019 in review Artbees jupiter x

How to Create Custom Filters with Jupiter X

Hotels, car dealers, travel agencies, tools and hardware sellers – and almost all other business owners that sell some products or services – need a way to show their products to the buyers. If you own a business, you usually represent your products and ask your clients some questions to provide them with the best matches possible.

However, when it comes to websites, your clients need a way to find their own match by looking at products and services on a list. And the best you can do is provide some filters for your product list. Since time is gold, the faster the viewers can find what they’re looking for, the better chance you have in selling a product or service. The good news is that the listing feature along with the smart filters are now part of the Jupiter X theme with the help of its bundled plugins. In this blog post, we’ll take a deep dive to fully grasp how to create custom filters with Jupiter X. But, before we do that, let’s first see what we can do without a listing feature!

Using WordPress to display your product list

The simplest way to show a product list is to create multiple pages, link them to each other and use the WordPress search feature to provide a search feature for them. This doesn’t require any special plugins or extra coding – and it can actually be helpful in some cases. But if you own a shoe store, you wouldn’t want to feature your shoe list like this, right?

Create Custom Filters with Jupiter X 1 — Simple product listing, the WordPress way

There are dozens of workarounds to create a better and more appealing listing. One of the popular ways is to use WooCommerce and its filter widgets.

Using WooCommerce to represent a list of your products

One way to create custom filters in Jupiter X is simply through installing WooCommerce and add products. It will allow you to have a shop page, archive page, category page and single pages where you can provide details about your product. Also, since it has a basket feature, it’s a perfect choice to feature the products you’re planning to sell. Many more plugins have been developed for WooCommerce to help you build a better list of your products. Simply using a WooCommerce and categorizing them with the minimum configuration with Jupiter X theme will give you results like the following:

Create Custom Filters with Jupiter X 2 — A default shop page made by WooCommerce and Jupiter X

Much better than before, wouldn’t you agree? On the left sidebar, you can select different categories and actually filter the shopping products based on the category. Now if you want to add a new filter widget, for example, by price, you can easily add it through WordPress -> Appearance -> Widgets by drag and drop the “Filter Products by Price” to the sidebar that you are using on the products page.

Create Custom Filters with Jupiter X 3 — Adding the filter products by price to the sidebar

And it would look like the following:

Create Custom Filters with Jupiter X 4 — Filter by price added to the shop page

There’s no need to say that it’s easy to customize the shop page and layouts using the Jupiter X Shop Customizer.

As mentioned before, there are dozens of plugins out there that can help you have a better listing on your website. Also, there is a bundled plugin named Jet Woo Builder that can help you build stunning shop pages completely from scratch. A brief overview of Jet Woo Builder features has already been provided in the previous blog posts here and here.

Using JetEngine to showcase your products

The exciting part of creating custom filters with Jupiter X starts here. The better you design the user experience, the better chance you have to sell your products or services. Imagine that you have to provide a listing directory of your products but you don’t want to create an e-commerce website. As an example, you want to run a hotel website where it should have a list of available rooms categorized by the number of beds, price, amenities and etc – and you would also need to provide a way to filter them. In these scenarios, the best thing to do is to create a custom post type, add your custom fields to it and provide listing directories and custom templates for your post types. Fortunately, this is all available with the Jupiter X theme.

As for the custom post type and listing directory, there is a Crash Course series on the Artbees blog which shows how you can build a listing website step-by-step. You can find the published posts here and here. If I want to briefly explain the process of creating a listing directory using the Jet Engine plugin, it would be these four steps:

Create a custom Post Type and custom meta fields for it.
Create a Custom Post Type template for the single pages and assign it using Jupiter X.
Create a Custom Listing template and based on that, create and assign it to archive post type templates using Jupiter X.
Add Filters to the archive pages of your listing directory.

Let me introduce the Jet Smart Filters plugin for the last step. This is one of the bundled plugins with Jupiter X and aims to help you create and use smart filters on your listings. This is not only on the custom post types created by Jet Engine, but it can be used on WooCommerce and your regular posts.

You can install it for free from Jupiter X -> Control Panel -> Plugins and then activate it.

Create Custom Filters with Jupiter X 5 — Activating the Jet SmartFilters plugin

I assume you’ve already created your listing items as previously instructed in the blog posts here and here. Now it’s time to create a new Smart Filter by navigating to Smart Filters and Add New.

Create Custom Filters with Jupiter X 6 — Adding a new Smart Filter

We’ll use this to filter the hotels based on the desired price range. So, we call it “Price Range” and set a minimum and maximum value to it.

Setting the minimum, maximum and other configurations for our price range filter.

Now, it’s time to use our filter on a listing page. On the page where you have added your Listing Grid element, drag a Range Filter into the column you want to show it.

Adding the Range Filter to the listing page

Then configure it to use the Price Range filter you created and assign it to the Jet Engine and set the Listing Grid Query ID.

Configuring the Smart Filter on the Listing Page.

Then update and publish the page. The final result would look like this:

Now you can filter the hotels by their price on your listing page. As shown in the picture, you can create a different filter for the facilities. It’s actually part of the Hotel Listing template in Jupiter X. There are plenty of use cases you can make using these smart filters. Fortunately, Jupiter X provides a set of premade templates made for the purposes of listing. You can find them here and simply install them on your websites.

Create Custom Filters with Jupiter X Templates — Variety of Jupiter X Listing templates

We’d also recommend that you take a look at the Jet Smart Filters documentation here if you are looking for more resources. Feel free to ask your questions below in the comments.

Wrapping up How to Create Custom Filters with Jupiter X

We need filters to provide a way to ease make it easier for our website visitors to find the best match of what they are looking for. Although there are dozens of ways to do it, we reviewed the following three methods we can use:

Simple WordPress pages and search option
Using WooCommerce and its filtering widgets
Using Jet Smart Filters to create and use advanced filtering options

Each method has its own use cases. So, it’s better that you are first familiar with them and then put them into action based on your requirements.

create custom filters with Jupiter X custom filters Smart Filters

December Crash Course – Freelancer’s Guide on How to Build a Dynamic Hotel Website with Jupiter X – Part 2 (Archive Listing)

Ok, the big bald rich man is waiting for me to deliver the website for his chain of hotels in one week – and there’s not much time left. In the first part of this series, we dove into creating a dynamic room listing with room attributes and a nice template that will include those custom attributes, both of which will be filled out by the receptionist. Picking up from where we left off, we’ll create a listing for an archive page in this part as part of building a dynamic hotel website.

As you’ll recall, we created a custom post type for our room called Rooms and then created a listing for it. A listing is an embodiment of the meta fields in a custom post type with a particular design. In the first part, we built the custom post for our rooms and a listing and beautiful design for a single page. The only thing is that the single page is not discoverable by visitors if it’s not inside a post feed. Someone should play with filters on your listing page and find the item they want, click on it and enter the single page for that item.

In order to understand and follow the instructions in this article, make sure to read the first part.

Before proceeding with the tutorial on how to build a dynamic hotel website, don’t forget to check if the following plugins are activated and have the minimum versions below:

JetEngine plugin v2.1.4
Jet Elements v2.1.2
Elementor v2.7.5
Raven v1.8
JetSmartFilters v1.5

As you noticed, in addition to what we used in the first part, we need the JetSmartFilters plugin in this part to create the filters we require for our archive listing.

In this tutorial, we’ll cover the following:

Creating a listing template for our custom post type
Creating filters for our listing
Creating a general listing template

1- Create a listing template for our custom post type

So first things first when it comes to building a dynamic hotel website. Just like the listing we built for the single page of our custom post type, we need to create a listing for the listing archive.

In the WordPress dashboard, go to:

JetEngine > Listings > Add New

In the upcoming dialogue, set Listing Source to Posts, Post Type to Rooms and give it a Name such as “rooms-archive” and proceed. You’ll be taken to the Elementor environment to create a design template for the new listing.

Clicking on the button will create a new listing for your custom post type. In the next step, you’ll be taken to the Elementor environment so you can create a design template for the Rooms archive page.

Add a box section with 374px width and add 15px bottom padding (0,0,15,0).

Right-click on the column. From Styles set the background color as white (#fff) and from Advanced tab set the bottom padding for the column as 25px (0,0,25,0)

Add an Image element inside the section (JX image element), set the image source as Dynamic/Custom Image and give it a custom size of 374 x 220 px

Set a dynamic Image source and choose Field as Post Thumbnail.

Add a Dynamic Field setting the Source to Post and the Object Field to Title.

Centralize it and format it as you like. I’ll go with 20px Muli Bold #1d3239.

Give some space to its top and bottom using 15, 0, 15, 0 padding from the Advanced tab

Add a Dynamic Field, set the Source to Meta Data and the Meta Field to Beds.

Centralize it and format it as you like. I’ll go with 16px Muli #636f74.

Add a Dynamic Field, set the Source to Meta Data and the Meta Field to Price.

In order to automatically add the $ sign before the price, in the Dynamic Field settings add $%s to the Field Format.

Style it as you want. I’ll put 20px Muli Bold #006b93.

Add a 20px Bottom Padding to the price.

Add a Dynamic Link element. Set the Source as Permalink. Label it as Book Now and centralize it.

Format it as 14px Muli #fff and weight 600.

In Normal state, set a #ff5374 colored background for it with #fff as text color. In Hover state, reverse color by giving #ff5374 as text color and #fff to background color.

You should define a solid 1px border colored #ff5374, 3px border-radius in all corners and 7, 15,7 ,15 paddings.

In the WordPress dashboard, go to:

Templates > Saved templates > Add New

Select Archive as template type and give it a name (Room Archive)

Add a Listing Grid element to your page. Set the rooms-archive as Listing Source and activate Use as Archive Template option.

In the WordPress dashboard, go to Jupiter X > Customize > Post Types > Rooms > Rooms Archive and select the page you just saved and then publish the changes.

Ok, what’s next? We just designed how a room custom post type will appear in the listing. Now we need to put this inside a general template for the listing – but before that, let’s create the filters we need for the listing sidebar.

2- Create filters for our listing

Let’s say we need a price range filter and some checkbox filters for our room facilities. With JetSmartFilters v1.5 installed:

In the WordPress dashboard, go to SmartFilters > Add New

We’ll give our filter a label and active filter label

Set the filter type as Range

Set Value Prefix as $

Set the Minimum and Maximum Value as you wish (the price range of your rooms)

Set a Step number. This is the amount added to the selected range everytime the visitor moves the indicator one step. For example, if set to 5, everytime you move the indicator to the right or left, an amount of 5 will be added or deducted to the range.

And finally give the filter a Query Variable. This query variable will help us connect the filter to its results in the other hand of the listing page.

Using the same process, we should create checkbox filters for our room facilities. The only part that will be different is:

Set the Filter Type as checkbox list and Data Source as manual input.

Activate the Is Checkbox Meta Field (Jet Engine) to filter data from checkbox meta fields type, created with JetEngine plugin.

In the Options List Box, add checkbox options for the filter. Each option should have a value and label.

Important: The value for a checkbox option should match with the checkbox value of the custom meta field it relates to. The query variable value should match with the Name/ID of the custom meta field it relates to.

3- Create a general listing template

With the filters created and the template designed for the individual listing, we can design a general template for the listing on our website where users can use the filters in the sidebar to define the room criteria they want and see the results on the other side.

In the WordPress dashboard, go to Pages > Add New

From the lower-left corner, click on Elementor settings (gear) icon and select Elementor Full Width as Page Layout.

Give the main section should have 55, 0, 90, 0 px paddings from the Advanced tab.

We need a 30%-70% column pair. The 30% column in the right will contain the filters and the 70% column on the left will carry the filter results.

Apply 0px Widget Space to the left column.

From the Style tab, add a white background color to the column.

From the Border section, add a 6px radius to all corners of the column.

From the Advanced tab, add margins 5, 0, 580, 25 px and paddings 30, 32, 30, 32 px

For the right column, from the Advanced tab, add 0, 0, 0, 25px paddings to it.

Add a JX Heading element to the left column and edit it to Filter Listing.

Format the heading as you like. We’ll input Muli Bold 24px colored with #006b93.

From the Advanced tab, give it a 35px bottom-padding to it.

Add another Heading element and edit it for the price and format as you like. We’ll go with Muli 20 Bold colored #1D3239.

Give the second heading a 25px bottom-padding

Add a Range Filter element to the left column.

Select Price Range as Filter and set JetEngine for This Filter For

Apply On should be set on Click on apply button.

Query ID should be set to Rooms.

On the Styling tab, set the color to #EBF7F7 and Border Radius to 2 in all corners.

Set the background color as Range Point. We’ll go with #006B93 and a Border Radius of 3px to all corners.

In the Value section, format the text for value. We’ll go ahead and put Muli 16 #1D3239 with the top top-padding of 25px.

From the Advanced tab, give the range filter a 20px bottom-padding.

What’s left in this section of filters is a Filter Results button. Drag an Apply Button element below the price indicator.

Set its query ID as Rooms and style it as you like.

In the Style tab, for the Normal state button, we’ll go with a Mul 14px weight 600 with #fff as the color and #006b93 as the background color, a solid border of 1px with #006b93 color, a border-radius of 3px and a padding of 11, 25, 11, 25 px. For its Hover state, we’ll swap the color and background colors.

Finally, in the Advanced tab, give the button a 30px bottom-padding.

This should be what you have built so far:

Ok, let’s move onto the next section of filter options: Facilities.

Drag the Checkbox Filters element below the Filter button.

Select the filters as needed.

This filter for should be set as JetEngine. Apply Type is Ajax. Apply On is Click on Apply Button.

Query ID should be set to hotels.

In the Style tab, set 10 for both Space Between and Children Offset.

Set the Checkbox size to 20px. Set the background color to any color such as #EBF7F7. Set #006B93 for its Hover background color. Give it a Solid border with 3px border-radius for all corners.

Set a #EBF7F7 background color for the Checkbox icon and set its size to 10.

Set #636F74 as background color for the Checkbox label.

Now let’s add an apply button to the checkboxes as well. Just duplicate the button we created above for price range and drag it down below the checkboxes.

Ok, what we’re going to do for the right column is to simply put a Listing Grid element.

Set Listing to Rooms-archive and the Column Number to 2.

In the Advanced tab, set the CSS ID to rooms. This will connect our listing grid to the filters on the left side.

And that’s it. We just created the listing page that holds the listing filters and the results. Give it a try and see how the filters set on the left side will result in the items on the right hand.

Dynamic Hotel Website Final Listing Page

In the following episodes of this Crash Course, we’ll cover how to add a price calculator and booking module to the lower right corner of this template – as well as everything else remaining before we can deliver the hotel website to the Wolf of Wall Street!

Do make sure to watch the tutorial video alongside this post to better understand the process and ask any questions below in the comment section. Keep an eye out for the upcoming episode on how to build a dynamic hotel website.

Archive Listing Build a Dynamic Hotel Website

Bon Appetite! Key Elements for Your Next Restaurant Website

Let’s say you’re running a pretty popular restaurant with delicious food and special recipes in town and you start thinking about moving things online to showcase your mouthwatering food, entice more hungry customers and even open up new branches all over the city. Smart move! But building a website for your restaurant is no easy feat unless you know the key elements for your restaurant website to make it both attractive and user-friendly at the same time.

In this article, by looking at 5 Jupiter X restaurant templates, we’re going to take you through the key elements that will help you build a mouthwatering restaurant website that’ll help you build a strong web presence and make your site visitors drool!

Images Layout

Go visual! You’ll hear this from just about every graphic designer you hire to design your website. And, yes, get ready to read about it once in a while in this post too! Images have a magical effect on promoting your restaurant. You don’t open a restaurant website to read the About page or to imagine what the food looks like from the menu, right?! A bunch of high quality and tempting images of the food hits visitors in the stomach every time! So folks, let’s admit that they’re essential elements for your restaurant website, and Images Layout is probably the best element to help you out showcasing them.

Images Layout lets you showcase as many images you want in up to 6 columns, choose between 4 different layout types (Masonry, Grid, Justify and List), add titles and description as well as different background overlay and lure visitors with appetizing pictures of your gourmet dishes!

You can find a beautiful live example of this element in the Jupiter X Danae template.

Elements for your restaurant website Images Layout Element — Images Layout Element

Posts Element

If you have a blog you are regularly updating to offer tasty recipes, writing about healthy diet trends or simply sharing the latest news with your restaurant, you might want to organize and show them on different pages of your website. And this is all possible with the Posts element. There are many features to play with and customize to your taste, skin type, layout and categories to name a few. And as mentioned before, you can set the source to be a blog or portfolio.

Or you can simply drag and drop the Posts element and start building it from scratch without linking it to the blog or portfolio. If you need to read more about its features and how to work with it, please head over here.

Here’s a nice example of the Posts element in action from the Jupiter X Restaurant template:

Elements for your restaurant website Posts Element 1 — Posts Element

Form Builder

Add as many delicious food pictures as you want and catch the attention of visitors to your stunning food art, but at one point you’ll need to turn those visitors into paying customers and increase the restaurant’s footfall. A functional and easy to use reservation form will do the job! Now that visitors are even more hungry by browsing through tempting food pictures, they should be directed toward booking a table.

Forms can be used either for reservations or as a means of online ordering if you happen to have that option. You can create a simple form in seconds with the Form Builder element. Just drag and drop the Form element to your page, edit the placeholders, add an action email to collect the information and that’s it! You now can receive orders and 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 Restaurant template serves as a good example.

Slider

A slideshow is always a great way to feature menu specials and give customers a sense of what’s in store for them. Imagine opening the homepage to a full page header slideshow of your delightful hamburgers! Just like this delectable slide reel in the Jupiter X Burger Restaurant template:

Slider Element

Adding slideshows is pretty easy in Jupiter X. All the steps you need to go through are explained in detail in this video. After watching the video in full, creating a stunning slideshow will only take seconds.

Testimonials

How many times have you booked a hotel room over another only because of a couple more positive reviews and ratings? How many times have you chosen a product online just by checking its stars and positive comments? Nearly always, right? The same thing goes with restaurants too! Testimonials are like social proof that will help potential customers choose you.

Using the Testimonials element, you can add an uncluttered and beautiful set of customer testimonials, customize its text, style and positioning, play with its animation settings and let the uniqueness of your restaurant stand out through the words of your satisfied customers. The Jupiter X Burger Restaurant template features a nice example of this element in action:

Price List

Restaurants and online businesses that are offering a product should have a functional price handling system for customers’ convenience. Using the Price List element, you can create your special menu and feature your dishes in an organized way. You can visually customize every detail of the list like the heading, image, price and even make items clickable by adding links.

The Jupiter X Italian Restaurant template features a beautiful sample of the Price List for its menu:

Elements for your next restaurant menu — Menu – Price List

Animated Box

We’ve emphasized the importance of images for a restaurant website enough, so no need to repeat ourselves! But there is always room for more fun! Using the practical Animated Box element, you can put your images inside a box with different animation effects; write some important content on the backside of the box; customize the layout, color, style; add icons and links and choose among many cute animation effects. That’s fun, right? Mark our words – adding a bit of taste to your image-dominant page guarantees customer satisfaction! Here’s a sample of the Animated Box element from the Jupiter X Restaurant template:

Counter

Another dynamic element for your restaurant website that will help you boost your restaurant’s reputation, increase the trust of the existing customers and create potential new visitors, is the Counter element. Just drag and drop the element to your page and brag about the number of satisfied customers, branches around the city, dishes served, any health certifications awarded, as well as any other interesting numbers while playing with its eye-catching styles and animations. Your achievements are definitely worth a mention!

Here is an example of the Counter in action from the Jupiter X Europa template:

Tabs Element

If you own a big restaurant that offers all kinds of food, from seafood to Mexican and from appetizers to desserts or from alcoholic to soft drinks, you might want to organize them into tabs to avoid your site visitors a headache! The Tabs element will help you make it happen in the neatest way possible. You can put each type of food in one tab, set a vertical or horizontal look on it, add icons next to titles, use images and customize every detail about tabs items such as background color, title, description and many more as you please.

Check out how it looks live in the Jupiter X Steakhouse template:

Elements for your restaurant website Tabs Element — Tabs element

Wrapping up elements for your restaurant website

In this post, we highlighted some essential elements for a stunning restaurant website in the hopes that it’ll encourage you to get started with your unique and tasty restaurant website. So now that you have the ingredients you shouldn’t be waiting any longer, hungry customers are waiting outside!

Let us know in the comments about your experience creating your restaurant website or if you have already created yours, drop us the website URL for as inspiration for your fellow restaurant owners.

elements for your restaurant website jupiter x features restaurant website

Bring it on! Insider Tips for Your Next Sports Website

Featured Tips For your Next Sports Website

Let’s start with a simple clue that sums up this and all other similar topics: the best website design is one that allows the audience to predict what the site is about without seeing the textual content. Imagine entering a law firm website – you’ll immediately be able to guess it has something to do with the law. Or you land on a traveling agency website, and you can automatically tell it’s about traveling and tourism.

All comprising elements of a website – and not just its imagery – play a role in carrying on this mission. The main layout, composition, colors, typography and the elements are a part of it. The very same thing is true about a sports website. In this post, we’ll provide some valuable tips for your sports website you can easily use to build something that speaks for itself – without relying too much on its textual content. We’ll use vast a range of Jupiter X templates as examples for gym, powerlifting, yoga, meditation, pilates, and sports event websites.

Layout and composition is a cornerstone

First things first! The layout and composition are the primary factors in the design and the foundation for everything built upon it. Without a solid and clearly thought-out layout and composition, your content will always seem like it lacks something.

Vast sections with bold imagery

A powerlifting center, a gym or an off-road club can enjoy a layout built by vast sections with bold typography and large imagery. If you or your client can afford professional photography from the venue (or at least a Shutterstock subscription!), this layout will help your website shape an image of power and athleticism without much textual content. Jupiter X Caelus and Carius are good examples of sports website templates built in this way.

Vast Sections Tips for your Next Sports Website

Diagonal sections

In graphic design theory, ordinal lines imply movement, dynamism, and livelihood. Using this feature in a website layout will add a level of visual dynamism and excitement for your audience as they scroll and explore your page. It’ll drive them efficiently towards engaging with your call to action. The Jupiter X Hercle template, which is specially designed for off-road clubs and professionals, has expertly used this technique in its layout.

And the Hermippe template is an excellent example of utilizing this technique for a gym website.

Diagonal Sections 2 Tips for your Next Sports Website

Colors are energizers!

Color is like the air your page requires to breathe. One excellent tip for your sports website: a color-aware design will appeal to your visitors and make professionals such as designers say “wow, this company hired the right designer for their agency.” Think of what design will signify your or your client’s brand values. If it’s a gym or dojo, your brand will definitely need sharp and preferably warm colors to carry its meaning.

The Jupiter X Hebe template uses a mixed approach for its accent color. It uses an accent color that is somewhere between green and blue. Green signifies nature, calmness and a golf course, and blue signifies stability, depth and horizon. That’s about all the meaning a golf club needs to convey.

Color Golf Tips for your Next Sports Website

If your brand wants to promote peace, composure and balance like a meditation or yoga house needs, use calming colors such as green with friendly tones and lower saturation. Have a look at the Feretrius template to see a live example of calming colors in action, which illustrates to the audience a glimpse of peace and calm they can achieve doing yoga or meditation.

Color Yoga Tips for your Next Sports Website

Show visitors their future selves in the photos

Imagine you’re looking for the nearest gym with the facilities and conditions you want. You’ll find some viable places through using Google, Foursquare or Yelp, but you’ll definitely want to check their website before calling and booking an appointment to visit and possibly subscribe. And hey, while you’re at it, you definitely don’t want to read blog posts or even a couple of paragraphs about the history, philosophy and achievements of the club you are considering. What you will do is just skim the homepage or landing page.

This is typically the audience for a sports club website; they mostly are in a rush and don’t have much time to spend on a landing page. So you won’t have much time to appeal to and persuade this type of visitor. This means you should use your page assets accordingly and efficiently.

The first thing to consider is imagery. Your visitors will rely a lot on what they can get through quickly scanning your page, and images are definitely a good way to capture those scanning eyes. Good imagery for a sports website requires professional photography or some great collection of stock photos related to your area of specialty. If you rely on stock images for your sports website do make sure they are:

High quality: Captured by professional photographers
Well-light: Not too bright or too dark
Matching in color: They align well with your design color palette, especially with your accent color

Also, it would be good if you can show consistency in the stock photos you use, for example, with the same model posing in the photos. The Jupiter X Devagura template uses stock photos in the template, but they are used seamlessly in the hero section of all pages in accordance with the page content and design characteristics.

Write to motivate – not communicate

Following the same mindset we discussed in the last section about the visitor’s short attention span and importance of the right imagery, I want to emphasize the same thing about the role of writing in your sports website. Another tip for your sports website is that writing is more of a marketing tool than a means of communication. The copy for your sports website should work hand-in-hand with all other elements discussed in this post to drive the audience forward, motivate them to hit the gym and to work those muscles. So imagine the type of writing we need here:

Writing Tips for your Next Sports Website

If you can easily understand that you should not begin your website with a big ‘Welcome to our official gym website’ in the hero section, then you can say you’re qualified to write your website copy yourself – and you’re good to go! But if not, you really need to consider hiring a copywriter to write your website copy that aligns with your and your brand’s specific values.

Use an athletic typography

What you say is not enough – how you say it also matters. Remember you’ll need good typography that matches the message you want it to carry. Consider Oswald, Anton and Source Sans Pro as great sports fonts that can be used in a gym or powerlifting club website. They are also standard Google Fonts that are available to use for free.

Typography Club Tips for your Next Sports Website

If it’s for a meditation, pilates or yoga website, then you might want to think of a more sleek font with less emphasis on power, movement and challenge and more on calmness, elegance, and peace.

Showcase – don’t just tell – your athletic story

Any business or personal brand has a history. But a sports brand also has a story. You came a long way striving, struggling and failing before you achieved where you currently are. If you think it can inspire your website visitors and motivate them to start working out under your guidance and expertise, you’ll need to showcase your story and achievements like an athlete, not like a resume.

The Jupiter X Vinalia template beautifully showcases a challenging athletic history with a timeline. Each year gets a title, image, and description with a color identity. Once you start tripping down memory lane, you can’t help but scroll. You can expect your visitors are twice as more confident in taking their first course with you after scrolling through this page.

Tell visitors why you are the best to train them

Without too much marketing pressure, you should convey to your visitors who you are. You don’t have to do this the second they arrive on your website, but it should be somewhere on the first page of your website. Employ honest but confident language and explain your skills, exclusive points and why you think you are the best person to train your website visitor.

Team Members Tips for your Next Sports Website

The Jupiter X Pilates Studio template is a nice and informative pilates studio website template that uses trainers’ profiles with the Jupiter X Team Members element.

Make it personal and share your clients’ feedback

People will trust your sales pitch a lot more if you can manage to show that your clients are happy with your product or service, which is another great tip for your sports website. If you have satisfied clients, reach out to them and ask them to provide a testimonial about you and your service. If they hesitate, reward them with a free session in return. It’s definitely worth it!

If you want to design a website for a gym or studio, then make your website content as ‘humane’ as possible by including info about your instructors, quotes from them as well as testimonials from your customers. See how Pilates Studio uses the Jupiter X Testimonial element to beautifully organize customer reviews and feedback.

Animate it, make it fun

Movement is one ruling factor that all kinds of sports have in common (well, chess is an exception, I guess!). So how can we design anything related to sports that are not promoting or signifying movement? You can animate some parts of your sports website to add a sense of movement to it. Some elements such as sliders are naturally moving elements, but you can also manually move some elements such as sports figures and models.

The Feretrius and Vinalia templates from Jupiter X WP have used this idea to add a sleek sense of dynamism to their design. The parallax effect is another technique that spices up your layout by adding depth and movement. Using the parallax effect together with the manual viewport animation of elements is commonly used in tons of websites these days.

Add some hype to your sports event with a countdown

It’s a good idea to use landing pages instead of multi-page websites for sports events as people who come to these websites want to quickly see the essential info such as dates, conditions, and prices then sign up and leave. You can define 5 essential sections that cover all the info your participant wants to know. For example for an extreme mountain biking race, you need the following 5 sections:

1- Intro: Nice hero section
2- Countdown to your event
3- Some background info about the event and its experience
4- The roadmap
5- Outro: schedule + call to action

Using a countdown element in the hero section or the first parts of the landing page will add some hype to your event and encourage visitors to proceed with the rest of the page so they can sign up to participate before the time runs out. You can also show the number of remaining seats or slots to amplify the visitor’s sense of urgency. The Jupiter X Mountain Biking template is an excellent example of a website for a sporting event.

Possible call to action? Call, sign up, book, smash!

So thanks to following all the above practices and guidelines, your visitors have made it taking an action. Without a good call to action section or element, your best bet is that they’ll find your address or contact info from Google and proceed – but it’s also very likely that they’ll vanish to your competitor’s website where they can find all the info they need in one page.

There are different kinds of calls to action you can use for a sports website such as calling or booking an appointment. Alternatively, you can put your contact info and a contact box on your landing page or contact page for any possible inquiries. This is what is beautifully done in many sports templates from Jupiter X WP, including Farreus, Feretrius, and Hermippe.

Is that all?

Definitely no! Nobody can say the above list of elements and factors makes a working sports website. There are many ifs and if-nots involved in a website’s success. But you can definitely say these tips for your next sports website will help it engage and convert visitors more efficiently.

Do not forget to check the Jupiter X WP list of sports website templates if you want to kickstart your project with some solid design foundation provided by Artbees experts. And as always said, let us know in the comments if there is a factor or element you think is missing and should be included in this list or share your experience applying these practices to a sports website for you or a client.

jupiter x templates sports website tipos for your next sports website

How to Create a Deals Website with Jupiter X

Saving money is essential in today’s world. There are several cost-cutting measures out there like replacing normal light bulbs with LEDs, installing a programmable thermostat, getting rid of unused memberships, and so forth. But that only helps save a couple of bucks here and there. One of the best money savers you can offer customers is a deal or discount. This article explores how you can easily build a deals website with Jupiter X.

What is a deals website?

As the name suggests, a deal or discount website is a place where visitors can purchase some products or services for a discount or a much cheaper price. Also, a deals website can provide their visitors with coupons so they can use to buy products or services cheaper from an online store like Amazon and eBay. There are several deals websites on the internet such as Dealnews, Woot, Offers and more.

WordPress has several plugins in WordPress to conveniently build deals websites such as:

In this article, we cover the Affiliate Coupons plugin to create a simple deals website with Jupiter X.

Affiliate Coupons

Description

Affiliate Coupons is a coupon plugin that allows us to add coupons and deals to our post and page with simple shortcodes. Also, we can show coupons in the sidebar or widget area with a widget.

The coupon shortcode comes with the click to copy the coupon functionality, which means that the coupon code is copied to the clipboard when the user clicks on the coupon.

With the Affiliate Coupons plugin, we can further define categories, types, and vendors and then assign our coupon to them.

Features

Create vendors and predefine affiliate links.
Create coupons and link them to vendors.
Display coupons via a shortcode on the frontend.
Multiple options in order to filter/sort your coupon presentations.
The configuration page for more options and customizations.
Prepared templates: Standard, Grid & List.
Widgets for displaying coupons in your sidebar

Useful shortcodes

Single Coupon Shortcode – Can be used to show any single coupon.
- Example: [affcoups id=”123″]
Multiple Coupon Shortcode – Can be used to show multiple coupons at once.
- Example: [affcoups id=”123,456,789″]
All Coupons Shortcode – Can be used to show all coupons.
- Example: [affcoups] or [affcoups max=”10″]
Coupon Category Shortcode – Can be used to show coupons from a specific category.
- Example: [affcoups category=”123″] or [affcoups category=”group-xyz”]
Coupon Vendor Shortcode – Can be used to show coupons from a specific vendor.
- Example: [affcoups vendor=”123″]
Coupon Types Shortcode – Can be used to show all coupons from a specific type.
- Example: [affcoups type=”123″] or [affcoups type=”type-xyz”]
Show/Hide Expired Coupons – Can be used to show/hide expired coupons.
- Example: [affcoups hideesc_html_expired=”true”] vs [affcoups hide_expired=”false”]
Sorting Coupon – Can be used to sort coupons (acs/desc) or order by (name, date, random, title, description, discount, valid_from, valid_to).
- Example: [affcoups order=”asc”] or [affcoups orderby=”title”]
Coupon Template Shortcode – Can be used to show coupons in standard, grid, list, and widget.
- Example: [affcoups template=”standard”] or [affcoups grid=”3″]

Creating a deals website with Jupiter X using the Affiliate Coupons plugin

At the end of this article, we’ll create a simple website like below.

Deals Website with Jupiter X Demo Website

Note: The scope of this article is about creating a simple Deals website with Jupiter X, Elementor and the Affiliate Coupons plugin so we won’t be able to explain every single detail in depth. If you need more in-depth resources about Jupiter X, you should read the following articles containing its explanatory video.

Our site consists of the header, content, and footer as the main parts. Let’s start by creating the content.

Creating the Content

For creating the content part of the site, we should first install and activate the Affiliate Coupons plugin. We will be able to create the required pages, coupons, vendors and categories with this plugin.

Creating the vendors

Vendors are the shops, websites, and providers that we will provide coupons for on the site. Following the steps below to create vendors.

1. Go to Affiliate Coupons > Vendors.

2. Click on the Add Vendor button.

3. On the new screen, set the Title and Url, then click on the Publish button.

After clicking on the Publish button, the plugin generates a shortcode for us, which we can use in a related page later on.

Repeat the aforementioned steps to create as many as vendors you need.

Create Categories

1. Go to Affiliate Coupons > Categories.

2. In the new screen, set the Name or other optional settings, and then click on the Add New Category button.

Deals Website with Jupiter X Add New Category

After adding the category, a shortcode will be generated for this category.

Repeat the previous steps to create as many as vendors you need.

Creating the Coupons

A coupon is a ticket or document can be used to get a discount when purchasing a product. Let’s add some coupons for your users by following the steps below.

1. Go to Affiliate Coupons > Add Coupon.

2. In the new screen, set the essential settings like below.

Deals Website with Jupiter X Essential Settings

Now, you’ll be able to see a coupon like below.

Deals Website with Jupiter X Coupon Demo

Note: Go to Affiliate Coupons > Settings > General Tab, and set the Button Background Color to #dd2476.

Deals Website with Jupiter X Select Color

Create the Pages

We at least need the following pages to run a proper site.

Home page: The frontend page.
All deals page: Shows all coupons from all categories and vendors.
Categories pages: Unique page for each category.
Vendors pages: Unique page for each vendor.

Create Category Pages

Create a new page, set a title and add a Shortcode widget to the page. Add a category shortcode like [affcoups category=”15″] to it.

Repeat the previous step to create as many as category pages as you need.

Create Vendor Pages

Create a new page, set a title and add a Shortcode widget to the page. Add a vendor shortcode like [affcoups vendor=”74″] in it.

Repeat the aforementioned step to create as many vendor pages as you need.

Create an All Deals Page

Create a new page and add [affcoups] shortcode in it.

Create a Home Page

Create a new page with the Full-Width template then edit it with Elementor.

1. Add a section with five columns as shown below.

2. Set the background color of the section to #f7f7f7.

3. Add an image widget to each column, then set proper images and set a proper link for each image.

4. Add a new section with one column to page then add the Shortcode widget with [affcoups grid=”3″] value to it.

In the end, we should have a page as shown below.

Creating the Header Part

In order to build the header, we can use Jupiter X’s awesome custom header feature in Customizer.

Note: Before creating the header, we need to set our site’s logo from Customizer > Site Identity > Logo.

1. Go to Customizer > Header, select Custom type then click on the New button.

2. Add a section to the page, then add Logo, Flex Spacer, Search Form and two Buttons widgets one by one to the section. Modify the settings to get the look that you want. Consider that all the widgets (except Flex Spacer) have an Inline position that you can set in Advanced > Custom Positioning for each widget.

3. Add another section to the page and set the background color (#f7f7f7). This section displays categories.

4. Add the Icon List widget to the section. Add the necessary items, and set the Text and Link of related pages.

In the end, we’ll have a header as shown below.

Creating the Footer Part

Similar to the Header, we use the Custom Footer feature of Jupiter X.

1. Go to Customizer > Footer, select Custom type then click on the New button.

2. In the Elementor editor, click on the Add Template button.

3. From Block > Jupiter X Footer Category, insert the following footer.

4. Edit the Logo widget and set it to Primary.

5. Replace the top text with “Get free coupons and promo codes from the shops your love in your email“.

6. Replace Phone, Email and Location widgets by a Form widget with only an email field. Set the button color to #dd2476 and some other styling.

That’s a Wrap!

In this article, we defined what a deal site is and then introduced you to some useful plugins that help in creating a simple deal site. More specifically, we used the Affiliate Coupons plugin and its shortcodes to build the site.

Finally, we showed you how to easily create a simple deals website with Jupiter X. Feel free to share your thoughts and experiences in the comment section below!

affiliate coupons deals website with Jupiter X discount website