Page 18 – Artbees

Build a Powerful WooCommerce Website using JetWooBuilder and Jupiter X

There are dozens of platforms out there to help you build your eCommerce store. If you’re looking for a free and powerful tool, WooCommerce is the most popular one among the shop builders using WordPress. WooCommerce offers some common shopping processes and features including product overviews, add to cart, checkout, shipping and payment and taxes, among others.

However, when it comes to customizing your pages and user experience, you would need to either develop it using a child theme/plugin or through another tool that allows you to customize your shop pages as desired. But wait – there are still ways to build and tailor your WooCommerce store without a single line of code. Read the article in its entirety to learn exactly how to build an eCommerce store in Jupiter X.

The Jupiter X theme offers a great Shop Customizer tool by default. It allows you to customize every part of the default shop pages or choose between the predefined shop page templates. But what if you want to create your own design and layout and use it to build an eCommerce store in Jupiter X? Fortunately, this is possible with the JetWooBuilder plugin which is bundled in with the Jupiter X theme.

What does the JetWooBuilder offer?

Simply put, the JetWooBuilder allows you to override the default shop pages in WooCommerce from single pages to the archive and category pages. It still doesn’t offer any customization on checkout and cart pages, but that part can still be made using Jupiter X or other plugins. So, if you aim to build a completely custom shop page layout, you can make use of the JetWooBuilder plugin. Here is the JetWooBuilder’s official website.

After adding the JetWooBuilder, there will be four global widgets that you’ll be able to use among your templates and even on your own pages:

It also adds a various number of widgets that you can use on your single page templates such as an add to cart button, attributes, content, excerpts, image, price and etc. You can find out how to create a single page template for your eCommerce here. However, we’ll go ahead and go through the steps of creating a shop while using Jupiter X and Jet Woo Builder.

Setting up an eCommerce store with Jupiter X

Let’s set everything up quickly. We already installed the Jupiter X theme and activated it like this. Now we just need to activate the JetWooBuilder plugin and start using it. So, simply go to Jupiter X -> Control Panel -> Plugins, then install and activate the JetWooBuilder plugin. It’s one of the bundled plugins in the Jupiter X theme.

Build an eCommerce Store in Jupiter X Installing JetWoobuilder — Installing JetWooBuilder from the Jupiter X Control Panel

After activating JetWooBuilder, you will notice that two menus are added onto the WordPress Dashboard:

Elementor -> JetWooBuilder settings which allow you to set the available widgets.

Build an eCommerce Store in Jupiter X JetWooBuilder Settings — JetWooBuilder settings under the Elementor menu

WooCommerce -> JetWoo Templates which lets you add and manage your templates.

Build an eCommerce Store in Jupiter X JetWooBuilder Templates

There is also another place where you can assign your templates to WooCommerce pages. It’s located on WooCommerce -> Settings -> JetWooBuilder.

Build an eCommerce Store in Jupiter X WooCommerce Settings page — The JetWooBuilder tab under the WooCommerce Settings page

Now let’s create our first shop page template and then assign it to our website.

Creating your first shop page template

In order to override your default shop page (usually it would be /shop/ after you finish the WooCommerce wizard), you would need a Shop Page Template and to set the default shop page template in WooCommerce settings.

Let’s do this together step-by-step.

1 – From WooCommerce -> Jet-Woo-Builder Templates, add a new template.

Build an eCommerce Store in Jupiter X Adding a new template — Adding a new template to Jet-Woo-Builder templates.

2 – Select Shop as the “This template for”, then fill in the name of the template and choose your desired layout and click on Create Template.

Creating a default shop page in JetWoo-Builder

3 – Done. Now let’s take a look at the page template that has been created.

The first thing you’ll notice is that this page does not have a style. It may even look like it’s broken.

Build an eCommerce Store in Jupiter X Adding a new template default Shop page template — The default Shop page template created by the JetWooBuilder

Don’t worry – everything is completely ok. It’s just that the widgets used inside the template require dynamic content and since we don’t have any dynamic content at the moment, it looks like this.

On the created page, you’ll see some elements such as filtering widgets among others. Feel free to add or remove the widgets as you wish. Just consider one point: the JetWooBuilder uses the Products Loop element inside the default shop page template. We need the Product Loop widget here. It’s not possible or recommended to change it to Products Grid or any other product loop as it will ruin the mechanism and won’t look good.

Scroll down the left sidebar to see the available widgets under the JetWooBuilder. You can also use other widgets if you like. As you can see, the default shop page utilizes some native WordPress widgets to filter the shopping items in the front end.

There is one point we should address about the template settings in the JetWooBuilder: The default shop page can be unique, but the rest of the templates such as archive and category pages will be wrapped up inside the default shop page template, as a Product Loop item template if you have it enabled.

This means that you can only design the whole shop page template once, and after that, if you want to use it for category and archive pages, simply create one of the item templates instead of the whole page. In other words, you won’t need to repeat the whole design of your shop page for your category and archive pages.

If you do so, it’ll ruin your pages, and you’ll wonder why the pages aren’t working. The logic behind this is a little bit confusing, but if you know how to use it correctly, then you’ll have as much flexibility as you’ll need to build up all of your custom designs without a single line of code.

Now let’s save this template then add some products to our shop and check out our shop page. Before that, it’s better to set our template as the default shop page in the WooCommerce Settings.

Setting the Shop Default template

1 – From the WooCommerce Settings page, choose JetWooBuilder.
2 – Check the Custom Shop Page checkbox.
3 – Choose the Product Shop Template that you created in the previous step.

Setting up the default shop page template in JetWooBuilder settings

4 – Save the settings.
5 – Make sure you already selected the default shop page in the WooCommerce settings.

After adding some products (you can find a dummy product file here), the final results on the shop page will be like the following:

The Default Shop page populated by the dummy products.

Creating the archive and category pages using JetWooBuilder

The overall process was easy, right? Now let’s practice the steps above with a new goal in mind – which is adding the archive and category pages. The JetWooBuilder website explains this topic thoroughly.

However, a question that will probably pop into your mind is: what will happen if you don’t use an archive or category page? Well, the answer is nothing. It will still wrap up the products on the default shop page and show the default loop item layout. If you want to have a different layout on the loop items, you can use the archive and category page templates. Here is the complete tutorial for this: How to create and set a Product’s Archive template

Here’s the video that demonstrates how this template feature works with the JetWooBuilder.

Final Thoughts

The JetWooBuilder is a tool that can help you create highly customizable shop pages. From the default shop page to archive and single pages, there are widgets and options that allow you to create stunning shop pages that fit your needs.

In this article, we briefly explained how to build an eCommerce store in Jupiter X by working with the JetWooBuilder. The most common issue with JetWooBuilder occurs when you change the Product Loop widget on the shop page or use the product grid on the archive pages.

Let us know your experiences and thoughts in the comment section below! 😉

November Crash Course: Freelancer’s Guide on How to Build a Dynamic Hotel Website with Jupiter X – Part 1 (Room Listing)

build a dynamic hotel Website with Jupiter X featured image

