Everything You Need to Know About Outsourcing WordPress Development

WordPress now powers more than a third of the world wide web (36,5% as of May 21, 2020). This includes blogging, businesses, online stores and service websites in a wide variety of niches and sectors. And there is a huge line-up of businesses that evolved around the dominant CMS that builds and maintains WordPress websites: WordPress themes, hostings, managed services and, of course, maintenance and outsourcing businesses that help in developing and maintaining WordPress websites on your behalf. 

Due to its piecemeal structure, WordPress is not as easy of a website building solution as its competitors such as Wix, Squarespace, etc… In recent years, this has led more individuals and businesses to consider using third-party services to complete the technical side of WordPress for them. In this article, we’ll take a look at the ins and outs of outsourcing WordPress development. We’ll answer the most common questions about outsourcing work in WordPress, whether or not you should do it, as well as tips on how to go about it the right way.

Why choose outsourcing WordPress development?

There’s no doubt that WordPress is easy to use, but it’s not very easy to set up and maintain. Unlike a SaaS solution, you have to put together different sections of the CMS together like lego pieces in order to get it working. This, on one hand, makes WordPress formable and extendible, which gives it a huge advantage over its competitors. On the other hand, this also makes it difficult to create and maintain. There are many solutions and options for each of these lego pieces you must choose from: themes, page builders, plugins, hostings, caching service and more.

You should either develop knowledge, experience and skillset to work with each of these yourself or break the bank to recruit and hire an in-house developer(s) to do it. But there’s a third option: outsourcing WordPress development to a ghost middle-man who specializes in WordPress. And even in a specific theme or plugin such as Jupiter X or Elementor. But in what ways is this beneficial to you?

Leverage expertise without having it

A WordPress specialist has developed years of experience and skills about the ins and outs of WordPress that your in-house developer might not know right off the bat. Even if you want to tackle the learning curve, there is a period of trial and error that you can skip by simply jumping on the back of a veteran WordPress specialist. 

While the process of creating and operating in WordPress themes and page builders is standard, clear and documented, there are dozens of ways to do one single thing. And the result can vary widely based on which way you chose to do it. Specialists have learnt the best way to do different things after years of working with that theme or plugin.

Eliminate legwork and focus on creativity

Digital media production has a serious drawback in general: legwork. And it’s even worse with creation within WordPress. Some WordPress tasks involve more legwork than creativity. You spend tons of time converting your PSD to WordPress, playing with Elementor to create  a page template or moving your content from an existing source to your new website.

There can be times when you spend more time building a template in Elementor than it took you to design it in Photoshop or Sketch!

The most important benefit of outsourcing is that it can free up your time to focus on what matters and what can only be done by you. Being a leader, designer, thinker, strategist, an ideator are things that cannot be outsourced. So you might save some time and focus on your creativity rather than installing WordPress.

Increase productivity and velocity

Development and QA is where the bottleneck happens in most teams. Especially if it involves new and unexplored areas where some research and trial and errors are involved. And it’s at that point where you can get a hand from an expert to get you out of a jam, smoothen your workflow and increase productivity by focusing on the other parts of the workflow like strategizing, customer development and marketing.

Having a smooth development workflow will give you confidence to work on more projects simultaneously. This is particularly important for high-volume teams where velocity is limited to the number of the few developers working in-house and you cannot assign them multiple tasks from different projects freely. By outsourcing to the right team, you’re actually doubling or tripling your team size without actually increasing your workforce.

Cut costs and increase profit margins

High-volume WordPress businesses such as agencies might reduce production costs by outsourcing WordPress labour instead of spending money to recruit, hire and employ staff.

What are white-label services?

White-label services ensure that your brand – and only your brand – will appear on the final product, even if you had a freelancer or agency doing the work on your behalf. Make sure to hash out the terms for branding and disclosure in the contract.

outsourcing WordPress development

This is good for your brand and will protect your clientele. However, this also increases your and your contractor’s responsibility to assure the quality of the work. If there are any problems, the responsibility will lie on your shoulders (not your contractors), and your brand may be at stake.

White-label + partnership: The ideal formula!

White-label services are suitable for high-volume WordPress businesses and the regular flow of projects you want to outsource to someone reliable. It would be ideal if you can form a long-term relationship with your contractor and strike an agreement that would work in the interests of all parties involved. For example, a special rate exclusive to you when you promise to outsource a specific number of projects every month.

A long-term relationship fosters trust and reliability and transforms your contractor into a partner.  There are some white-label agencies where you can have your own permanent team of experts who work on your projects, you get to know each other over time and perfectly improve the productivity as a result of long-term collaboration.

Who should outsource? Freelancers, agencies or end-users?

The short answer is everyone! Freelancers, agencies and end-users alike would benefit from getting help from a WordPress expert. It might be an end user who just bought a WordPress theme and needs help customizing it, a freelancer who needs a hand doing a job for their client or an agency with a large clientele who needs another team to lift off part of the workload.

What can be outsourced?

Custom WordPress development

You might want to consider outsourcing if you need advanced WordPress development for particular requirements on your website or you need WordPress plugins developed from scratch for your project. You require a lot of knowledge and skills with WordPress to get something like this yourself or by your developer.

  • ✅ I want a custom calculator plugin …
  • ✅ I want a few custom post types for my hotel website …
  • ✅ I want a custom booking plugin built for my WordPress website
  • ✅ I want a custom header design to look and feel like on example.com
  • ✅ I want my popup to be showing a dynamic carousel populated by a post type in the WordPress backend.
  • ✅ I need my portfolio to have some custom fields with specific relations
  • ✅ I need a custom language selector for my multilingual website
  • ✅ I need to integrate an LMS with WooCommerce
  • ✅ I need to customize my Membership plugin
  • ✅ I need a custom shortcode to show a content under specific conditions to a group of my users

Theme customization

This is one of the most popular outsourced services on the WordPress market: You bought a WordPress theme, and you want to customize it by adding a custom functionality, capability or some custom codes to add a specific visual function that is not possible with built-in features.

  • ✅ I want a custom menu look in my template
  • ✅ I want plugin X installed and optimized in my theme
  • ✅ I need my current mega menu to to have a different look in mobile and desktop
  • ✅ I need to make the plugin X look like the other parts of my website in my theme
  • ✅ I need to customize my blog page to look like this

Performance & security optimization

This is another area where having extensive knowledge and skills is crucial – without which, you may risk your website health, data and security. If you have an active WordPress website with high traffic or several pages, you might want to have it audited by an expert for possible security measures and performance improvements.

Performance and security improvement checklists usually include the installation of SSL, caching and CDN services, which may require server and development knowledge and hands-on experience with different protocols and tools. It’s better if this is done by an experienced engineer.

  • ✅ I need a 90% Google Page Speed for my client WordPress website
  • ✅ I need a security checkup for my WordPress website
  • ✅ I need a checkup on the performance leaks of my WordPress website (unused plugins, image optimization, compression, etc.)

Converting to WordPress

This may be the most popular outsource WordPress task among different WordPress teams. Let’s say you like and select a WordPress theme but don’t know how to implement the designs you or your designer did. Or you’d just like to get it done by someone who is an expert on that theme and already knows the best practices rather than playing around with trial and errors.

For instance, a Jupiter X expert could help you achieve maximum design loyalty as well as the efficient usage of elements and plugins to convert your design from a variety of sources such as PS, Sketch or Adobe XD.

  • ✅ I need to create these templates with Elementor. 
  • ✅ I’d like to build my landing page with Jupiter X WP.
  • ✅ Can I convert my Sketch designs to WordPress?

Custom design

Well, this is not directly a WordPress development job but definitely a part of it. If you’re  creating a website for a very picky client or with special brand characteristics, you might want to have your website designed by expert designers exclusively based on your very own needs and preferences.

  • ✅ Design me the most beautiful WordPress website!
  • ✅ I’m representing a client with very unique brand characteristics, and we need a WordPress website for them.
  • ✅ I want to add a brand new template in harmony with the rest of my theme.

Maintenance, migration & content management

If you’re running an active website for yourself or for a client with regular content updates, you may want a helping hand in completing the usual maintenance such as WordPress updates, plugin updates, theme updates and regular health checkups, as well as content additions such as the creation of weekly or monthly posts.

You may also need help migrating your content from an existing website with many posts,  pages or products to a new WordPress theme (for example migrating from Jupiter to Jupiter X.)

You could handle this yourself if you have the skillset and enough knowledge about the original and destination platform. But if not or if you’re sensitive about your content and want a seamless migration, an expert will be helpful. They can assure a migration with maximum loyalty and with the best migration practices or content recreation in the destination platform for parts of your content that are not natively compatible and supported by the destination platform.

  • ✅ I want a seamless migration from Jupiter to Jupiter X.
  • ✅ I need a hand migration from Divi to Elementor.
  • ✅ I want a regular maintenance checkup for my WordPress website.

What should not be outsourced?

It’s good to think of outsourcing as a solution to get something that you don’t know much about done by an expert. Or if you have the knowledge base but you simply don’t have enough time to complete the project. If it’s the former, it’s still important to have basic knowledge about the essence of what you want done. This may include basic knowledge of WordPress and how it works. Some coding knowledge of the language you want can also be helpful if your project is purely related to development.