A hotel website consists of different parts such as the homepage, about and contact pages – but the most important part of a hotel website is filtering, room listing, and booking. In this November Crash Course, I’ll show you how to create a dynamic room listing with the custom post type and custom attributes. In the upcoming parts of this course, I’ll show you how to add booking compatibility as well as other filtering and listing features required to build a dynamic hotel website.

A hotel website is, in fact, a room listing website where each room type has a profile for itself and all the features and attributes for that page are included in that profile. Also, we need it to work like a template where a hotel receptionist or a Guest Relations Officer can easily fill in those attributes and the room profile is created.

When creating a regular blog post in WordPress, we’ll fill in some related information such as the title, category, tags, excerpt, author, featured image and body of the blog post so we need a custom post where custom attributes about the room is definable.

In technical terms, we should create a custom post type for hotel rooms with custom meta attributes about the room’s title, description, price, rating, amenities and so forth. We call this custom post type the “Hotel Room.”

Here is what we need to create a “Hotel Room” in action:

Define a custom post type with custom meta fields (as room attributes)
Create a listing for our custom post type single page (room profile page) and a template for it
Create a design template for your post type single page

It’s important to note that a custom post type has two sides:

Backend where the custom meta fields (room custom attributes) is filled
Frontend which is how the custom post type and its attributes appear visually. We call this a “listing”. A listing is a visual presentation of a custom post type.

1- Define a custom post type with custom meta fields:

After installing Jupiter X, you need to install the JetEngine plugin v2.1.4. JetEngine is a tool used to create custom post types in Jupiter X. Additionally the following plugins should be installed and activated:

Jet Elements v2.1.2
Elementor v2.7.5
Raven v1.8

In the WordPress dashboard sidebar, go to:

Plugin > Find JetEngine and click on Activate.

From the dashboard sidebar, go to:

JetEngine > Post Types > Add New
In the General Information section, give your custom post type a name and slug like Rooms
In the advanced settings section, define an icon for your post type in Menu Icon and for support, set the following:

Build a dynamic hotel Website with Jupiter X Support — These are the sections we want to be available in our custom post type backend.

The most important section here is Meta Fields where we define the room’s custom attributes so the receptionist can fill them in accordingly. We can set various options about meta fields but those that we need most in this tutorial is:
- Field Label (name)
- Field Type defines the type of field which can be text (for attributes such as the city), text area (for large text amount like description), gallery (for attributes that require the receptionist to upload images), checkbox (for amenities that differ from room to room) and more.
- Field Width defines the width you want the meta field to occupy in the backend. You can change this as you like to make it simple for the receptionist. In this tutorial, we’ll set it as 25% for all meta fields.

Build a dynamic hotel Website with Jupiter X Fields

Let’s say our room has the following custom attributes. We need to create a custom field for each of them. You can use the suggested values you see on the table.

Meta Field	Field Type
Beds	select
Rating	text
Price	text
Price Rate	text
Cleaning Rate	text
Restaurant Rate	text
About Hotel	textarea
Address	textarea
Room Images	gallery
WiFi	checkbox
Minibar	checkbox
Car Park	checkbox
Air Con	checkbox
Airport Shuttle	checkbox
Night Club	checkbox
Breakfast	checkbox

Note that for select and checkbox field types, we should define the options that the receptionist can choose from.

Build a dynamic hotel Website with Jupiter X Checkbox

Now that we have defined what custom attributes we want available for our receptionist, let’s find it in the dashboard sidebar and create an actual post from our Rooms post type. The new post page should look something like this:

Build a dynamic hotel Website with Jupiter X Attributes

As you can see, all the room custom attributes we wanted are located in the meta fields section lower on the page. Let’s imagine that our receptionist filled out these fields but could he or she just go ahead and publish the page? No! We should first make this data presentable or – in technical terms – assign it to a listing.

2- Create a listing for our custom post type single page

In the WordPress dashboard, go to:

JetEngine > Listings > Add New
Fill the upcoming dialogue as follows and proceed.

Build a dynamic hotel Website with Jupiter X 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 your room profile page or, in technical form, a template for the single page of your new Rooms custom post type.

3- Create a design template for your post type single page

Just before we start, please note the resulting design of this tutorial so far should be similar to this template. This template is part of the Jupiter X Hotel Listing and is available for Jupiter X users to download from its control panel.

Alright, now we are going to design the template how we want and arrange the custom attributes based on their importance to the receptionist accordingly.

First, add a bit of top margin to your page to separate the page content from the header. Right-click on the main container section:

Edit Section > Advanced > Set Top Margin to 40px

Intro & Image Slider

For the title of our room, we’ll use a Dynamic Field:

Drag the Dynamic Field to your page from the element library.
Style your title as you like. We used Muli Bold 36px.
Set Source as Post/Term/User Data and Object Field as Title. This is where we specified the value for this field should be filled by the name of the post created by the receptionist.

Build a dynamic hotel Website with Jupiter X Dynamic Title

Next up is the room image gallery:

We need to first activate the slider and grid capabilities for dynamic fields in JetEngine. Save your work and go to the backend. Click on JetEngine in the sidebar and check the following two options:

Build a dynamic hotel Website with Jupiter X Slider

Go back to your single page template and drag the Dynamic Field to your page from your element library.
Set Source at Meta Data
Set Meta Fields as Room Images. We just set our dynamic element to load the images uploaded by the receptionist when creating the post in the Room Images section.
Turn on the Filter Field Output and set the callback as Image Gallery Slider. Also, turn on the Use Lightbox option.

Description and Ratings

Now we need to define the location for the other info about the room including its description and specifications.

Create an Inner Section inside your main section, set its Top Padding as 60px and divide it by three columns with these ratios: 50%, 15%, 35%
Unlike the main title, we don’t need a dynamic title for “About This Room.” Simply use a Heading element and style it however you want.
For the room description, we’ll use a Dynamic Field and set its Source as Meta Data and the Meta Field as About Hotel.

Build a dynamic hotel Website with Jupiter X About hotel

Right next to the description column is the room rating. For the rating, we’ll need a circle including the rating inside it. So here’s how we do it:

For the middle column (15% width), set a 10px left margin and 32 px Top Padding.
Drag a Button element inside the middle column.
In the content tab, set its Text as Dynamic > Custom Field > Rating. This will load the value added by the receptionist in the rating section in the backend.

But that’s not all. We need to make the button container circular now.

In the Style tab, apply the following settings:

Now Let’s add the skill meters to right column:

For the right column (35%), set a 35px Top Padding and 10 px Left Padding.
For the dynamic skill meters, we’ll actually add 3 Progress Bar elements (from the JetElements library), and we’ll set the percentages to:
- Dynamic > Custom Field > Cleaning rate
- Dynamic > Custom Field > Restaurant
- Dynamic > Custom Field > Pricing

The respective value for these parameters will be dynamically replaced by what the receptionist has entered in the backend.

You can style the meters as you wish. Below is the recommended styling:

What’s left of this section of the template is putting the circular and bar rating in a box. For this, we’ll add a three-side border without the right side to the left box (15%) and a three-side border without the left side to the right box (35%):