If you’re running a dev team and considering outsourcing part of the development to another team, then you probably have a deep knowledge of your WordPress plugin or app and you should note your contractor may take time to achieve the same amount of knowledge and familiarity with your product.

There might be a learning curve, trial and errors and even possible defects before your contractor learns as much as you know about your plugin.

  • ❌ I want to build the next Facebook with WordPress. Is that possible!?
  • ❌ I want to build an open-source CMS to rival WordPress.
  • ❌ I want a plugin developed to do all my accounting, site maintenance, online payments and security checkup for my WordPress website.

How to choose a WordPress outsourcing service

1- Begin small

If you’re new to outsourcing, it’s better if you start with small projects. You may face problems with outsourcing you didn’t expect and you were informed during your contractors sales pitch. It may take time for both of you to know each other’s needs and capabilities.

outsourcing WordPress development

If you’re considering a long-term relationship, starting small will help you minimize possible damages and errors and learn the best practices along the way. This is particularly true about the development projects where tight collaboration and in-depth knowledge of both parties is crucial for a successful collaboration.

2- Provide clear descriptions

Make sure to specify all the details and material your contractor requires to start your WordPress project. This changes depending on the project type but below might come in handy for common project types:

  • WP conversion > Well-organized design files with proper layer folder and naming conventions
  • Theme customization > Detailed list of requested functionalities – if a visual feature, possibly with an explanatory video.
  • Custom Design > Possible samples of design that you admire and reflect the design characteristics you want in your design. Also detailed brand guidelines.
  • Content management > Well-organized content that you want posted on your website such a text, images, video with details about publishing date, category and tags.

3- Consider the best price, not the cheapest

When it comes time to outsourcing, the cheapest price is not always the best deal. It’s the value/price ratio! Like we discussed earlier, there may be a dozen ways to do a specific thing in WordPress. If a candidate contractor offers a price slightly higher than others, try to ask them and figure what specific feature or capability makes them eligible for that.

If your project is just another ordinary WordPress conversion project, then anyone who knows Elementor and Photoshop can convert it. In other words, there is not high loyalty and quality standards for you or your client. This means that you’re better off considering a lower price. However if you have a special and loyal client who trusts you because you respect their values and brands, then you should make sure your outsourcing contractor shares those values as well so the final product you deliver to your client is coherent, consistent and seamless.

In which case you should not consider the low prices and be open to pay more for a team who aspires to high-quality standards and cares as much for your client as you do.

4- Work with good communicators

When outsourcing WordPress development, communication is maybe the most important factor to take into consideration after the value for price. The best teams to collaborate with are not those who have the best engineers or best-in-class designers, they are the best communicators. The most important factor that leads to a positive and progressive collaboration is communication, and without proper communication, your collaboration will be painful and will fail to produce satisfactory results.

outsourcing WordPress development

Make sure you know how you’ll communicate with your contractor team. Is it through a WhatsApp channel? Or an advanced briefing section built into their website? If you’re considering a long-term relationship with the contractor team, it’s good if you can establish a direct communication line and account manager who can directly interact with you.

Ideal white-label outsourcing teams offer different communication options such as phone calls, Zoom calls and briefing sections for their high-end and loyal clients.

5- Don’t proceed without a plan and written agreement

A risk factor of many outsourcing companies is that they are a group of coders and designers sitting in some unknown country behind computers and getting something done for you. You’re sharing critical information about your project, your business and your clients, so you should research the credibility of the team you are considering before starting working with them. 

Check to see if they have written and coherent terms of service. If they do, then study it carefully so you’re informed about possible incidents along the way.

Do you see your rights reflected in the agreement you sign? Do they have a refund or dispute policy? Do they accept your NDA terms? And so on.

Furthermore it’s best practice to use the briefing section you are granted to write down and document everything so it can be used in case it’s required in the future to refer to a specific part of the conversation or project. Conversations made over the phone or on a Zoom call might not be referred to in the future if necessary.

6- Find reliable partners – not doers

outsourcing WordPress development

An ideal team to get help from should be like any other team member, not an outside contractor just working behind the scenes delivering projects. If you want the best outcome from an outsourcing collaboration, you should foster a solid relationship that rewards both you and your contractor team and makes them as integrated into your team as your employed engineer or product manager. That is, of course, a mutual responsibility for both parties to achieve this level of trust and integration through offering each other the maximum value and mutual benefits.

What is WPDone?

Earlier this year, we rebranded our former custom modification subservice called Artbees Care into a brand new white-label WordPress Service called WPDone. WPDone is powered and operated by Artbees, the maker of the Jupiter X WordPress theme, and applies a decade-long experience with WordPress in delivering its clients’ projects.

outsourcing WordPress development

In WPDone, our goal is to become another member of your team – not just a contractor – and to build good products without our name on it. We helped achieve the highest quality standards, development technologies and aesthetics values for more than 11 global WordPress agencies from different continents within the scope of more than 600 WordPress projects. 

If you’re a high-volume WordPress freelancer or agency and are considering outsourcing WordPress development as part of a long-term collaboration with a white-label savvy WordPress team, then you can check out the WPDone Partners program for surprisingly good rates considering the high quality service you get.

How to Add Two-Factor Authentication in WordPress

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

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

Benefits

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

  • Stronger protection
  • Low cost
  • Easy to implement

Drawbacks

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

  • Vulnerabilities
  • Takes longer to log in
  • Maintenance

Common Types of Two-Factor Authentication in WordPress

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

Hardware Tokens

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

Software Tokens

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

SMS Text/Voice

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

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

Push Notifications

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

Biometric

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

Popular Plugins for Two-Factor Authentication in WordPress

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

Google Authenticator Plugin

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

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

Features

  • Fast setup
  • Usage of software to generate codes

Quick Setup

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

Two Factor Authentication Plugin

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

Features

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

Read more about this plugin here.

Quick Setup

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

Wordfence Security – Firewall & Malware Scan Plugin

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

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

Features

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

Read more about this plugin here.

Quick Setup

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

Wrapping Up

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

subscribe

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

Everything You Need to Know about WordPress Development Workflow

WordPress Development Workflow Featured

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

Local or remote development

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

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

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

Benefits of a local environment:

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

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

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

WordPress Development Workflow Flywheel

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

WordPress Development Workflow Mamp

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

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

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

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

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

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

Choosing a starter theme?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Best plugins for development

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

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

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

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

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

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

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

Version Control – No more cowboy coding

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

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

WordPress Development Workflow Feature

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

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

Best use cases for WordPress Version Control

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

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

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

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

WordPress Development Workflow VersionPress

WP Rollback – This only works for themes and plugins from 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.

WordPress Development Workflow Final

Final thoughts

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

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

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

subscribe

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

How to Restrict WordPress Website Content

Restrict WordPress Website Content Featured

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

Why would you need to restrict content?

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

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

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

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

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

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

Password protected pages

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

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

Restrict WordPress Website Content Password Protected

Under the visibility settings, there are three options:

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

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

Password protected pages/posts

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

Restrict WordPress Website Content Access

Marking pages/posts private

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

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

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

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

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

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

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

Restrict WordPress Website Content Community

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

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

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

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

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

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

Wrap up on how to restrict WordPress website content

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

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

subscribe

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

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

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

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

Built-in Shortcodes

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

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

Useful Ready-to-use Shortcodes

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

Using a Shortcode in WordPress

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

Use in Gutenberg (new WordPress editor)

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

Shortcode in WordPress Gutenburg

Use in TinyMCE (old WordPress editor)

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

Shortcode in WordPress Tiny

Use in Elementor

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

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

Shortcode in WordPress Elementor

Use in Sidebars/Widget Areas

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

Shortcode in WordPress Widgets

Use in the WordPress Menu

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

Use in Theme/Plugin Files

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

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

Different Methods to Create a Shortcode in WordPress

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

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

Using Plugins to Create a Shortcode in WordPress

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

Shortcoder Plugin

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

Features

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

Create a Basic Shortcode

1. Install and activate the Shortcoder plugin.

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

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

Shortcode in WordPress Shortcode

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

Shortcode Maker Plugin

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

Features

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

Create a Basic Shortcode

1. Install and activate the Shortcode Maker plugin.

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

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

Writing Codes to Create a Shortcode in WordPress.

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

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

1. Write the Shortcode Callback Function

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

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

2. Registering the Shortcode

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

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

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

add_shortcode( 'hello_wordpress', 'artbees_hello_wordpress' );

Shortcodes vs. Gutenberg Blocks

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

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

Summary

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

subscribe

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

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:

Custom Setting Page in WordPress 1

Note that WordPress automatically adds a Save Changes button.

Settings fields

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

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

Adding a new setting field

The usage of the settings_fields function is like

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

Custom Setting Page in WordPress 2

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

Registering custom settings in WordPress and saving values

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

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

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

add_action( 'admin_init', 'my_settings_init' );

function my_settings_init() {

    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
}

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

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

get_option( 'my_setting_field' );

subscribe

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

How to make WordPress Themes or Plugins Translation Ready

Translation Ready Themes Featured Image

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

  1. Create and load the text domain for your WordPress theme.
  2. Enclose the Translatable Text String with the WordPress gettext function.
  3. 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!😉