Amenities, Location & Booking

Ok, what’s left is the last section of the template, which includes room amenities, hotel location, and the pricing calculator. We’ll cover the pricing calculator in the following episodes together with the booking feature. If you remember in the first step, we created 7 meta fields for our Rooms post type that will appear as checkboxes in the post single backend. Those that are checked by the receptionist will appear in the front end.

So what we need to do is to put all of the amenities as Dynamic Fields in the page but set to display only to those that have a value (which means checked in the backend by the receptionist). So let’s do this.

Drag a Dynamic Field to your page. Set the Source to Meta Field and the Meta Field to one of your amenities like WiFi
Define an icon for your amenity
Enable the Hide if the value is empty (with this, the amenity will be displayed only if checked in the backend by the receptionist)
Activate the Filter field output and set the callback to Checkbox field values
Complete some further styling to your amenity item

Repeat the same process for the other 7 amenities that we have. You can divide your column by 4 columns to better organize the list of amenities. Ok so far this is what we have:

So we have one more item to add: The location map.

Drag a Google Map element to your page and set its Location to fetch from the dynamic custom field address:

Ok, we are done with creating the template. Now we need to tell Jupiter X that the template we created should be the template we want to use as the custom single template for the Rooms post type.

Save the content of the template by right-clicking on the bottom of the page and choosing Copy all content or using Elementor Save As Template option in the lower-left corner.

Publish/Save the template
In WordPress dashboard try Dashboard > Templates > Add new > Single. Give your template a title such as Room Single Template.

In the upcoming Elementor environment, either paste the content you copied in the last step or import the template you saved.
Publish/Save the template
Open a new browser tab and go to Dashboard > Jupiter X > Control Panel > Settings > lower on the page, check the Listing Items and Rooms (the name of your newly created custom post type). This will allow us to use Customizer for these two items.

Then go to Dashboard > Jupiter X > Customize
In Customizer > Post Type > Rooms > Room Single
Click on Custom and select the Room Single Template as the custom template for the single page:

Publish the changes.

And that’s it. We just built our custom post type Rooms a nice single page design template with dynamic components that will be fetched from what our receptionist will enter in the backend.

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 other listings derived from our Rooms post type, such as the main rooms listing and archive listing.

Do make sure to watch the tutorial video along this post to better understand the process and ask any questions below in the comment section. And keep an eye out for the upcoming episodes on how to build a dynamic hotel website for our Wolf of Wall Street!

Dynamic Hotel Website with Jupiter X Hotel Website jetengine November Crash Course Room Listing

How to Build a WordPress Multisite with Jupiter X

Build a WordPress Multisite with Jupiter X Featured

If you’re the owner of several WordPress websites that share common aspects such as themes and plugins, then you might wonder if there’s a more efficient way of managing them as a single install. WordPress Multisite might just be the exact thing you’re searching for. Since version 3.0 came out, WordPress has offered the multisite feature. Multisite allows users to create a network of sites on a single WordPress installation – which ultimately means that you can run as many sites as you like. Read this article in its entirety to find out how to build a WordPress Multisite with Jupiter X.

Advantages of WordPress Multisite

Ability to use the same plugins on your project (e.g. performance, security, SEO).
Flexibility to use one theme as a parent theme on multiple sites.
Ability to share similar media files for your organization’s branch sites.
Saves time on updates to your sites.
Freedom to experiment with new ideas while developing client sites on a temporary domain.
Community networks

Let’s take a look at these benefits in more detail.

Disadvantages of WordPress Multisite

The things that make Multisite a great sharer also contribute to its flaws.

Migrations. Because the network uses one database and stores data from each site in a single database, migration is a bit difficult and complex.
Users. You can’t separate users, meaning that each one will continue having access to the entire network. Also, you cannot create separate users for FTP uploads because only one folder is used for all the sites.
Plugins. You aren’t able to install one plugin for only one site, once the network administrator installs the plugin, it will immediately be available for all the sites in the network. Also, if you delete a plugin, all sites using that plugin will be affected.

So then, this begs the question: Who needs a WordPress multisite network?

Enable a Multisite Network in WordPress

By default, the Multisite Network feature is built-in with each WordPress installation. All you need to do is set up and activate it.

To do this, you’ll need access to the files in your WordPress installation. Use the FTP browser or file browser in your hosting to edit files. This process requires access to two files .htaccess and wp-config.php – both of which are in the base folder of your WordPress installation. Make a backup of both of those before you start. (It’s also a good idea to backup your entire site too.)

To start, open the wp-config.php file in your code editor and add the following code just before the

/* That’s all, stop editing! Happy blogging. */ 

/* Enable Multisite */
 define( 'WP_ALLOW_MULTISITE', true );

Once you’ve done that, save your changes to the server. This code simply enables the multisite feature and once enabled, you will still need to set up the multisite network

P.s. don’t forget to create a complete backup of your WordPress site.

Setting Up WordPress Multisite Network

Now that we have successfully enabled multisite, it’s time to configure the Network settings. Head over to the Tools » Network Setup page to configure your multisite network.

You’ll then see a screen that asks how you want your network to be set up and whether or not you want to use subdomains or subdirectories.

Select which one you want to use, enter the title and admin email address for your network in the Network Title and Network Admin Email fields, and click the Install button.

After this, you’ll be taken to the Network Setup screen. Here, you’ll find some codes with instructions where to paste them. One is for the wp-config.php file and one for the .htaccess file.

How to build WordPress Multisite with Jupiter X Network Setup

Please note: you’ll get different code from this site because we have different sites 🙂

Once you make changes to the files, go back to your site admin. Click the link on the Network Setup screen, and log into your network. Use your default login credentials you used before.

Now, you’ll find that your admin changed a little bit, and you’ll see new items in the toolbar at the top called My Sites and the second one called Network.

My sites – used to manage your sites. Among these settings, not only can you add or delete but you can also deactivate and archive sites.
Network – used for configuration and overall network setup, user roles, plugins and theme management, and their updates.

And that’s it! You’ve successfully activated the WordPress network, and you’re now ready to add your new sites in the network.

Building a WordPress Multisite in Jupiter X

As we now know all the advantages and disadvantages of this feature, we should think about how to use WordPress Multisite with Jupiter X. There might be several use cases, but let’s take a look at the most interesting one.

Let’s say you are a freelancer who travels a lot and loves mountain biking. You want to create a site or sites where all these interests will be published according to their styles.

This is what our task looks like:

Freelance site. This site will have a solid looking design, complete with your portfolios and the services you provide. You’ll also want to list all your clients and their testimonials.
Travel site. Since you’re traveling quite a bit and have accumulated good experiences that you want to share with the world, the site must contain a gallery, trips, places you’ve, as well as your future plans.
Mountain Bike. Since you’re really into mountain biking, you’ll want this website to have a very sporty style. If you’re participating in various races, then you’ll also want to have race events and stylish blog posts where you will publish your previous and future adventures.

Having these sites under one hood where you’ll be able to manage everything from one dashboard sounds like a great plan. Now, let’s take a look at what Jupiter X can offer us and how it can help us achieve our goal.