subscribe

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

How to Perform a WordPress Backup in Jupiter X with BlogVault

WordPress Backup Featured Image

Building a WordPress website with Jupiter X is like taking a walk in the park – it’s easy. But building a website isn’t where the story ends. Websites could suddenly crash or get hacked, which could leave you with a rapid decline in traffic and revenue. Bad things happen when you least expect it. Better to be safe than sorry, right? You need to get your site a WordPress backup.

Taking regular backups is the best way to ensure that you have something to fall back on when things go wrong. A simple restoration can get your website up and running in no time.

So all you need to do is to have a good backup solution. But how do you go about choosing one? What does an ideal backup solution offer?

Choosing a Good Website Backup Solution

There are several WordPress backup services to choose from, which makes it difficult to select the right one. You either end up making a wrong choice or worse: you don’t choose at all.

But identifying a good backup service is not as difficult if you know what to look for. The backup solution should be able to provide the following:

  1. Complete backups
  2. Incremental backups
  3. Multiple backups
  4. Real-time backups
  5. Backup storage
  6. Restoration
  7. Independent dashboard
  8. Customer support

1. Complete backups

Your website contains different kinds of data. There are posts, pages, images, videos, tables, settings and configurations that should be backed up. A backup solution must be capable of backing up all these types of data and ensuring that it’s safely archived.

2. Incremental backups

Breaking the data into small chunks not only makes it easier to backup but also makes sure that nothing is left behind. This is called backing up your website incrementally. Incremental backups are best for large sites that contain a lot of data. The risk of leaving data behind is much higher for large websites.

3. Multiple backups

An ideal WordPress backup solution will take multiple backups of the same version and then store it in different locations. It can be stored in the solution’s own server or on cloud storage services like GDrive, DropBox or on your local system. It should also secure the backup copies by encrypting them so that if someone lays their hands on your backup, the copy will be illegible.

4. Real-time backups

Some websites need more than daily backups. Let’s say, for instance, that you run a very active photography blog. New pictures are being added and dozens of people are commenting and buying your prints. You’ll need to take backups in real-time for such a dynamic website. Every single change made on the site has to be backed up instantly. Failing to do so will cause loss of valuable data, such as prints that visitors added to cart but didn’t order. In such cases, you’ll lose orders when disaster strikes.

5. Backup storage

Simply taking backups is not enough: the data must be stored in an accessible location. Sometimes backups are stored on the site server, which makes it impossible to access them on certain occasions like when you can’t access your hosting account. Not just that, the server suffers because it’s burdened with storing backups on top of performing its regular processes.

6. Restoration

There are times when you need to restore your website. Many solutions don’t offer a reliable way to restore backups. Failing to implement a complete restore is a common complaint among website owners. Select a backup solution that comes with a good record for website recovery.

7. Independent dashboard

In a worst-case scenario, performing a backup is your fall back option. But what if you can’t access your backups when you need them? If the backup plugin is accessible only from the WordPress dashboard and if you lose access to wp-admin, then you won’t be able to access your WordPress backup either. Having a completely independent dashboard enables you to retrieve backups even when you can’t enter your website.

8. Customer support

Customer support is a primary benefit for a paid tool. But not all paid tools offer good customer service. A good backup solution values your time by offering reliable and agile customer service. Responses must be quick and easy to understand.

With that, we have covered everything that makes a good backup service. BlogVault Backup Solution is a service that checks all the boxes. Trusted by over 400,000 websites, BlogVault is the most reliable WordPress backup and restoration solution. Learn more about what the solution offers here.

You can use BlogVault to backup your Jupiter X website. In the next section, we’ll demonstrate how.

How to Perform a WordPress Backup with BlogVault

Step 1: First, sign up and add your website to BlogVault. From the dashboard, select Add New Site and enter your website address.

WordPress Backup Step 1
Add your site by selecting ‘Add New Site’

Step 2: Next, install the plugin to your site. There are two ways to do this. You can automate the installation or do it manually. We’ll show you both.

WordPress Backup Step 2
You can install the plugin manually or automate the process.

Install the BlogVault plugin manually

WordPress Backup Download Plugin
To download the plugin, click on Download Plugin

Download the plugin from your BlogVault dashboard. Then go over to your website and upload the plugin by navigating to Plugins > Add New > Upload Plugin.

WordPress Backup Upload Plugin
Upload the plugin to your Jupiter X site.

Alternatively, you can install the plugin like any other WordPress plugin. Head straight to your website dashboard and then go to the Add New plugins page. Search for BlogVault in the Search bar and then install and activate the plugin.

Auto-install the BlogVault plugin

The benefit of auto-installing the plugin is that you don’t need to go to your website. Simply enter your site credentials (BlogVault doesn’t save your admin credentials) and select Install plugin. That’s it. The plugin will be installed on your site automatically, and the WordPress backup process will begin instantly.

WordPress Backup Automatic Install
Insert the username and password of your Jupiter X website.

The plugin will backup your entire website and store it safely. Since your website is being backed up for the first time, it’ll take some time. Sit back and relax. You’ll get a notification once the process is complete.

Conclusion

You should be able to rely on backups for any unforeseen situations. Whether you want a new backup service or plan on upgrading your old service, you need to verify whether it offers all the essential features.

In this guide, we explained all these features to be on the lookout for and showed you how to install BlogVault, a WordPress backup solution that’s one of the best out there. We hope you found our guide useful. If you have any questions, feel free to leave us a comment below.

subscribe

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

Understanding WordPress Hooks

WordPress, the most popular CMS (Content Management System) is known for its flexibility. It’s highly customizable, and making any changes is incredibly easy. One of the most important aspects of WordPress and its flexibility is WordPress hooks. In this post, we are going to explore what exactly a WordPress hook is, how it works and how we can use them.

Users are able to extend WordPress functionality by using plugins. WordPress.org has more than 55,000 plugins in its repository – many of which are free. There are some premium plugins hosted by WordPress.org as well.

So, even by looking at the plugin’s stats, we see that a lot of developers create plugins for WordPress. This is due to the flexible nature of the WordPress structure. So where do hooks come into play? They are an integral part of how plugins work with WordPress core.

What is a WordPress hook?

Let’s break it down. A WordPress hook will let you know that something is happening. In other words, a hook will let you run custom codes when loading a WordPress website to add, remove or modify certain functionality or data. You can do the following with a hook:

  • Executing a code to send a welcome email right after a new user has registered to the site.
  • Running a custom code to clear site cache after saving new changes in customizer.
  • Modifying the default admin footer text.
  • Changing the label of the “Register” button on the registration page.
  • Modifying the markup of the page right before the page loads.
  • Including new styles in certain conditions.

The main point of using hooks is that you don’t need to touch WordPress core files that are required by WordPress to work. If you edit any file in WordPress core, you’ll lose it after updating WordPress.

These are some basic examples of WordPress hooks. As previously mentioned, they work with certain functionality or data. So, there are two different types of WordPress hooks:

  • Actions
  • Filters

WordPress Actions

Action hooks can be used to add custom functionality when needed. For instance, imagine that you want to run a code to log the last login time for each user. You’ll need to run a piece of code that records the time right after a user logs into the site. So you’ll need to run an additional functionality at a certain time. In this case, we would have to use action hooks. Action hooks work with functionality – they are doing something new.

How do action hooks work?

Action hooks are similar to informing everyone that you want to do a specific thing such as saying, “Hey buds, I’ve just arrived” or “Bye guys, I’m leaving.” When you inform others, they are aware of what you did or what you want to do, and they can say something in response, remind you of something or react in any other type of way.

While WordPress is loading and reaches a specific point, it’ll let us know about it. So, you can run your codes to add specific functionality or to extend existing functionality.
Some examples of actions include the following:

wp_head When you reach the <head> tag, WordPress lets you know by running the wp_head hook. Remember it as a name. We will provide you with some codes and an explanation about how to use hooks.

publish_post This runs when a post is published or if it is edited and its status is changed to “published.” So, Imagine that you want to tweet a post automatically after publishing it to your WordPress site. This hook makes it easy for you to do it.

wp_footer This action hook is triggered near the tag. That means you are reaching the end of document markup. Many developers use this hook to include their javascript files to the footer of the page.

WordPress Filters

Photo by Luca Bravo on Unsplash

Filter hooks work with data. By data, we mean a simple text, HTML markups and even a PHP variable that could be the value of an option. This means that you can change an option value on the fly. Or you can change a certain text in the admin dashboard without editing WordPress core files. Also, filters could be used to modify multiple things at the same time. For example, you can add a new class name and data attribute simultaneously to the navigation menu items using a filter.

How do filter hooks work?

Filter hooks differ from action hooks. When you reach a certain code, WordPress allows you to make changes to something. Imagine that your child wants to go to school and right before going out, you put an extra book in their backpack. In this example, you’ve changed the content of the backpack and filtered it when you had access to it. Filters work in the same way. They will let you know that content is going to be printed or when an option is going to be used – and you’ll be able to modify it if you want.

Some real example of filters are:

login_erros This runs whenever an error is going to be shown to the user in the login page.

body_class This fires (runs) while generating the tag. Use this filter hook if you want to modify the class names of the body tag.

pre_delete_post This fires right before deleting a post. You may want to avoid sending them to the trash and delete them completely. This filter hook will be useful for you.

How to use WordPress hooks

We’ve covered the basics of WordPress hooks. It’s time to learn code and use actions and filters in the real world. In this section, we’ll see some new things such as Hooked functions, Hook priority and Hook arguments.

Basic WordPress hooks usage

add_action( ‘init’, function(){
     // Do something.
 } );
Code explanation:

add_action: This is a function from WordPress. You’ll need to use this whenever you want to register a new action hook (run an action).

init: This is the hook name. Each event has a unique hook name. You can find a list of existing WordPress hooks on the Plugin API/Action reference page.

function(): This is the callback. The code that you want to execute when reaching the event.

For filters, it is a bit different:

add_filter( ‘excerpt_length’, function( $value ){
     // Do something and change $value.
     return $value
 } );

add_filter: Same as actions, this is a function name from WordPress. You’ll need to use this whenever you want to register a new filter hook.

excerpt_length: Again, this is the hook name. Hook names are meaningful. So, while using excerpt_length you can expect that it will change the excerpt length of the post excerpt.

function(): This is the callback and the code that you want to execute in order to change something.

And the big difference with actions:

return $value

Filters need to return something. Why? Because using filters, you’re going to change something, not destroy it. If you don’t return, your variable/value will be missed. So, keep in mind, always return in filter callback.

Another way to implement this:

add_action( ‘init’, ‘my_callback’ );

 Function my_callback(){
    // Do something.
}

In this mode, we have separated the callback function instead of using an anonymous function. There is no difference.

Hook Priority

add_action( ‘init’, ‘my_callback_early’, 9  );
add_action( ‘init’, ‘my_callback_normal’, 10 );
add_action( ‘init’, ‘my_callback_late’, 11 );

The priority determines when the callback function will be executed in relation to the other callback functions associated with a given hook.

In the above example, my_callback_early is the first function that runs when reaching the init hook. After that, the my_callback_normal will run and at the end my_callback_late.

When there are multiple registered callback functions for the same hook with the same priority, the order of registering them will be used to running callback functions.

Hook Arguments

A callback function can take some arguments. For example, the excerpt_length hook will pass the current length as a parameter. So you have access to it in your callback function.

add_filter( ‘excerpt_length’, ‘my_custom_excerpt_length’, 10, 1);

function my_custom_excerpt_length( $length ) {
  $length = 50;
  return $length;
}

In the above example, 10 is the priority of the running callback, and 1 is the number of the callback function parameters. Because both of them are like default values, you can avoid writing them. The following code does exactly the same thing:

add_filter( ‘excerpt_length’, ‘my_custom_excerpt_length’ );

Practical Examples of WordPress Hooks

Add new admin menu and page:
function register_my_custom_menu_page() {
     add_menu_page( 'Custom menu page title', 'Custom menu label', 'manage_options', 'myplugin-settings.php', '', '
 dashicons-menu-alt3', 6 );
 }
 add_action( 'admin_menu', 'register_my_custom_menu_page' );
Change the excerpt length
function my_custom_excerpt_length( $length ) {
     return 35;
 }
 add_filter( 'excerpt_length', 'my_custom_excerpt_length', 999 );
Insert custom content after each post
function my_custom_post_footer($content) {
        if(!is_feed() && !is_home()) {
                $content.= "<p>Share your idea about this post in comments.</p>";
        }
        return $content;
}
add_filter('the_content', 'my_custom_post_footer');
Disable autosave
function my_prefix_disable_auto_save(){
    wp_deregister_script( 'autosave' );
}
add_action( 'wp_print_scripts', 'my_prefix_disable_auto_save' );
Change the login page message
function my_prefix_the_login_message( $message ) {
    if ( empty($message) ){
        return "<p>Welcome to this site. Please log in to continue</p>";
    } else {
        return $message;
    }
}
add_filter( 'login_message', 'my_prefix_the_login_message' );
Remove login error messages
function my_prefix_remove_login_errors( $error ) {
    return "Incorrect login information";
}
add_filter( 'login_errors', 'my_prefix_remove_login_errors');

Final Thoughts

Wrapping up, WordPress hooks are one of the most important concepts that allow us to develop plugins and add new custom functionality to WordPress. Again, don’t forget to return when using a filter hook ;).

In this article, we guided you through the basics of WordPress hooks, including what they are and how they work. We also gave you some examples of how they are used in code to add further functionality to your website.

In the comments section below, please share your experiences and thoughts with us!

subscribe

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

Creating A Brief For Your WordPress Developer: 8 Things To Remember

Creating a brief for your WordPress developer Featured Image

Writing a brief for your WordPress developer is something you must never overlook or discard as unnecessary. If you want to get a high-quality end product, you must be ready to put in some effort to phrase what you want this product to be. Here are the things to keep in mind when creating a brief for your WordPress developer.

Why Is It Important?

A brief for your WordPress developer is important for four main reasons:

  • It provides key details about what you want the developer to do and what you want the result to be.
  • It sets the tone of your project and gives a general idea of what it is that you have in mind.
  • It sets the timeframes and deadlines for the project describing when and what should be completed.
  • It specifies the requirements and additional features you might decide to add later on.

If your brief achieves all of these, then your WordPress developer will definitely know what you want from them and what they must do to get the results you need. Now, let’s get into the step-by-step guide.

1. General Project Information

The first section of your brief contains general project information. It functions as a kind of introduction to your document that aims to provide some of the key data about the client and the project.

First, include your personal details such as your full name, contact information, the company or organization you are representing, and so on. Anything that you consider necessary can be added. If you are not the client, then include the details of the person who you are working for and who will be the client.

Second, include the basic details about the project such as the project’s name, timeframes, and so on. Don’t go into much detail about any particular piece of information in this section as these will be discussed later on in your brief.

2. Goals & Estimates

The next section of your brief must contain the goals and estimates for your project. Think of what you want to achieve with this particular endeavor and then also include what your personal goals are if you are in charge of it.

Photo by Isaac Smith on Unsplash

In addition to that, talk about the problems that the project will solve. These can be both big and small, but make sure to include at least one problem. Also, include estimates for your project and what you think it will achieve that is not connected to solving problems.

If you haven’t set your goals yet, it’s a good idea to use a goal tracking app such as Aha! to do this and keep your aims in front of you at all times as well as check progress.

3. Target Audience

Creating a Brief for your WordPress Developer Target Audience
Photo by Austin Distel on Unsplash

The third section of your brief must contain the details about your target audience. If you haven’t researched this yet, then make sure to do it as soon as possible as this is a very important component of every successful project.

Describe such characteristics of your audience as its gender, age, occupation, location, interests, habits, and so on. Any relevant information will only be useful rather than a burden, so don’t be afraid to add something on top of that.

However, keep in mind that your audience may vary a lot and you may need to construct several customer personas. As long as you do this, you will be heading in the right direction with your project.

4. Detailed Project Description

This is the biggest section of your brief which goes into detail about every aspect of your project. Look back at your first section and elaborate on the points you made in it. You must be as precise and clear as possible. Otherwise, your developer won’t have a concrete picture of what you want and need.

If you don’t want to write your brief yourself, you can hire a professional from an online writing service such as Studicus to do this for you. Alternatively, you can ask only for this biggest part to be written for you and work on everything else yourself. If you decide to write your brief entirely on your own, make sure to check its grammar, spelling, and punctuation with the help of Grammarly.

5. Project Requirements

Right after the detailed project description, outline the project requirements. These include both functional and secondary requirements. Any tools, as well as resources, can also be added here in case you require those. Functional requirements are the ones that the project absolutely needs in order to be what you want it to be.

These include different features you want to be added and such. Secondary requirements are the ones that are not necessary right away and can be considered if there is enough time or resources for them. They serve as an additional advantage that your project may have in the future.

6. Timeline & Deadlines

Creating a Brief for your WordPress Developer Timeline and Deadlines
Photo by Alvaro Reyes on Unsplash

This section must include a timeline with all of the deadlines for your project. Even though you included a start and end date in the very first section of your brief, you must elaborate on it here and outline other dates. Make sure that you write about deadlines and timeframes for each stage of development. This will guarantee that the progress is steady and you can check back on how your developer is doing every once in a while.

Alternatively, you may want to ask your developer to report back on certain dates. You can also outline another timeline that can be used in case the first one fails due to an unexpected turn of events. This will work as a kind of a Plan B, so you don’t necessarily have to include it into the brief and can simply keep it for yourself.

7. Budget & Expenses

Creating a Brief for your WordPress Developer Budget and Expenses
Screenshot taken from Mint

The budget and expenses are always a sensitive topic for both sides. This is why you must treat this section with caution and make sure that all of the data you include here is as accurate as possible. Think of all the expenses you will have. If there are any additional ones that can happen out of the blue, describe them too as you wouldn’t want any surprises. You can use different apps such as Mint to help you keep track of your budget and manage your bank accounts at the same time.

8. Measures of Success

Creating a Brief for your WordPress Developer Measures of Success
Photo by Carlos Muza on Unsplash

The last section should include your measures of success. To put it simply, these are the standards that you will be comparing the result in order to check the project’s success. You must make them as realistic as possible, but not too high or too low at the same time.