Currently, Jupiter X offers 250 premade templates that are sorted into 16 categories. You’ll find at least one type of business in this extensive list of premade templates. Now, let’s check what we got for our situation.

The freelance-style website under the creative/portfolio category has 33 premade demos:

How to build a WordPress Multisite with Jupiter X Premade Demos

I will choose Creative Studio, which has a clear design, pleasant typography and colors match – all of which I’d like to incorporate into my website:

How to build a WordPress Multisite with Jupiter X Creative Studio

Travel site – There are 9 templates in this category:

How to build a WordPress Multisite with Jupiter X Category

And my favorite is Adventure since it closely resembles my personality and active lifestyle:

Lastly, for my mountain bike hobby, I’ll go ahead and choose the Mountain Bike template from the 10 available demos. It has everything needed on a hobby site and the design exactly what I want.

Now, as we already know what we want, it’s time to roll up our sleeves and get our hands dirty. This is what our task looks like for now:

Install WordPress.
Setup a WordPress network site.
Create three domains and name them based on our goal (For example Freelancer, Traveler, Biker).
Install Jupiter X and all the necessary plugins.
Install templates for each domain.
That’s it – now it’s your turn to make the final changes to them. The Jupiter X templates are almost ready. All you’ll need to change are the text and images. Everything else has already been taken care of (Thanks to the design team behind Jupiter X).

Wrapping Up

WordPress Multisite is a great feature when used correctly. While it has it up and downsides, you can use it for your personal or business sites, to host client or community sites or to run a WordPress.com-like system of blogs that people create themselves.

In this blog post, we took a deep dive into how you can set up, enable and build WordPress Multisite with Jupiter X quickly and efficiently so you can begin managing several sites at once. We’d love to hear more about your thoughts and experiences in the comment section below!

jupiter x jupiter x templates Multisite Network WordPress Multisite with Jupiter X

How to Build an Editorial Calendar for Your WordPress Blog

editorial calendar for your wordpress blog featured

Are you struggling to keep your blog up-to-date? Or do you have a list of great ideas for blog topics but are unsure when to publish each one? If so, then an editorial calendar can help you schedule the posts and assign due dates. In other words, editorial calendars for your WordPress blog allows you to have a plan for your post – there are even some calendar plugins that will help you create a content calendar.

What is an editorial calendar?

An editorial blog calendar is more than just a calendar. It allows you to set it and forget it. It’s hard to simply wake up and know what to blog about that day, how long it’ll take to make a post and how much information you should provide so freely, among other things.

With an editorial calendar, your blog starts working for you, instead of you working for it. Your blog will become a powerful tool for your business that attracts new customers.

Why do you need an editorial calendar for your WordPress blog?

Editorial calendars make it easy to keep track of your blogging schedule, blog post ideas and holidays that might inform your blog topics. Other reasons to use editorial calendars include the following:

Keep your content consistent.
Organize your writers and contributors.
Visualize and share your strategy with your team.
Fill in any content gaps.
Plan your SEO strategy before creating content.

How to create a WordPress blog editorial calendar

1. Determine how many posts per week you can write

When starting an editorial calendar, you first need to determine how many days you will actually post. Don’t try to post seven days a week if you don’t have time for it. It’s better to consistently post twice a month than randomly post every day for one week followed by three months of no posts at all.

2. Define topics for each post day

Think of over 5-10 blog topics related to your business that your customers are interested in. You must know who you are talking to in order to create an editorial calendar of topics that will engage your audience.

3. Brainstorm post ideas

It’s better to take a pen and a paper and write down everything that pops into your head. You should provide interesting and useful information for your potential customers that will attract new readers.

4. Create an editorial schedule

You can do this step with a paper calendar, Excel sheet, etc. Below I’ll show 2 plugins that can be used with Jupiter X theme to create a schedule.

5. Write and share your post

Of course, you have to write posts in order to build your blog. Write at least two blog posts. Schedule those two blog posts to be published on the days marked on your editorial calendar. You can pick a day of the week and write as many posts as you can in one business day so you can focus on other things on other days. It is really up to you. Then once you have a finished post, share it! Share it across your various social media – even send out a newsletter if you want. Your audience won’t know to tune into your valuable information if you don’t tell them to.

Creating an editorial schedule

There are several editorial calendars that integrate directly into WordPress. These calendars will show your planned WordPress posts and allow you to schedule new content.

We’ll review two of them:

Using the PublishPress Calendar, you can easily see when content is planned and when it was published. You can also drag and drop content to a new publication date.

The calendar gives you a powerful overview of your publishing schedule:

editorial calendar for your wordpress blog 1

You can read more about how to install the plugin in the PublishPress documentation.

When you add a new item to the calendar, it will automatically be saved under the Pitch category and assigned to your user account. To see all of your content and its categories, you can go to the PublishPress > Content Overview tab:

editorial calendar for your wordpress blog 2

The Content Overview screen allows you to drill down and see content organized by status, categories or users. You can find out more information here.

The calendar gives you a powerful overview of your publishing schedule. By using the Editorial Calendar, you’ll easily be able to see when content is planned and when it was published. You can also drag and drop content to a new publication date. By default, you see all the WordPress content you have planned for the next six weeks. If you need to drill down, you can filter the calendar by post status, categories, users or post types.

Conclusion

Creating an editorial calendar for your WordPress blog content can be time-consuming, especially if you are posting regularly, but is a vital part of successful blogging. Using a plugin can make it easy to setup and manage your scheduled posts.

Editorial Calendar editorial calendar for your WordPress blog

Congrats to You Both! Here are 6 Key Elements for Your Wedding Website

Are you right in the middle of planning for your big day? Preparing a wedding website has become a growing trend among newlyweds – but among all other tasks that need to get done, typically very few couples find the time and energy to build their website! Well, we all know how stressful ticking things off the wedding to-do list can be – however, creating a wedding website doesn’t have to be! This is particularly true when you know which elements for a wedding website to use and where. In fact, this will be the easiest of all wedding planning tasks! And we’ll show you just how you can easily get it done.

In this article, we’re going to walk you through the key elements that should be used in a wedding template while having a look at three Jupiter X wedding templates. If you’re planning a wedding website (or maybe a wedding!) this will specifically help you kickstart your website. We will try to visualize what an informative, classy and fun wedding website should look like, as well as showcase a list of important elements for a wedding website that best matches your big day’s theme and style.

Websites that are built for special occasions such as weddings, Valentine’s Day, engagement parties, graduation ceremonies or even honeymoons are like online albums in a way. So the focus should be on images and the elements that organize images. Jupiter X’s Sarpedon template can be a good example of such a concept. Using elements like the Image Carousel and the basic gallery portrays an image-driven template. Let’s go through one-by-one some of the useful elements that’ll help you build a clean, well-designed website (or better to say online album) for your big day:

Image Carousel

Image Carousel Element

Your website loads to a beautiful set of you and your partner’s photos, and the first thing visitors see on your website is a collection of your most precious photos together – isn’t that fancy?! We think so too! You can do this with the Image Carousel element. Here’s how it looks in the Sarpedon template:

You can customize the Image Carousel down to every single detail: from image size, the number of slides to show on one click, animation style, and speed to hover effects.

Elements for a wedding website- Image Carousel setting

You can learn more about the Image Carousel element by looking at more examples here.

Instagram

You most probably have an Instagram history with your partner that you carefully created to share with your followers. You can actually showcase your Instagram feed on your website by using the Instagram element. Choose between grid, masonry and list layouts to make pictures appear as you wish. You can also choose which photos to show, set the number of columns and customize the overall look of the element. To read more about how to work with this element in detail, please visit this page.

A typical wedding website template should allow you the option to showcase your love-filled pictures through Images Layout in the catchiest way, as well as collect information and track down your attendees through a well-designed RSVP section equipped with a functional Form element. The Leda template is Jupiter X’s other one-page wedding template that comes in handy with these two elements.

Let’s take a look at these elements that – together with the other carefully planned details – will make your guests congratulate you twice on your big day!

Images Layout

As mentioned earlier, you can showcase your pictures in an organized way with the Images Layout element. Just like with any other image-related element, you can customize its look, hover effects, number of images and columns to show, add an icon or a title on the image and many more!

Images Layout has four different layout styles you can choose from: Masonry, Grid, Justify and List. Their width and height sizes are what differentiates them from each other. For this template, we choose the Grid layout to ensure that all items have the same width and height. To learn more about the other layouts, you can head over to our knowledge base and read more here.

Form Builder

Wouldn’t it be cool and creative to gather all your RSVP information in your email instead of just posting your guests one-by-one and receiving reply notes in your physical mail? Of course, the traditional way is fun, but a simple online RSVP form can save you a lot of time, money and energy and ease the wedding planning tension a bit!

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 field placeholders and sizes and add the email you want to gather information in the “Add Action” section of the setting, and tada! You’ve got yourself a nice and clean RSVP form!

You can even customize the feedback message to pop up after a message is sent. It can be a catchy informal “thank you” message from you and your spouse or a more formal one appreciating their reply.

Learn more about the Form Builder element and how to create one here.

And last but not least let’s dig into three more elements for a wedding website that should not be forgotten! We’ll look for the examples in one of Jupiter X’s most recent wedding templates, the Wedding Invitation.

Countdown

Why not add some hype around such an important day of your life?! Add a countdown timer to your website and make your guests wait excitedly and impatiently for the big day to come. You can play with this element all you want, change its styling, typography and the overall appearance, choose between different timer types based on your taste and even set what happens after the timer is expired. You can find detailed instructions on how to use the Countdown element here.

Horizontal Timeline

You can showcase the main activities happening on your wedding day using the Timeline element. Add as many items as you want and stylize each by adding icons, titles, and texts and set the timing for each so that your guests know what kind of fun events they should be expecting at your wedding.

Here you can find examples of Timeline in vertical and horizontal style.

Team Members

Yes, you heard correctly! You can actually use the Team Member element to introduce your very precious bridesmaids and groomsmen! Create a profile for each of them and customize the look of it by adding names, photos, position, and even their social media accounts! Cute surprise, eh?!

Elements for a wedding website- Team member — Team Members element

Wrapping it Up

Everything is set for a fun and beautiful wedding website, you just need to plan on which elements suit your taste and get it done – it’s as easy as a piece of wedding cake!

Let us know about your experience in the comments. Have you built a wedding website for your special day? How did the invitees and attendees like the idea? Or you just made up your mind creating one just now? We would love to hear your ideas!

elements for a wedding website jupiter x jupiter x templates wedding

Jupiter X v1.10: Custom Single Page, Archive Custom Template, Custom Title Bar and More

Recently we released Jupiter X v1.10. This new version pieces together some very exciting and frequently requested features and additions to Jupiter X. In this post, I’m going to outline the 4 most important features added in the version.

Custom Single Pages

Creating custom single pages was not previously possible in Jupiter X without Elementor Pro. It’s needed when you want to define a different standard design for a single page of your post type. It can help save a lot of time redoing a design for every post and also completely customize it for you or your clients’ needs and preferences.

Custom Single Pages for Blog, Portfolios & Pages

Before, you had to choose from readymade templates available in Jupiter X in order to add custom single pages to your blog and portfolio posts. But now, you can design your very own templates with Elementor and assign it to your portfolio and single pages.

After updating to Jupiter X v1.10, you’ll see a new tab labeled Single in the saved templates section where you can add and manage the single page templates. You can click on the Add New button and just like a regular header, page or section templates, you’ll be taken to the Elementor editing space to build your page whichever way you want and save it.

Once saved, you can go to Customizer and simply assign the template you just built to all new portfolio single pages.

By using the same method, you can also create a standard design to apply to your page templates. Imagine that when your client requires specific elements on every page, you’ll be able to create a template including those elements to load every time they create a new page.

Learn more about new custom single pages in the knowledge base.

Custom Single Page for Custom Post Types

You can now define custom single pages for your custom post types as well. Imagine you’re running a hotel-listing website with tons of rooms you constantly manage, add and remove. You’ll need a custom post type with a custom single page design that includes only the content you require (e.g. room types, sleeps, amenities, options, price, etc.)

Or say you are creating a talent-listing website for a headhunting company with a large database of freelancers. They need a custom talent post type with a custom single page that includes the talents’ information such as personal information, location, bio, experience, skills, etc. with a vertical portrait next to this info. You’ll need a custom layout that you cannot find in the readymade blog single styles in Jupiter X.

In Jupiter X v1.10, you can simply create a custom single page for your custom post type and make it standard for all future posts in that post type.

Learn more about new custom single pages for custom post types in the knowledge base.

Dynamic Content in Custom Post Types

The attributes you need to include in the single pages for hotel and outsourcing website examples are custom data sets that are not normally included in a blog or portfolio single page. In order to add all this info, we need to do two things:

Inside our custom post type, define and add a set of dynamic content fields for the custom attributes we need (rooms, price, skills, bio, etc.). These fields will appear inside the post meta section in the single page in the backend. The tenant will set the value for each attribute and publish the post
The attributes along with the values set by the tenant for each should appear in the frontend. So we should add each dynamic data set we require inside the blog single page for the custom post type as well.

All this is now possible with Jupiter X. Thanks to the new Dynamic Fields Mapping feature, you can add a variety of standard elements to your custom single page such as heading, image, button, video, text editor, as well as many dynamic elements such as post content, post comments and post meta.

Custom Archive Page Template

If you want a custom design for your blog, portfolio or any other post type archive page, you are now able to do it without any other plugin such as Elementor Pro. Thanks to the new Archive Custom Templates in Customizer, you can create, edit and assign custom archive page templates for any post type.

Using the advanced dynamic tools, you can add both the blog loop wherever you want in the custom archive page template as well as any other dynamic content to your template:

Heading Element
Image Element
Video Element
Button Element
Text Editor Element
Photo Roller Element
Posts Element
Posts Carousel Element