You could say that these are similar to the second section of your brief where you mentioned your estimates. But unlike that section, this one should have more exact and concrete standards that you will stick to more seriously.

Final Thoughts on Creating a Brief for your WordPress Developer

In conclusion, writing a brief for your WordPress developer is definitely not as difficult once you know what it must include. Proper communication with your developer will ensure that both of you are aware of each other’s thoughts and intentions, so don’t hesitate to contact them if there is something you’d like to specify.

subscribe

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

Create a scrollable tab like the WebFlow website using Jupiter X

Scrollable Tabs Post Featured Image

One way to provide visitors to your website with a seamless experience is through creating a scrollable parallax tab similar to the WebFlow.io homepage. Creating a scrollable parallax tab will allow users to access much of your site’s content as soon as they land on your homepage.

Many of our users asked about how to go about building a scrollable tab, and we’re here to answer! And what’s even better is that the Jupiter X theme has endless possibilities that can help you create a similar tab (as seen below) by using a simple trick. If you’re also curious about how you can build this amazing tab using Jupiter X, read this article to the end.

WebFlow sample scrollable tab.

What we need to create a scrollable tab:

  • Jupiter X Pro theme and its Elementor page builder
  • Jet Tricks from the Jupiter X bundled plugins
  • Raven, an exclusive Artbees plugin to extend the functionality of Elementor

First of all, allow me to briefly explain the whole process. We won’t use any tab elements to represent this. Instead, we’ll use the Raven Navigation Menu element and anchor links (#tab1, #tab2 …) as the tab titles. Then, we’ll use multiple sections that have the same ID as the anchor links (so when you click on the menu items, scroll to those sections).

And in the end, we’ll add the Sticky effect to the column container of the menu navigation element using the Jet Tricks plugin. Then, we’ll proceed to write a custom CSS snippet to add a transition to the menu items and make them bigger when they are active. Before starting, make sure you’ve already activated the above plugins from Jupiter X -> Control Panel -> plugins.

So, let’s start by building our menus. Navigate to Appearance -> Menus and create a new menu. Then add your Custom Link items. Remember to use the anchor links like #tab1, #tab2 … as the menu item link.

Add menu items with anchor link hashtags to be considered as Tab titles.

We are now done with this part of the process. Let’s create a page, and do the rest. From the Pages -> Add New, create a new page and start editing with Elementor.

Edit the page with Elementor.

In Elementor, drop a Section into your page, and divide it into two columns. Then drop a Navigation menu to your left column, and add a CSS class to the navigation menu.

Scrollable Tab Screenshot 3 - Add a CSS class to the menu in order to avoid conflict while wiring CSS snippets.
Add a CSS class to the menu in order to avoid conflict while wiring CSS snippets.

The next step is to add a custom CSS to make each menu stay in one line and also to enlarge them when they are active. So, from the page settings (bottom left corner of the page), choose the Advanced tab and then add the following CSS snippet in the Custom CSS section (JX).

/* Add Transition to the items */
.custom_tab_titles li a {transition: 0.2s all;}

/*make the items bigger when they are active while having transitions */
.custom_tab_titles li .raven-menu-item-active {transition: 0.2s all;
    transform: scale(1.3); margin-left: 0.8em;}
    
/* put each menu in one line */
.custom_tab_titles li {clear: both; display: block; width: 100%;}
Scrollable Tab Screenshot 4 - Add CSS snippet to make the menu items vertically aligned and add transition to them on mouse hover.
Add CSS snippet to make the menu items vertically aligned and add transition to them on mouse hover.

Now add some Inner Section elements to your other column. We need to assign an ID equivalent to the menu anchors in order to make them scrollable when clicked.

Scrollable Tab Screenshot 5 - Add a different ID to each inner section equivalent to each anchor link hashtag
Add a different ID to each inner section equivalent to each anchor link hashtag.

Add as much of your content as you want to your scrollable tabs. Here, I kept it empty in order to make it more understandable. I also added a min-height 400px to each inner section. You can avoid it or add more height. The styling part completely customizable, and you can do what you want with it.

The last step is selecting the Column container of the Navigation menu and adding the Sticky behavior to it.

Scrollable Tab Screenshot 6 -
Follow the steps in order to enable the sticky option for the navigation menu. It will be considered as the Tab titles later on.

I also added some typography settings and color changes to the navigation menu in order to make the scrollable tab more eye-catching. Take a look at what we have now:

Scrollable Tab Gif 2 - The scrollable tab made by Jupiter X and Elementor.
The scrollable tab made by Jupiter X and Elementor.

One of the great things about using Jupiter X to create a scrollable tab is that you have the flexibility to create a tab exactly to your liking. You have the option of adjusting the margins and paddings to fine tune the tab, as well as to style every corner of your new tab.

Additionally, you’re not limited by how many tabs you can have: you are free to add more and style them in any way you see fit. Don’t worry about getting carried away in adding too many new elements as this has been tested on all modern browsers, and it’s compatible with all of them.

In this blog post, we’ve provided you with the details on how to create a tailor-made scrollable parallax tab, similar to what can be seen on the WebFlow home. We also illustrated how to create this awesome tab with Jupiter X Pro (and the Elementor page builder), Jet Tricks and Raven.

Do not hesitate to ask any questions you may have in the comments below.

subscribe

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

Different Ways to Add Custom Code Snippets in WordPress

Custom Code Snippets in WordPress Featured Image

Used by more than 60 million websites, WordPress is a popular, powerful and flexible Content Management System (CMS). One of WordPress’ valuable features is its extensibility architecture that allows users to expand WordPress features via plugins. In many cases, site owners need custom codes to improve the functionality of their website. In this way, custom code snippets plugins in WordPress can be a handy tool.

Sometimes when surfing the internet, we come across articles that explain how to add custom code snippets to the template files like index.php, footer.php or edit function.php files. These methods aren’t safe or recommended.

There are only two safe methods to add custom code snippets in WordPress:

  • Using plugins
  • Using the child theme

Adding Custom Code Snippets in WordPress Using Plugins

There are some plugins that allow you to add custom PHP, HTML, CSS and JavaScript codes in WordPress. In this article, we try to cover some of them with examples. Some of the plugins are listed below.

Insert the PHP Code Snippets Plugin

Custom Code Snippets in WordPress - Insert PHP Code Snippet

Using this plugin, we can add our PHP code conveniently to our pages, posts and widgets.

Features

  • Convert PHP snippets to shortcodes.
  • Insert PHP code easily using a shortcode.
  • Support for PHP snippet shortcodes in widgets.
  • Dropdown menu in TinyMCE editor to easily select snippet shortcodes.

Example

In this example, we want to display the number of content words in a post/page after a post or page.

1. After installing this plugin, click on PHPCode Snippet from the left sidebar of the admin page.

Custom Code Snippets in WordPress - PHP Code Snippets

2. On the new screen, click on the Add New PHP Code Snippet button.

Custom Code Snippets in WordPress - PHP Code Snippets 2

3. Set

  • Tracking Name: words-count
  • PHP code (this code displays the words count for a page or content post)
<?php

  function word_count() {
       $content = get_post_field( 'post_content', get_the_ID());
       $word_count = str_word_count( strip_tags( $content ) );
       return $word_count;
    }

  echo 'Words:', '  ' , word_count();

?>
Custom Code Snippets in WordPress - PHP Code Snippets 3

4. Click on the Create/Update button.

5. The plugin generates a shortcode as [xyz-ips snippet=”words-count”].

Custom Code Snippets in WordPress - PHP Code Snippets 4

6. Go to Posts > Add New. At the end of the text, insert the above shortcode.

Custom Code Snippets in WordPress - PHP Code Snippets 5

7. After publishing the post, we can see the number of words in the post.

Insert the HTML Snippet Plugin

custom code snippets in WordPress - Insert HTML Snippet

Inserting the HTML Snippet allows us to create shortcodes corresponding to HTML snippets. We can create a shortcode corresponding to any random HTML code such as JavaScript codes, video embedding codes, CSS codes, among others and use the same in posts, pages or widgets.

Features

  • Convert HTML snippets to shortcodes.
  • Convert Javascript codes to shortcodes.
  • Convert CSS codes to shortcodes.
  • Support for snippet shortcodes in widgets.
  • Dropdown menu in TinyMCE editor to pick snippet shortcodes easily.
  • Insert Adsense or any add codes.
  • Insert flash, videos, etc. to your posts, pages, and widgets.

Example

In this example, we want to generate a Google Translate button after our post.

1. Install the plugin, and go to XYZ HTML > HTML Snippets.

Custom Code Snippets in WordPress - HTML Code Snippets 1

2. On the new screen, click on the Add new HTML Snippet button.

Custom Code Snippets in WordPress - HTML Code Snippets 2

3. Set

  • Tracking Name: translate
  • HTML Code (this code generates the Google Translate button)
<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

4. Click on the Create button.

Custom Code Snippets in WordPress - HTML Code Snippets 3

5. The plugin will generate the shortcode as [xyz-ihs snippet=”translate”].

Custom Code Snippets in WordPress - HTML Code Snippets 4

6. Go to Posts > Add New. Set the title and content the add [xyz-ihs snippet=”translate”] at the end of the post.

Custom Code Snippets in WordPress - HTML Code Snippets 5

7. Publish the post, and you will be able to see the Google Translate button after the post.

Custom Code Snippets in WordPress - HTML Code Snippets 6

Simple Custom CSS and JS Plugin

Custom code snippets in WordPress - Custom Css

Customizing your WordPress site’s appearance can easily be done by adding custom CSS and JS code without modifying the theme or plugin files.

Features

  • Text editor with syntax highlighting.
  • Print the code inline or include it into an external file.
  • Print the code in the header or the footer.
  • Add CSS or JS to the frontend or the admin side.
  • Add as many codes as you want.
  • Keep your changes when you change the theme.

Example

In this example, we want to change the background color of the admin bar with the CSS snippet.

1. Install the plugin and go to Custom CSS & JS > Add Custom CSS.

Custom Code Snippets - Custom CSS 1

2. On the new screen, in the options section, check the Internal, Header, In Admin radio button and set the following:

  • Title : admin-bar-background-color
  • Code (code change background color of admin bar in the admin page)
#wpadminbar {
    background-color: rebeccapurple;
}
Custom Code Snippets in WordPress - Custom CSS 2

3. Click on the Publish button. You’ll be able to see that the admin bar background menu changed.

Custom Code Snippets in WordPress - Custom CSS 3

Code Snippets Plugin

Custom Code Snippets in WordPress - Code Snippets Plugin Banner

This is a powerful, simple and handy plugin that lets us add our PHP, HTML, CSS and JavaScript snippets to our websites.

Features

  • Providing a GUI interface.
  • Snippets can be activated and deactivated.
  • Categorize snippets with tags.
  • Snippets can be exported for transfer to another site.
  • Full-featured code editor.

Example #1

In this example, we want to disable standard widgets like Archives, Recent Posts, Recent Comments with the simple PHP snippet. The default page is similar to the image below:

Custom Code Snippets in WordPress - Code Snippets Plugin 1

1. Install the plugin, and go to Snippets > Add New.

Custom Code Snippets in WordPress - Code Snippets Plugin 2

2. On the new screen, set:

  • Title: Remove standard widget
  • Code (Remove Archives, Recent Posts, Recent Comments from the right sidebar of the homepage).
function unregister_default_wp_widgets() { 

    unregister_widget('WP_Widget_Archives'); 
    unregister_widget('WP_Widget_Recent_Posts'); 
    unregister_widget('WP_Widget_Recent_Comments'); 
}

add_action( 'widgets_init', 'unregister_default_wp_widgets', 1 ); 

3. Save and activate the snippet.

Custom Code Snippets in WordPress - Code Snippets Plugin 3

4. After reloading the homepage, you’ll be able to see that the Archives, Recent Posts, Recent Comments have been removed.

Custom Code Snippets in WordPress - Code Snippets Plugin 4

Example #2

In this example, we want to change the font size of the post with the JavaScript code.

1. Go to Snippets > Add New.

2. Set

  • Title: change the font size
  • Code ( Increase the font size when clicking on the post text and decrease font size when holding down the SHIFT key and clicking.)
add_action( 'wp_head', function () { ?>

<script        src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>

    <script>	
    $(document).ready(function(){
    $(".jupiterx-post-content").click(function(){
        if (event.shiftKey) {
            $(this).css({"font-size": "-=10%"});  
        } else {
            $(this).css({"font-size": "+=10%"});
        }
    });

  });

  </script>

<?php } );

3. Check the Only run on site front-end radio button and save it.

Custom Code Snippets in WordPress - Code Snippets Plugin 5

At the end, when clicking on the post text, the font size will have been changed.

Custom Code Snippets in WordPress - Code Snippets Plugin 6

Adding Custom Code Snippets in WordPress Using Child Theme

In WordPress, a child theme is a sub-theme that inherits all the functionality, style and features from the parent theme. The child theme is a safe way to change or modify the parent theme without modifying parent theme files.

Example

Let’s add our default content to the WordPress editor.

Our default content: “This is some custom content. I’m adding it to the post editor because I hate re-typing it.”

1. Active the child theme on your site (for more information, read this article.)

2. Go to Appearance > Editor.

Custom Code Snippets in WordPress - Child Theme 1

3. Open the functions.php file.

Custom Code Snippets in WordPress - Child Theme 2

4. Add the below code at the end of functions.php, then update it.

add_filter( 'default_content', 'my_editor_content' ); 

  function my_editor_content( $content ) { 
    $content = "This is some custom content I'm adding to the post editor  because I hate re-typing it."; 
 
    return $content;
}
Custom Code Snippets in WordPress - Child Theme 3

5. After modifying functions.php, go to Posts > Add New or Pages > Add New. You’ll be able to see that our default text has been added to the editor.

Custom Code Snippets in WordPress - Child Theme 4

Conclusion

In this article, we first introduced several plugins for adding custom code snippets in WordPress. We also included some examples on how to use HTML, CSS, JavaScript and PHP snippets using the plugins.

Finally, we showed how to add custom code snippets in WordPress with the child theme. Feel free to share your experience with us in the comments.

subscribe

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

How to Do A/B Testing to Troubleshoot the Theme Issues with Jupiter X

A/B Testing Featured Image

What do you do when you face a problem using any of your tools? Some people stop using them entirely, while some try to fix it to avoid having to replace a perfectly good tool. But how do you fix something when you don’t know its mechanism? The answer is simple: Compare it with a fixed version of your tool and see which part is having the issue.

What is A/B testing?

This is how the so-called A/B testing technique can be used to troubleshoot an issue. It doesn’t matter if your tool is a tangible object, virtual machine, or software You can use this method to troubleshoot and solve the problems you encounter. You probably did it before without knowing that your using the A/B testing strategy, but let me give you some examples so you understand it better:

  • The moment that you decide to set up camp in the forest and pitch your tent, you are actually doing an A/B testing. You are always comparing between different locations and tents. Should I put my tent here or there? What will happen if I place it here? How do the other tents look? Are their campsites better than mine? You are pretty much using A/B testing at that moment to find and examine the best location available for your tent.
A/B Testing Tent
  • The moment that a laboratory scientist compares between normal and healthy samples to give you the results of your blood test, he/she is using A/B Testing.
A/B Testing Lab

The moment that you are in a clothing store and testing the clothes to see which one suits you better, you are doing an A/B Testing.

A/B Testing Clothes

There are dozens of other examples of the concept. You basically used this method a lot in your daily life to troubleshoot an issue.

In digital marketing, A/B Testing is the perfect method to measure the impression you make on your users and increase your sales by collecting and analyzing the statistics of different marketing campaigns.

Let’s see how we can use it to troubleshoot an issue with your website. The principle and method are the same. You need to compare your website with a perfect version of it or with the design you provided (PSD) to be able to detect the issues.

Notice: Always do your testings over a staging website and keep a full backup before starting your tests.

Provide the perfect look

The key point here is to have a perfect non-issue-ish version of your website. Whether it’s a PSD version or it’s a completed website, you need something to compare with your problematic website. Otherwise, detecting the issue will be hard. Keep the perfect look open on a different tab on your browser or in your Photoshop software. You will need it for the next steps.

If you had a website that was previously available but recently got issues and you don’t have a backup or screenshot from it, you may use Archive.org to see how your website looked like back then.

A/B Testing Perfect Look

Check the error logs

The first thing you should do is to use the browser Developer tools. Developer tools will help you detect the problems by providing debug tools and consoles. Hover the mouse on the different DOM elements in the Elements tab to see the size and details, and compare them with the other tab. It will help you detect the difference and then you will get one step closer to resolving the issue. Also, for the Javascript issues, you can compare the Browser Console tabs to see if you have any new errors in the problematic page or not.

A/B Testing Error Logs

Apply a change and compare again

This is a repeating task. You need to continuously compare the changes on your staging website and see if it helped or not. When I’m talking about the changes, I mean deactivating plugins one by one, switching the themes, updating WordPress (or other CMSes if you are using them), and even reconfigure your web host settings. Issues come from different places, so you need to perform the changes from different places to see if it’s related to your problem or not.

The thing is, the better you know the mechanism, the smarter you can troubleshoot an issue. For example, if a section background color is not working correctly, the reason cannot be from the webserver configuration (unless it’s a caching issue). Or when you have a server error on your page, it may not be related (or barely related) to the color configurations of your theme at all.

Sometimes, the issue goes further and comes from the Database or third-party API. So, you may need to reset your database and see if it helps or not. In a nutshell: You need to check everything that involves your website to be able to detect an issue.

Here is a list of things were common issues usually come from:

  • Web hosts and servers configurations. You should check the server requirements of your theme and plugins and make sure it meets the minimum requirements.
  • Outdated core CMS (WordPress), theme and plugins
  • Firewalls or security plugins.
  • Plugin conflicts, like multiple caching plugins which will conflict with each other
  • Misconfiguration of plugins, such as forcing SSL which should be done carefully
  • Misunderstanding or using the functions in an inappropriate way, like using a popup trigger on your burger menu icon (side note: Yes, it happened to some users already) which triggers weird popups as you trigger the menu
  • Customizing the codes, whether they are CSS or JS customizations, or even if it’s your child theme and you did change the theme files inside your child theme
  • Database corruptions or invalid data in the database