Assigning a custom archive page for blog and portfolio is easy with Customizer. If you need to assign the archive page template to your custom post type, simply enable your desired custom post type from Jupiter X > Control Panel> Settings and check the Customizer settings again. You will see the post type name in your Customizer menu, and it will give you the ability to assign custom templates to it.

Learn more about new custom archive pages in the knowledge base.

Custom Title Bar Template

With Jupiter X, it was previously possible to customize the comprising elements of the Title Bar such as the container, title, subtitle, breadcrumb or enable/disable the title bar for different post types. However, it was not possible to create a custom design from the ground up and set it as the standard page title. Now it’s possible.

In Jupiter X v1.10, you can use Customizer to design a custom title bar just like a page section in Elementor and assign it as your page title. With the help of the newly added Breadcrumbs element to the Raven plugin, it’s also possible to choose between Jupiter X default Breadcrumbs, YOAST Breadcrumbs, and NavXT Breadcrumbs.

Would you like me to give you an example of this feature? Though so. Imagine you wanted to add a dynamic image to the background of your title bar so each page could have its own title bar background image. Similar to any other dynamic templating feature, you can now assign a dynamic background image element to your page title container section and set it to fetch the source from the featured image. Isn’t that cool?

Learn more about the new custom title bar template in the knowledge base.

Global Typography Option for Post Content

This is a feature that has been frequently asked about by heavy-duty bloggers and writers. In Jupiter X Customizer, you were able to customize the look of many things in your blog single page including the featured image, title, meta, tag, social shares and more – but the main body text was not one of them. If you weren’t using Elementor to write blog posts, there was no way you could define standard formatting for the main body text in your blog single pages.

With the latest update, you’ll have a Post Content section among your blog single style tab in Customizer where you can define all the formatting attributes for your body text in the blog single page. This is not limited only to your blog post content, as you can do the same thing for a portfolio and any custom post type single pages as well.

Learn more about the new post content formatting in the knowledge base.

What’s Next!

What’s next is great projects made by great people for great people! We believe the newly added features – particularly the custom single pages and the new dynamic content in custom post types – adds even more capabilities to Jupiter X as a WordPress website builder. Dynamic content alone opens a whole new chapter on the types of websites that can be created by Jupiter X. Just one example is various listing websites!

In the near future, we’ll publish blog posts to exclusively cover each of these features more in-depth. Until then, we’d like to know your feedback about Jupiter X v1.10 and if you think its features might come in handy for your next Jupiter X project. Let us know in the comments and stay tuned for related blog posts soon 😉

jupiter x Jupiter X v1.10

Web Designer Tricks to Deliver Website Projects Faster

Deliver Website Projects Faster Featured

Freelance web developers and web design agencies completely understand what it means to have a hasty client and to work harder to deliver website projects faster. Clients usually want their projects to be done in a blink of an eye in addition to all the practical aspects such as elegance, speed, content structure, navigation, ease of management, SEO, security and more. Of course, most of the time, they want all this on a low budget. It gets beautiful, isn’t it?

So, if you were a freelance web developer or a web design company in New York or any other city, what would you do in this situation? Possible options include the following:

Increase the project delivery time which causes more costs for both you and the client.
Increase the cost and try to hire some other developers to implement and develop the design as fast as possible.
Simply say “no, I can’t accept this project.”
Use tools to speed up your project.

Wait a second – which tools? Well, there are tools for every job! Imagine you have to move all your furniture in your apartment to another city, and you have these options:

Put each thing one at a time into your car and move them to the other city.
Load everything into an old truck – which could break down at any second – but for free.
Use a big, nice truck with all the gadgets required to move the stuff safely in a short period of time with a low fee.

I would personally choose the third option. It’s also the same for every other job in the world. Tools are there to help us do our jobs better and faster. But which tools to deliver website projects faster and better?

Before we get into this, I should mention that every web developer has their own methods of working quickly. Sometimes, someone uses a CMS (Content Management System) that contains a customly designed template, making it easier for the developer to create a website using his or her own templates. Sometimes, a developer more quickly writes the whole management system than setting up a new CMS.

So, what I’m really trying to say is that each developer chooses their own way of going about things. However, typically there are ways to improve the speed and reduce the costs of a web design project such as:

Using a good and flexible CMS. (We will consider WordPress only since it has more than 60% of CMS usage over the internet)
Using premade PSD templates that you can easily convert to a website
Using a premium WordPress theme that is feature-rich and requires no coding
Using premade website templates

Let me explain more about each of these ways.

Using WordPress as a CMS

As of October 2019, WordPress is used by 61.5% of all the websites whose CMS we know. This is 34.7% of all websites. It means that WordPress has the biggest community of users among all CMSs in the world. It also is a great choice for running websites from simple to complex use cases. Since WordPress is actively maintained and has a large community, it’s a secure platform if you keep it updated. Also, plugin variety and theme availability are making it the number one choice for many web developers.

Using Premade PSD Templates

You might have your own PSD designs that can be used with some changes for your other clients or you might be looking for other PSDs and sketch designs. In general, when you show your client a PSD of what his website would look like after implementation, you saved a lot of time and headaches. This is because in case it was not accepted or your client didn’t like it, you could easily change the design using PhotoShop, Sketch or XDesign software which is much less time consuming compared to developing a whole website, then showing it to your client.

Using a Premium WordPress Theme

If you ask an experienced web developer if free or premium themes are more cost-effective, they would most certainly tell you that premium themes are the way to go. Why? After all, doesn’t a free theme mean FREE? Of course, it does, but when using a free theme, you’d need to use a lot of other features and combine everything together. Most of the time, you’ll pay more for a small feature that you need. So, it’s not time and/or cost-efficient at all. Choose a good and flexible WordPress theme, and you can rest assured that what you get is much more than what you pay.

Using Premade Website Templates

This is also a big story alone. There are thousands of premade templates for every category you can think of. Plenty of them is free and available on different websites. Many of them are even award winnings. You only need to search for your category name and “website template” in Google to see thousands of results. Using premade templates is like having a cheat sheet with yourself on your final exam. It gives you great results, but this time, it’s completely legal.

Now that you know what can help us improve our speed, one question that probably annoys you is: How can I ensure that I can implement a premade PSD design with my changes, over another premade template using another theme? The answer is that you can’t. If you’re going to design and implement a website like this, then what’s the point of using tools? You need to find a tool that gives you all of the options together.

Imagine you have a multipurpose WordPress theme that has a vast variety of different templates for different categories and it has the PSD design of each template beside it. What else do you need? You need to be sure that this theme is good for your SEO, performance and has enough flexibility to implement your client’s requirements. It should be easy to manage, maintain and be compatible with third-party plugins. Having premium plugins bundled is a plus.

But, what is the chance that you’ll get all of these features together? If you look for it in big markets such as Envato, you’ll find some of them. The Jupiter X Multipurpose WordPress theme is an example. It’s a WordPress theme that has plenty of demo templates, and you can use any of them by a single click, plus the templates have PSD design files ready to download. The theme itself uses Elementor as the default page builder with 17 premium bundled plugins. It means that you get a $225 package for only $59.

Let’s see how we can build up a Barbery website for our hasty client using the Jupiter X WordPress theme.