It’s better that you apply the changes you think may help, step by step, and see if they work.

Isolate the problem

While you are doing your A/B testing, you are also isolating the problem to the point that you find the reason for the issue and resolve it. When you find the problem, you did the job! The faster you isolate the problem, the sooner you get to the answer.

Here are some major testing tips which will help you get to the root of the issue faster:

  • Deactivate your plugins. If it did resolve the issue, you know that it’s a plugin conflict. Now, you have to activate the plugins one by one to see which one triggers the issue.
  • Switch the theme. Sometimes, a good starting point is to see if the issue is happening because of using your current theme or not. Switch to your parent theme if you are using a child theme, and switch to another theme if you don’t have a child theme. In case the issue resolves itself, you at least know that it’s coming from your theme.
  • Switch to another web host. Sometimes, it’s faster to move your whole website to another web server and see if you still see the issue. It’s especially good for when you have permission or caching issues. If your issue was resolved by moving your website to a new web host, then the problem is your previous web hosting service.
  • Change your browser, device or network. It happens sometimes that your browser, device, or even your ISP causes issues. Also, it’s better to deactivate your browser extensions as much as you can because some extensions such AdBlockers may cause some conflicts with parts of your website.

If none of the above helped, you can isolate more by removing the content from your pages or deactivating headers, footers and block sections. These will help you identify issues with your content if you had any.

Software and tools for A/B Testing

Although the best tools to troubleshoot an issue are your personal computer, a browser, and developer tools, each issue requires its own tool or service. Imagine that your SEO rank has dropped and you want to find the issue. What tools would you need? Probably, you will need your Google Search Console, or Alexa and Google Analytics.

Furthermore, each issue requires its own debugging tools. There are plenty of software and services, free and premium, which can help you troubleshoot an issue and also help you do automatic testing.

Here, I listed some of them:

  • BrowserStack Automate. It gives access to 2000+ real mobile devices and browsers, which include real iOS and Android devices, Chrome, IE, Firefox, Safari, and Edge. You can set a bunch of automatic testing tasks with different conditions and get results by Text Logs, Selenium/Appium Logs, Video Recordings, Screenshots, Console Logs, Network Logs, and more.
  • Screener.io. Although this is a good tool for automated testing, it’s Screen Overview function is also a great tool to find differences between two versions of your page.
  • WinMerge.org. It’s a diff checker tool that will allow you to find the difference between two versions of texts. You can use this to spot the differences between page contents, page sources, and even images!
  • GTMetrix.com is a performance analyzer. Open two tabs of the same website and apply your changes to your website. Then, retest on one of the tabs and do your performance A/B testing with it.
  • WordPress logger, debug and troubleshooting tools such as Debug Bar and its Add-ons. They can be considered as A/B testing debug tools as they provide a set of logs. You can then observe them and compare with different scenarios while doing your A/B testing in order to isolate and find the issue.

Conclusion

As mentioned, A/B testing is a method that you are using a lot in your daily life. You can use it to troubleshoot your website issues, too. Every tool you are using to check your website and debug its issues can turn into an A/B testing tool. It’s just about the way you’re using your tools.

subscribe

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

How To Create WordPress Custom Admin Pages

WordPress, the world’s most popular CMS is also quite beloved by developers. Among many of its possible customizations and flexibilities that can be pointed out is extending the admin side of WordPress. In this post, we will show you how to use WordPress custom admin pages to bring more options for the user.

What is WordPress Custom Admin Pages?

The WordPress admin dashboard is the first page you’ll see after logging in. Using the side menu, you can navigate to other admin pages like Appearance, Plugins, Settings, Users, etc.

You may also see new menu items after activating a theme or a plugin that redirects you to a new admin page. It can be a settings page for the plugin, control panel of your theme, a page to show the status of your site or even a document page. The custom admin page is a very helpful feature which allows the developer to extend admin rights with new options.

How to Add WordPress custom Admin Pages

In order to add a custom admin page in WordPress, we need 2 things:

  1. An admin menu (add_menu_page function)
  2. Page content (custom function)

In order to add a new admin menu item, we can use the following function:

add_menu_page( string $page_title, 
string $menu_title, string $capability, 
string $menu_slug, callable $function = '', 
string $icon_url = '', int $position = null )

Let’s dive into each item to learn what they are.

1. $page_title The text to be displayed in the title tags of the page when the menu is selected. Choose a meaningful page title. For example, if your custom admin page is an options page for the plugin, it could be “My plugin options”. Note that it should be translatable. So use _ function like the following example: _( ‘My Plugin Options’, ‘my-plugin-textdomain‘)

2. $menu_title The text to be used for the menu.

3. $capability The capability required for this menu to be displayed to the user. For example, if it contains some general options for the site, manage_option could be the best choice. Just set it carefully to avoid any possible security issue.

Check out the WordPress Roles and Capabilities page and see what the proper capability is for your custom admin page.

4. $menu_slug The slug name that refers to this menu. It should be unique for this menu page and only include lowercase alphanumeric, dashes, and underscores to be compatible with sanitize_key(). This will be used as a parameter in the URL of your custom admin page as it’s shown in the picture.

5. $function The function to be called to show the output content for this page. For a simple example, we can use the following code to show a header in the admin page:

function my_admin_page_contents() {
	?>
		<h1>
			<?php esc_html_e( 'Welcome to my custom admin page.', 'my-plugin-textdomain' );
		</h1>
	<?php
}

6. $icon_url The URL of the icon to be used for this menu. You can use an image, encoded SVG, or dash icons.

  • In order to use an image, simply pass the URL of the image.
  • If you want to have an icon like WordPress defaults, which has a different color on hover, you can pass an encoded SVG file. The http://b64.io/ can convert your SVG file to base64 encoded data. After uploading your SVG, simply copy the link that starts with data:image/svg+xml;base64, and paste it.
  • You can use existing WordPress icons. Find a proper icon from WordPress Dashicons page and pass the class name like dashicons-schedule as icon URL argument.
  • Also, you can use none value to leave div.wp-menu-image empty, so an icon can be added via CSS.

7. $position The position in the menu order should appear. Here is the list of numbers of default admin menus:

  • 2 – Dashboard
  • 4 – Separator
  • 5 – Posts
  • 10 – Media
  • 15 – Links
  • 20 – Pages
  • 25 – Comments
  • 59 – Separator
  • 60 – Appearance
  • 65 – Plugins
  • 70 – Users
  • 75 – Tools
  • 80 – Settings
  • 99 – Separator

So, if you want to show your menu after Dashboard, you should use 3.

In the following table, you can see a piece of brief information about each item.

Add_menu_page arguments

WordPress Custom Admin Pages Arguments
WordPress Custom Admin Pages 1

Putting it all together, you’ll have:

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

You should know that it is possible to add a submenu to existing menus or newly added menu using the following functions:

  • add_posts_page Adds a submenu under Posts menu
  • add_pages_page Adds a submenu under Pages menu
  • add_media_page Adds a submenu under Media menu
  • add_comments_page Adds a submenu under Comments menu
  • add_theme_page Adds a submenu under the Appearance menu
  • add_plugin_page Adds a submenu under Plugins menu
  • add_users_page Adds a submenu under Users menu
  • add_management_page Adds a submenu under Tools menu
  • add_options_page Adds a submenu under Settings menu

And all of them are a wrapper of add_submenu_page function, so we use them in the same way:

add_submenu_page( string $parent_slug, string $page_title, 
string $menu_title, string $capability, 
string $menu_slug, callable $function = '' );

And that’s it. We have a custom admin page. But, what about adding custom styles and scripts for its content?

Adding Styles and Scripts to WordPress Custom Admin Pages

Let’s see how we can put styles after adding page content:

function load_custom_wp_admin_style($hook) {
	// Load only on ?page=mypluginname
	if( $hook != 'toplevel_page_mypluginname' ) {
		 return;
	}
	wp_enqueue_style( 'custom_wp_admin_css', 
plugins_url('admin-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

The above code will load admin-styles.css file only in the mypluginname page. If you wonder why we should do this, the reason is that loading styles in all admin pages can cause unwanted changes in other admin pages. For example, you don’t want to change the size of texts in the dashboard.

If you’re unsure what your $hook name is, use this to determine your hook name. And then, change it to the code below.

function load_custom_wp_admin_style( $hook ) {
	wp_die( $hook );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

Note: Don’t use wp_die while you’re editing a file from the plugin editor. It can cause you to lose access to the admin page until you remove it.

You can also use default registered styles in WordPress, like this:

function load_custom_wp_admin_style( $hook ) {
	// Load only on ?page=mypluginname
	if( $hook != 'toplevel_page_mypluginname' ) {
		 return;
	}
	// Load color picker styles. 
	wp_enqueue_style( 'wp-color-picker' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

In the above code, we are not specifying any URL for the style file because it has already been registered once, and WordPress knows it. By registering a style file, you introduce it to WordPress without loading it. And then, you can load it by using a style handler name anywhere in the code. Have a look at the following code:

function register_my_plugin_styles() {

wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );

}



// Register style sheet.

add_action( 'admin_enqueue_scripts', 'register_my_plugin_styles' );



function load_custom_wp_admin_style($hook) {

// Load only on ?page=mypluginname

if( $hook != 'toplevel_page_mypluginname' ) {

return;

}

// Load style

wp_enqueue_style( 'my-plugin' );

}



add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

Same as above, we can load custom scripts in admin pages:



function register_my_plugin_scripts() {

wp_register_script( 'my-plugin', get_stylesheet_directory_uri() . 'https://d34b8fs2z18t5a.cloudfront.net/plugin-scripts.js', array( 'jquery' ) );

}



// Register style sheet.

add_action( 'admin_enqueue_scripts', 'register_my_plugin_scripts' );



function load_custom_wp_admin_scripts($hook) {

// Load only on ?page=mypluginname

if($hook != 'toplevel_page_mypluginname') {

return;

}

// Load style

wp_enqueue_script( 'my-plugin' );

}



add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_scripts' );

There are a lot of JavaScript libraries included in WordPress that you can use. There is also a list of default scripts included and registered by WordPress here.

Wrapping It Up in a Plugin

In this section, we put all codes in a single file, which you can install as a plugin to add new WordPress custom admin pages.

<?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>

<?php

}



function register_my_plugin_scripts() {

wp_register_style( 'my-plugin', plugins_url( 'ddd/css/plugin.css' ) );

wp_register_script( 'my-plugin', plugins_url( 'ddd/js/plugin.js' ) );

}



add_action( 'admin_enqueue_scripts', 'register_my_plugin_scripts' );



function load_my_plugin_scripts( $hook ) {

// Load only on ?page=sample-page

if( $hook != 'toplevel_page_sample-page' ) {

return;

}

// Load style & scripts.

wp_enqueue_style( 'my-plugin' );

wp_enqueue_script( 'my-plugin' );

}



add_action( 'admin_enqueue_scripts', 'load_my_plugin_scripts' );

And the final result will be like this:

In the next post, we will show you how to add custom settings to WordPress Custom Admin Pages, how to process forms, and how to make them secure.

subscribe

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

How to create custom 404 pages with Jupiter X

how to create custom 404 pages with Jupiter X featured image

Sometimes, when we surf the internet, we encounter a 404 page (Page Not Found). But, what exactly does it mean? A 404 page is displayed when we want to see a page that does not exist. We may follow a broken link or type an incorrect link so the server responds to the browser request with an HTTP 404 code, hence, we see a 404 page.

For all Content Management Systems (CMS) and websites, there’s a default 404 page that’s displayed on appropriate situations. In this article, we’ll show you how to create custom 404 pages with Jupiter X, and how to improve and customize them the best way.

Key points to have a better 404 page

We can add some helpful sections in a 404 page to improve the usability of the page. In this article, we’ll show you how to optimize sections of your 404 page. Here are some of the things you can do:

  • Display recent posts/portfolios
  • Add a call to action button
  • Add a search form

How to customize default 404 page

Jupiter X is backed by an extremely powerful API for customizations. For developers, it offers lots of opportunities to customize the look and feel of different sections of Jupiter X. Let’s explore some ideas on how to customize Jupiter X’s default 404 pages in a child theme.

We must add our codes in the functions.php file of the child theme. All the codes need to be added inside the following function so that it will only affect the 404 pages.

/**
 * Modify the 404 page.
 */
add_action( 'wp', function() {
    if ( ! is_404() ) {
        return;
    }

    // Add codes here.
} );

By default, the 404 page looks like the one below. Later, at the end of the section, you can see the customized one, after some tweaking.

how to create custom 404 pages with Jupiter X 1

Remove sections from page

Because not all 404 pages require a header, footer and title bar. We can clean the page by removing them.

…

// Remove header.
jupiterx_remove_action( 'jupiterx_header_partial_template' );

// Remove title bar.
jupiterx_remove_action( 'jupiterx_main_header' );


// Remove footer.
jupiterx_remove_action( 'jupiterx_footer_partial_template' );

… 

Change the title and description

Almost all of Jupiter X’s texts are changeable via the API. For this page, let’s change the title and description.

… 

// Change title.
add_action( 'jupiterx_no_post_article_title_text_output', function() {
    return 'Ooops! page not found.';
} );


// Change description.
add_action( 'jupiterx_no_post_article_content_text_output', function() {
    return "We can't seem to find the page you're looking for.";
} );

… 

Change layout

There are also different layouts in Jupiter X. In this case, let’s set the page to full width.

…

// Remove the sidebar.
add_filter( 'jupiterx_layout', function() {
return 'c';
} );

…

Add a graphic

Graphics play an important role to get the site visitor’s attention, so why not use a nice 404 graphic in our custom 404 page? This graphic is downloaded from the Drawkit website.

But first, we need to add the graphic to the child theme, so we can add it under the assets/img folder. If the img folder is missing, you can easily create it yourself. 

how to create custom 404 pages with Jupiter X 2

Now, we can add the graphic to the 404 page.

… 

// Add the graphic before the title.
add_action( 'jupiterx_post_title_before_markup', function() {
        echo '<img class="jupiterx-child-custom-404-graphic" src="' . 
get_stylesheet_directory_uri() . "/assets/img/error-404-colour.svg" . '"
 alt="Custom 404 graphic" />';
    } );

… 

Add some styles

The styles and scripts can easily be added in the child theme. To improve the design, we can add some CSS codes in assets/less/style.css

.error404 {
   text-align: center;

   .jupiterx-main {
       background-color: #f3f2f2;
   }

   .jupiterx-main-content .row {
       height: 100vh;
       align-items: center;
   }

   .jupiterx-content {
       max-width: 700px;
       margin: 0 auto;
   }

   .jupiterx-child-custom-404-graphic {
       max-width: 500px;
   }

   .jupiterx-post-title {
       margin-top: 2rem;
   }
}

How to create a 404 page in Elementor

Elementor allows us to build any layout so let’s use it to create a custom full width 404 page. The final page will look like the following image.

how to create custom 404 pages with Jupiter X 3

Create a new page

1. Create a new page from Pages > Add New menu in WordPress left sidebar then publish the page

how to create custom 404 pages with Jupiter X 4

2. In the page, set the Template to Elementor Canvas from Page Attributes. Update the page and click on Edit with Elementor button.

how to create custom 404 pages with Jupiter X 5

Add a new section in Elementor

1. Add a new Section and select the first structure.

how to create custom 404 pages with Jupiter X 6

2. Edit the section. On the Layout tab, set the following settings.

how to create custom 404 pages with Jupiter X 7

3. On the Style tab in the Background section set the following settings. You can download the image from Unsplash site for free.

how to create custom 404 pages with Jupiter X 8

Add headings in Elementor

1. Add a Heading element. On the Content tab, set the following settings.

how to create custom 404 pages with Jupiter X 9

2. On the Style tab, set Color to rgba(255,255,255,0.58).

3. On the Style tab, set Typography settings as follow.

how to create custom 404 pages with Jupiter X 10

4. Add other new Heading elements. Add the following text to in the Content setting:

Oops, we can not find the page you are looking for

5. On the Style tab, set Text Color to #ffffff.

6. On Advanced tab, set the following settings.

how to create custom 404 pages with Jupiter X 11

7. Add other new Heading elements. Add the following text to in Content setting:

– You may have mistyped the address or the page may have moved.

8. On Style tab,set Text Color to #ffffff.

9. On the Style tab, set Typography as follow.

how to create custom 404 pages with Jupiter X 12

10. On the Advanced tab, set the following setting.

how to create custom 404 pages with Jupiter X 13

Add a call to action button in Elementor

1. Add a Button element to page.

2. Edit the Button. On the Content tab in the Button section set the following settings.

3. On Style tab in Button section, set Text Color to #ffffff, set Background Color to rgba(153,76,0,0.53) and set Border Color to #e2574d then set the following settings.

Add recent posts/portfolios in Elementor

1. Add a Posts element from Raven elements to page.

2. Edit the Posts. On Content tab set the following settings.

3. On the Style tab in Post Title section, set the Color to #ffffff then set the following setting.

4. On Style tab in Excerpt, CTA Button sections, set Color to #ffffff.

Update the page

We are done with the custom 404 page, let’s update the page to save our changes.

How to assign custom 404 page in the customizer

To assign our page in customizer goes to Appearance > Customize in the left sidebar of the WordPress admin page.

1. In Customizer click on Pages.

In a new section click on 404 menus to open a popup, in the popup on Setting tab choose your page on Template dropdown.

3. Click on Publish button on top of Customize page.

NOTE: If you can’t see your page in Template dropdown perhaps you have not published your page. Go back to your page and hit the Publish button.

Common Issue

There are some common issues in WordPress 404 pages. In this section, we explain an issue and its solution.

Posts/pages returning 404 error

The problem may be related to permalinks cache. To fix the issue go to Permalinks settings (WordPress Admin > Settings > Permalinks) then click on the Save Changes button. In most cases, it solves the issue.

Conclusion

In this tutorial, we explained how to create custom 404 pages with Jupiter X in Elementor. In customizing default 404, you learned how to use Jupiter X actions and filters to modify HTML, attributes, and texts. In creating a custom 404 page via Elementor, we learned some features of Elementor and assigning the page in Jupiter X. If you have any questions please let me know in the comment section below😉

subscribe

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