Building up a Barbery Website

Before everything, let’s see what options we have among the Jupiter X templates. Open this page and search for keyword “barber”.

Deliver Website Projects Faster List — List of current barbery-related templates in the Jupiter X theme.

Let’s say that I like the Elara template, but I first need to show it with some changes to my client. So, I go to Jupiter X Control Panel and download the PSD package of this template.

Deliver Website Projects Faster Downloading — Downloading the PSD package of Elara Template

I then open the homepage PSD file inside the package and start editing as I wish.

Deliver Website Projects Faster Changing Design — Changing the design on the PSD

Then, I show this PSD to my client and get some feedback. After applying the feedback, it’s time to implement the design on my website. So, I simply install the Elara template on my website and then start changing the content and design based on the final PSD files.

Deliver Website Projects Faster Installing — Installing Elara Template

And it’s done!

Deliver Website Projects Faster Installed — Template Elara is successfully installed.

Now, all I have to do is to go to the homepage and edit my content as I previously edited on the PSD file.

Deliver Website Projects Faster Background — Changing the background image of a column in Elara Template

And then update my page. This would be the final result:

Changing the background image of a column.

That’s it. We’ve made it. Changing the rest of the content is as easy as this. All you need to do is apply the changes one by one.

Ok, but I still want my project to be better than this. Give me some tips!

The best thing I can advise is to have a comprehensive understanding of your website requirements. Imagine that you need to build up a website for a furniture shop. What features first come to mind? Probably high-quality images, big headings, portfolios, shop page, checkout steps and etc. Now observe the templates carefully. See which one has the best match design with the one that you have in mind.

Furniture-related demos in Jupiter X templates

The first thing you need to do is to ensure the designed layout is suitable for your content. The rest is to make sure you can implement your extra features as well. For example, if you need an e-commerce furniture website and your template doesn’t have WooCommerce by default, make sure to provide the correct place for your shopping items first and then enable WooCommerce. Also, make sure to check the Artbees Crash Course that has a great A-to-Z tutorial on how to build a website with different subjects in our blog.

Wrapping Up Tips to Deliver Website Projects Faster

Web design is a tough job and gets worse when you have a client on a tight deadline. However, using tools such as a multipurpose theme will give you the ability to design quicker and better and deliver website projects faster. Here we explained which tools can help you design a quality website in a short timeframe – and that gets a thumbs up from your client.

Deliver Website Projects Faster jupiter x web design WordPress

Creating a Fantastic Custom Login Page with Jupiter X

Custom Login Page with Jupiter X Featured

While the WordPress login page is its most recognizable page – keeping its default design is not ideal. You might be thinking “why not”? We’ve gone ahead and detailed why you should create a custom login page with Jupiter X.

Why would you need a custom WordPress login page in the first place?

Traffic. The more traffic you get on your site, the more problematic it becomes to manage spammers, malicious scripts and bots. A custom login page can filter all suspicious activities and make your site more secure.
Branding. There’s nothing wrong with the default styling of the WordPress login page in and of itself. But if you’re an established brand, you’ll definitely want to brand every inch of your website, including the login page. Displaying your logo to users or clients is surely something they will appreciate.
Multi-user site. This is fine if you have a small blog and you are the only one who uses the login page. But if you have a membership website where users can register and login, a custom login page offers a better user experience.

Choosing the right plugin to create a custom login page

There are 2 ways to create a custom login page:

Using third-party plugins
The manual way

Both have their pros and cons. For instance, it’s easier to use third-party plugins to create a custom login page as it can be done in a matter of minutes without writing a single line of code. However, going the manual route will give you more control of the appearance and features. It also requires good coding skills.

In this example, we’ll choose the easy way: a third-party plugin to create a fabulous custom login page for our project.

There are several plugins that can be used to create custom login pages in Jupiter X. From drag and drop to custom-made templates, from simple to complex, you can find plugins for all tastes and purposes these days.

For our example, we’ll use Clean Login, which is a plugin that offers shortcodes allowing you to embed your form anywhere on your site, including posts, pages, sidebar widgets or widgetized footer areas.

A few other benefits of this plugin include the following:

Add your login form in the frontend easily (page or post), as well as the registration and the lost password form.
If the user is logged in, they will see a custom profile and will be able to edit his/her data in another frontend form.
Only one shortcode per form, which means that you’ll only need to create a page or post and apply this shortcode to create each form you want.

Designing this page for the custom login page with Jupiter X

This is the most interesting part of the post as designing a page is always challenging. But if you have a good design taste, you won’t ever fail. For our login page, we’ll use a simple, clean design. This is how it’ll appear:

We are using 2 columns: one with 40% width and second with 60% width. In the first column we have:

Image widget – Logo with an absolute position at the top
Spacer widget – Adds space between the logo and login form
Shortcode widget – Clean login shortcode: [clean-login]
Jupiter X social network widget – Social networks at the bottom
HTML widget – We use this widget for custom CSS, and this CSS code to fix the styling of the form and page:

<style>
.cleanlogin-container * {font-family: "Playfair Display", Sans-serif;}
.cleanlogin-field-remember {float: left;text-align: left;}
</style>

While in the second column, we have only a spacer element and column that has a beautiful background image.

This is how the page looks from the backend:

Custom Login Page with Jupiter X Backend

There is a simpler way to speed up the page creation process. For example, instead of designing a page from scratch, you can use page templates or predesigned blocks from Elementor. This feature will speed up your design process, and all you’ll need to do is to place a login shortcode in the predesigned page:

Wrapping up

There are many ways to build a fantastic login page with Jupiter X using different tools and scenarios. However, the Clean Plugin is the simplest and does not require adding a heavy plugin to your project. Another benefit of this plugin and Jupiter X is that you can use a shortcode in the header builder in the popup window attached to the header or footer menu (The plugin offers the option to redirect the user after a successful login).

Another benefit of Jupiter X is that you can display various menus for different user roles. For example, after successfully logging in, you have access to different menus and options, while a user who has not logged in will see something else.

Please do let us know about your experiences and comment in the section below! 😉

Introducing WunderWP: Preset Styles for Elementor and More

Earlier last week we introduced WunderWP on ProductHunt. A new and free tool for Elementor that takes away a long-lasting pain shouldered by Elementor users. Let’s talk a little more about why this product was ideated and what problem it solves. Why on earth were preset styles for Elementor needed in the first place?

What is WunderWP?

WunderWP applies preset styling for Elementor widgets and beautifies your content in seconds. It helps you save big time by using its readymade styles to build your content and get your website up and going.

What problem preset styling for Elementor solves

Everyone who has used Elementor widgets knows that they are not ready to use right away! They won’t look nice until you put a good amount of time and energy stylizing and shaping them into something you want for your website. If you want to go about doing this, there are simply too many options and settings to deal with, and you need to make sure that what you customize looks professional and visually appealing.

All of this is time-consuming – and not to mention boring! WunderWP saves you that time by bringing on hours of work put by skilled designers and Elementor experts at Artbees to beautify your raw Elementor widgets and let you focus on the more important aspects of your project.

How WunderWP solves the problem

Regardless of which theme you use, once you install WunderWP, preset styles will appear in your element settings under the Content tab.

Preset Styles for Elementor Choose Style

Try different styles by clicking on their thumbnails and see which one looks better on the element and get something that more closely matches your preference. Voila! The ugly-looking default widget instantly turns into something beautiful.

Preset Styles for Elementor Before and After

New styles from the WunderWP Cloud

WunderWP adds new styles for different elements over time and, as long as you have the plugin installed, your library automatically updates itself with the latest preset styles for Elementor.

Compatible with everything Elementor

WunderWP is free and compatible with all Elementor-based themes, Elementor Free and Elementor Pro. It is also fully compatible with Jupiter X and the Raven library. Jupiter X users can simply download it from the WordPress repository.

Download Wunder WP from WordPress Repository for Free

250+ preset styles?

At the moment, WunderWP provides the following number of styles:

105 element styles for Elementor Free
139 element styles for Elementor Pro
36 element styles for Jupiter X Raven

…and new styles are being added over time!

Is it possible to save/reuse my own styles?

At the moment, it’s only possible to apply WunderWP’s preset styles but this sounds like a tempting feature! If you’d like to be able to add your own styles and reuse it again for other elements, please do let us know if you want to see that in WunderWP!

What’s next

WunderWP was ideated to automate styling and to create something like readymade website templates but for individual widgets. This helped us produce website templates for Jupiter X at a more rapid pace and then we thought that maybe it could be of use as an independent plugin for Jupiter X users and maybe all Elementor users.

WunderWP is doing its job at the moment, and we’ll keep adding beautiful styles to it over time but are there other directions it can go in? Yes, there are! There could be preset styles for Elementor that could be applied globally on the website. Or, for example, there could be automation and readymade content for other content types!

It’s up to how our community reacts and which features they’d like to see next! We’re eagerly waiting by to hear your feedback before we decide the next move 😉 You can follow WunderWP on social media to stay current with the latest styles and features added to it.

Follow WunderWP on Facebook
Follow WunderWP on Twitter
Follow WunderWP on YouTube

Elementor preset styles for Elementor WunderWP

How to make WordPress Themes or Plugins Translation Ready

It’s no secret that WordPress is used around the world. So it’s a good idea to ensure that themes and plugins can be easily translated into other languages. Adding internationalization and localization support by having a translation ready WordPress theme can greatly increase its market share.

Difference Between Internationalization and Localization

Internationalization is the process of developing a plugin/theme so it can easily be translated into other languages.

Localization describes the subsequent process of translating an internationalized plugin into a new language.

Side Note: It’s worth noting that internationalization is often abbreviated as i18n (because there are 18 letters between the ‘i’ and the ‘n’), and localization is shortened to l10n (because there are 10 letters between the ‘l’ and the ‘n’.)

The localization process can be done using a software called Poedit with three types of language files: the POT file (that contains a list of all translatable messages in the WordPress theme), the .PO file (created when you translate a POT file to a particular language) and the .MO file (a binary file that is created automatically by Poedit and is not human-readable).

Translation Ready Themes

There is some confusion about what a translation-ready theme actually means. So let’s clear up any possible confusion and explain what this entails:

Translation ready themes that only come with a .pot file

You can find translation ready themes that only come with a .pot file (and sometimes with an English version of .mo and .po files). These files can be used to translate the theme into other languages. These themes don’t provide translations to other languages, but you have the tools needed to localize the WordPress theme like the Poedit software or the Loco Translate plugin.

For example, in the Jupiter X theme, we provide the jupiterx.pot file and a user can translate the theme to their language.

Translation ready themes with translations into other languages

You can find translation ready themes that come with .pot file that also come with translations into other languages. These translations usually have been done by translators, volunteers or any other users.

For example, in the Jupiter 6 theme we provide .po and .mo files for some languages, meaning a customer doesn’t have to translate the theme themselves.

Translation Ready Themes Jupiter 6 Files

Steps to Create a Translation Ready Theme

Create and load the text domain for your WordPress theme.
Enclose the Translatable Text String with the WordPress gettext function.
Create the POT file.

Create and Load the Text Domain

The Text Domain will be a part of the WordPress theme or plugin specification. The following code snippets show the theme and plugin specification with the text domain.

Note: The theme specification will be in the theme’s style.css

/*
 Theme Name: YOUR THEMENAME
 Theme URI: yourdomain/themes/yourthemename/
 …
 …
 Text Domain: yourthemename
 */
/*
 Plugin Name: Plugin Name
 Plugin URI: yourdomain
 …
 …
 Text Domain: yourthemename
 */

Load your theme’s text domain by using the load_theme_textdomain() function. This function has two parameters as the text domain name and the directory path where we will store the .pot, .po, .mo language files. Paste the code seen below in your theme’s functions.php to load the text domain.

load_theme_textdomain( ‘yourthemename’, language_file_path );

Enclose the Translatable Text String with the WordPress gettext Function

WordPress uses the gettext framework function to translate the text string into the specified target language. It has a set of functions in a core translation API file l10n.php located in the wp-includes directory. We have to enclose the text string with the appropriate function. The code below shows how to use the gettext function to localize your theme.

__()
This is one of the most basic translation functions. Like many of its siblings, it takes two parameters: the string to be translated and the text domain.

$name = __( ‘My Stats’, ‘textdomain’ );

It’s used when you want to mark a simple string for translation and return the value to use somewhere else. This is frequently the case within functions – think of registering post types.

_e()

This is almost the same as the function above, except it echoes the value. It can be used when you’re translating in the HTML content directory:

_n()

This function is used when translating strings with a conditional plural in them. This means that you don’t know in advance if the string will use the plural or singular form because it depends on the momentary value of some parameter. A good example would be a comment count.

For example, if a comment count is one, you would need to use a singular form: “One comment.” If a comment count is 0 or more than one, you would use the plural: “Many comments”. This can be done in one go by using the _n() function.

This takes four parameters: the singular form, the plural form, the number to check and the text domain:

$comment_count = get_comments_number();
$comment_count_text = _n( ‘One Comment’, ‘Many Comments’, $comment_count, ‘textdomain’ );

You can read more about the gettext function in the following articles:

https://codex.wordpress.org/Plugin_API/Filter_Reference/gettext
https://codex.wordpress.org/I18n_for_WordPress_Developers

Creating the POT file with the Translatable Text String

After applying appropriate gettext functions for all the translatable text strings of your theme files, create a .POT template file. This template will be the base consisting of all the translatable strings. This file will be referred to create language mapping file .po, .mo pair for each language translation. You can use any popular tool to create this file for getting the theme’s translatable strings.

Read more about making translation ready plugins in the WordPress Codex page.

Wrapping up:

One of the goals of WordPress is to make it easy for users across the world to publish content.
In this article, we took a look at the basics of translations, what a text domain is, the functions we can use and how to create translation files.

We hope this was helpful to you. Please share your experiences in the comments below!😉

Translation Ready Themes WordPress Development wordpress plugins WordPress themes