We’ll guide you through the steps to limit post revisions in WordPress, without turning to specific plugins.

Understanding WordPress Post Revisions

Post revisions, a core feature of WordPress, allows you to undo changes and revert to previous versions of your posts or pages. For every draft in progress, WordPress automatically generates a temporary revision (known as an auto-save) every 60 seconds. It supersedes older versions with these new auto-saves.

Alongside auto-saves, WordPress creates permanent revisions each time a user hits save, update, or publish. These permanent revisions are stored in the WordPress database and can be managed from the post-edit screen.

Why Would You Limit Post Revisions?

Limiting post revisions does not necessarily mean you’re capping your site’s performance. WordPress intelligently excludes post revisions from the database calls on the front end, only including them on the post-edit screen or while browsing revisions.

However, having a large number of post revisions can cause your WordPress database to become bulky, and although it won’t affect your site’s performance, it may make you feel a bit disorganized. Keeping your database clean and neat is good practice and can make your backend operations smoother.

The Manual Approach

Now, let’s jump into how you can limit post revisions manually in WordPress without the use of plugins.

Restricting the Number of WordPress Post Revisions

WordPress enables you to control the number of revisions retained for an article. To set a limit, you’ll need to add a specific line of code to your WordPress site’s wp-config.php file.

define( 'WP_POST_REVISIONS', 7 );

In the above code snippet, replace “7” with the desired number of revisions you wish to store for each post. Remember to save and close the file after making your adjustments.

How to Completely Turn Off WordPress Post Revisions

If your objective is to entirely disable post revisions, WordPress allows for this as well. By incorporating the following line of code into your wp-config.php file, you can turn off the post revision functionality:

define('WP_POST_REVISIONS', false );

Specifically, this command will deactivate the post revisions feature on your website. However, it’s crucial to understand that WordPress will continue to preserve one auto-save and one browser-stored revision despite this change.

Wrapping Up

Fine-tuning how post revisions are handled in WordPress can lead to a tidier database and a more streamlined content production process. It’s worth noting that manipulating core files requires a basic level of comfort with code or additional guidance. For related WordPress management topics, feel free to check out our guide on managing widgets in your WordPress dashboard.

Understanding Widgets

Widgets are elements you can include in your WordPress site’s sidebars or other widget-ready areas. WordPress includes default widgets, and plugins may introduce more. All these widgets can be managed through the Appearance » Widgets screen in your WordPress dashboard. However, an excess of unused widgets can lead to a messy widget screen. To make your dashboard more navigable, consider disabling those you don’t need. For an in-depth look at managing widgets, you can explore the WordPress official documentation.

Manual Widget Removal from WordPress Dashboard

For the quick and temporary cleanup of your dashboard, WordPress allows you to hide widgets that you don’t frequently use. Follow these steps to hide widgets:

1. Log into your WordPress Dashboard.
2. Locate the “Screen Options” button at the top right corner of the screen and click on it.
3. Uncheck the boxes beside the widgets you want to hide.

While this method doesn’t eliminate the widgets entirely, it does make them invisible from your view. Other users can still enable these widgets from the Screen Options panel.

Programmatic Widget Removal from WordPress Dashboard

For a more lasting cleanup, WordPress provides a way to get rid of dashboard widgets completely, preventing other users from turning them back on. This involves adding a code snippet to your theme’s functions.php file or to the site-specific plugin you’re using. Here’s the code snippet:

function clear_dashboard_widgets() {
global $wp_meta_boxes;

unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_drafts']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}

add_action('wp_dashboard_setup', 'clear_dashboard_widgets' );
}

The function above targets and removes the widgets listed. If there are certain widgets you wish to retain, simply remove the corresponding line from the code.

To customize this further, you can add the following function to the functions.php file to restrict the dashboard widget removal to only non-admin users:

if (!current_user_can('manage_options')) {
add_action('wp_dashboard_setup', 'clear_dashboard_widgets' );
}

Concluding Remarks

Having a neat and organized dashboard is a significant step towards more efficient WordPress management. Discarding unnecessary widgets tailors your dashboard to your exact needs, fostering a more effective and enjoyable user experience.

Aside from decluttering your dashboard, there are other optimization steps you can take to bolster your website’s performance and security. For instance, hiding your WordPress version can contribute to creating a more secure WordPress environment.

We hope these tweaks will help you maintain a clean and efficient dashboard, helping you focus on what truly matters: creating outstanding content.

Why Hide the WordPress Version?

By default, WordPress discloses its version information on your site. While it’s a helpful detail for developers, it may provide potential hackers with a road map to your site’s vulnerabilities. If they’re aware of the version you’re running, they can tailor their attacks accordingly. Hence, obscuring this information can be an essential part of your security strategy.

Incomplete Solutions and Their Limitations

You might find suggestions to edit your theme’s header.php file to eliminate the version number:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

However, each time you update your theme, this change will be overridden, and the version number will reappear. Consequently, it’s a fleeting solution at best.

Another commonly recommended approach is to inject this code into your theme’s functions.php file or a specific plugin:

remove_action('wp_head', 'wp_generator');

While this will mask the version number in the site’s header, it won’t do so in your RSS feeds, making this solution incomplete.

A Better Solution: Hiding the Version with Code

For a more holistic approach, you’ll want to hide the WordPress version from both your header and RSS feeds. To achieve this, you can use this function:

function remove_wp_version() {
   return '';
}
add_filter('the_generator', 'remove_wp_version');

You can add this code to your theme’s functions.php file. It effectively ceases the broadcasting of the WordPress version, making it much more challenging for hackers to tailor their attacks.

Beyond Hiding the Version: Other Security Measures

Hiding your WordPress version represents only one facet of your site’s security. Other key steps include regularly updating your WordPress site and utilizing strong, unique passwords.

For more concrete security practices, consider restricting user access according to roles, implementing two-factor authentication, using secure FTP to transfer files, and making sure to use trusted themes and plugins.

Remember, maintaining website security isn’t a set-and-forget task. It’s crucial to stay current with the latest threats and to adjust your protective measures as needed.

Moreover, while focusing on security, don’t neglect website performance. An action as simple as disabling the emoji autoload function can significantly boost site speed.

Wrapping Up

Ensuring your website’s security is a continual task. As your site grows, so does the potential pool of threats. Each step you take – whether it’s regularly updating WordPress, hiding its version number, or implementing other security practices – contributes to a more secure environment.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month! DOWNLOAD NOW

What is Emoji Autoload in WordPress?

Emojis, those fun little icons we often use in our digital conversations, are universally supported on almost all devices and browsers. To ensure emojis display correctly across all platforms, WordPress introduced the Emoji Autoload feature in version 4.2. This feature, which is part of the core WordPress functionalities, automatically loads a JavaScript file (wp-emoji-release.min.js) on every page of your WordPress site, impacting the site’s loading speed.

While this ensures a consistent emoji experience across all devices, it also adds an extra HTTP request to your site on every page load. In the world of web performance, each HTTP request can add to your site’s load time. For websites that do not rely heavily on emojis, this feature can slow down the site unnecessarily.

Why You Should Disable Emoji Autoload

Optimizing your WordPress website for speed involves minimizing unnecessary HTTP requests, including those made by features like Emoji Autoload. By disabling the Emoji Autoload feature in WordPress, you eliminate one such HTTP request from every page load, thereby enhancing your website’s speed. Remember, in the speed race, every millisecond counts. As per the HTTP Archive, among the top contributors to page bloat are HTTP requests.

How to Disable Emoji Autoload

Disabling Emoji Autoload is straightforward and involves adding a short code snippet to your theme’s functions.php file. Remember, before editing any theme files, ensure you have a recent backup of your site and preferably use a child theme to prevent issues when updating your theme.

Here is the code snippet to disable Emoji Autoload:

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

This code stops the emoji script from loading on your site, thereby eliminating the associated HTTP request.

The code snippet is made up of two functions:

• remove_action(‘wp_head’, ‘print_emoji_detection_script’, 7); – This line tells WordPress to stop printing the emoji detection script into the <head> of your website.
• remove_action(‘wp_print_styles’, ‘print_emoji_styles’); – This line does the same for the emoji styles, preventing them from being printed on your site.

When adding these two lines to your functions.php file and saving your changes, you effectively disable the Emoji Autoload feature.

Wrapping Up

Optimizing your WordPress site for speed involves many tweaks and adjustments, and disabling Emoji Autoload is just one of them. It’s a small change that can contribute to a faster, more efficient website, particularly if emojis are not a critical part of your site’s content. After making these adjustments, it’s crucial to assess the impact on your website’s performance. You might consider using a tool like Lighthouse to monitor your website’s page experience.

Bonus💡: How to Monitor Website Page Experience with Lighthouse

Coding The Stars

See the Pen
Tiny but accessible 5 star rating by Fred Genkin (@FredGenkin)
on CodePen.0

As you can see from the above CodePen, there is not much involved, yet it is a cleverly coded idea. This is taken from a great tutorial over on CSS Tricks, called “Five Methods for Five-Star Ratings”. The HTML below utilizes a custom CSS property (--rating) and makes no calls to the server while maintaining accessibility.

<div class="stars" style="--rating: 2.3;" aria-label="Rating of this product is 2.3 out of 5."></div>

The property is actually a conversion from a value to a percentage that’s handled in CSS using the calc() function:

--percent: calc(var(--rating) / 5 * 100%);

Then the filling of the stars based on the rating/percentage is done using a linear-gradient background that creates hard color stops at the percentage points that are designated.

background: linear-gradient(90deg,
  var(--star-background) var(--percent), 
  var(--star-color) var(--percent)
);

In the CodePen example, the author uses CSS variables for the star size, color, and background. You can go this route if you want to be able to change those elements easily, or you can just code them in yourself if you have no plans to change them down the road.

background: linear-gradient(90deg,
  #fc0 var(--percent), 
  #fff var(--percent)
);

Once the stars code is done, we can now make it work with the ACF range slider.

ACF Range Field

I’m assuming you are already familiar with Advanced Custom Fields, since you arrived at this article with it in the title. If not, you can learn more about the plugin here.

For our use case, we want to create a Range field so the client can select a range from 0 to 5 in steps of 0.1, enabling them to set the star rating at 4.7, for example.

In the WordPress backend, navigate to Custom Fields > Add New to create a new field group, then give it a title and click the button labeled Add Field to create the new field. Add the Field Label (we’re using “Stars” in our example), select the Range field type, set the Maximum Value to 5, and the Step Size to 0.1. You can make any other edits you see fit, but these are the minimum to get this working the way we want it to work.

After saving your changes, you can now edit whatever page, post, or template PHP file in which you want to show the star rating by entering the following code:

<?php
$stars = get_field('stars');
if($stars) echo '<div class="stars" style="--rating: '. $stars .'" aria-label="Rating of this product is '. $stars .' out of 5."></div>';
?>

This code replaces the HTML we were originally using, and now it will show the rating that is set on the backend when the Range field is updated. Pretty simple, right?

For reference, here’s the complete CSS that will make the magic happen (derived from the SCSS in the CodePen).

.stars {
    --percent: calc(var(--rating) / 5 * 100%);  
    display: inline-block;
    font-size: 60px;
    font-family: Times; 
    line-height: 1;
}
.stars::before {
    content: '★★★★★';
    letter-spacing: 2px;
    background: -webkit-gradient(linear, left top, right top, from(#fc0), to(#fff));
    background: linear-gradient(90deg, #fc0 var(--percent), #fff var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Today, we’ll introduce you to the concept of WordPress maintenance mode as well as example scenarios for its use. Then, we’ll show you how easy it is to implement on your own website. Let’s get started!

What Is Maintenance Mode?

Changing a page or post within WordPress is a simple process. You can add, edit or delete content as needed. But there are cases when you need to do more – and it could have a negative impact on your site’s visitors.

Maintenance mode is built for these instances. Through the use of a plugin, it limits the general public’s access to the front end of your website. At the same time, it allows logged-in site administrators to view the website as usual.

This makes it extremely handy for implementing large or complex changes. Users who come to your website will see a customized screen, thus avoiding the possibility of experiencing a broken page or feature.

For developers, it provides peace of mind. You can complete your work without the fear of causing issues for users. When you’ve finished and tested the results, it’s easy to return to normal.

Potential Usage Scenarios

Routine changes, such as adding a new blog post or editing the contents of a page, won’t necessitate putting your website into maintenance mode. However, there are a number of scenarios where it may be appropriate:

eCommerce Websites

If you’re making significant changes to your WooCommerce shop, you probably won’t want customers browsing, adding items to their cart or completing orders. A customer caught in the middle of these updates could be charged incorrectly or encounter usability issues.

Online Courses

WordPress makes for a great learning management system, as you can use it to build interactive courses. But, just as with eCommerce, you won’t want to implement changes while students are in the middle of a course. This could hamper their progress – not to mention the potential for causing confusion.

Bug Fixes

This is also ideal for times when you’re performing actual maintenance. If, for example, a feature is broken and is rendering all or part of your site unusable, temporarily shutting it off from public view may be the best way to go.

Of course, there are a number of other scenarios where this tool could come in handy. Hopefully these examples provide some context as to when to implement it on your WordPress website.

Putting Your Website in Maintenance Mode

Now that we’ve covered what maintenance mode is and why you’d want to use it, let’s put it into action. Thankfully, it’s a fairly straightforward process.

1. Install the WP Maintenance Mode Plugin

There are a number of different WordPress plugins that enable the use of maintenance mode. They all have their own strengths, and it’s worth taking the time to find a good fit for your needs. But for our purposes, we’re going to use WP Maintenance Mode, a popular choice that offers all the basics.

To install it from the WordPress Dashboard, go to Plugins > Add New and search for “WP Maintenance Mode”. From there, install and activate the plugin.

2. Customize Your Maintenance Mode Screen

Next, it’s time to make sure that our maintenance mode screen looks good and provides the right information to users. To do so, let’s head over to Settings > WP Maintenance Mode.

Then, click on the Design tab to start customizing. WP Maintenance Mode lets us choose a heading, text, colors and a background for the screen. You can even upload a background image, if you like.

Once you’ve set things up the way you want, save the settings and then click on the Modules tab.

Among the available modules are a countdown timer, social media links and general contact info. Google Analytics may also be added here. There’s even a built-in method for users to input their email address and find out when the site is back online.

To keep things simple, we’ll just choose a countdown timer, add a couple social media links and contact info.

3. Testing It Out

Since we’re experimenting with a local install of WordPress, there’s no harm in checking out what our custom screen will look like.

We can turn on maintenance mode by visiting Settings > WP Maintenance Mode and making sure we’re within the General tab.

Here, we can choose to activate maintenance mode. In addition, there are options for defining which user roles can access the front and back ends (administrators always have access), how to handle search engines and more.

Remember, since administrators still have regular access to the website, you’ll need to log out in order to see things as a typical user would. Once we’ve done that, we can take a look at the results.

4. Return to Normal

Putting your website back to normal is quick and easy. Visit Settings > WP Maintenance Mode and make sure you’re within the General tab. Click the “Deactivated” radio button and save the settings. That’s all there is to it!

11,000+

Icons

20,000+

Illustrations

DOWNLOAD NOW

14,000+

UI & UX Kits

16,000+

Web Templates

A Helpful Tool for WordPress Maintenance

The great thing about utilizing a WordPress maintenance mode plugin is that it allows you to work on your website while keeping users out. This gives you room to make necessary changes while preventing any publicly viewable mishaps.

In addition, it’s incredibly easy to use. Set up a few options, activate maintenance mode and you’re good to go. Turning it off is just as quick.

Now that you have this handy addition to your toolbox, maintaining your WordPress website will be a little less stressful.

And let me tell you, there’s no shortage of fantastic fonts to choose from out there. But getting them actually installed in WordPress can be a bit of a challenge, especially if you’ve never done it before. That’s precisely what we’ll be discussing here today. But first, let’s pause briefly to talk about where to find fonts in the first place.

Select Your Fonts

If you want to use fonts outside the standard staples like Arial and Helvetica, you’ll need to install them into WordPress. And before that, you’ll need to source them. Though more resources exist, this is a quick list of the most popular sites where you can get fonts:

• Google Fonts. This free resource offers up nearly a thousand font families to choose from.
• Adobe Fonts. Formerly called Typekit, the thousands of fonts listed here are all included in a Creative Cloud subscription.
• Font Squirrel. Here’s another great resource filled with free fonts. These have been collected from other websites.
• Fonts.com. A tried and true standard in font offerings. You can find free and premium options here.

Use a Plugin to Load Google or Adobe Fonts in WordPress

Now, let’s get to the part of this article you came here for: the tutorial. Your first option for loading Google Fonts or Adobe fonts in WordPress is through the use of a plugin. This will likely be the quickest and easiest option for most website owners, which is why we’re featuring it first.

Custom Fonts

Custom Fonts is a WordPress plugin that makes it easy to add custom font files to WordPress. It supports .woff, .woff2, .ttf, .svg, .otf, and .eot formats. And it’s easy to set up. After install, just upload your chosen fonts and they will be automatically added to whichever page builder you use. This plugin works best with Beaver Builder, Elementor, and Astra.

Use Any Font

Another plugin option is Use Any Font. The aptly named plugin requires no CSS to use and allows you to add custom fonts from any source to WordPress. You won’t be pulling from another server here, so your fonts will always be available to load every time.

Easy Google Fonts

Our third option here is Easy Google Fonts. As you might’ve guessed from its name, this plugin makes it easy to install Google Fonts into WordPress. It integrates with the built-in WordPress customizer, so once installed, your fonts will be automatically accessible from within this editing tool, in real-time.

Add Google Fonts to WordPress Manually

If the plugin route won’t suit your needs or if you just need more specific control over where your fonts will appear, you can add them manually into WordPress.

To begin, you’ll need to go to Google Fonts and make a selection. Once you’ve picked out a font type/family, click through to that specific font’s page.

From there, you can choose from a variety of styles. You can add them to your font family. Once you’re done with this selection process, click over to the Embed tab.

An embed code should now be visible. Copy this code.

Next, login into WordPress and paste this code into the <head> section of your chosen theme. You’ll definitely want to make a copy of your site’s files first before you do this and/or make a child theme. You’ll be pasting this code into the header.php file.

Alternatively, you can also choose to enqueue your new fonts through your theme’s functions.php file.

Save your changes. Then, go back to the Google Fonts page for your chosen font. Right below the embed code you previously copied; you should see a bit of CSS.

Copy the CSS. Now go to the Customizer in WordPress (Appearance > Customize) for your theme. There should be a spot for Additional CSS. Paste this bit of CSS code there to apply your font site-wide by assigning it to the body element, or just specific items like headers or navigation. Don’t forget to click Publish when you’re done.

11,000+

Icons

20,000+

Illustrations

DOWNLOAD NOW

14,000+

UI & UX Kits

16,000+

Web Templates

Add Adobe (Typekit) Fonts to WordPress Manually

Typekit fonts are now known as Adobe Fonts and you can get them when you sign up for a Creative Cloud subscription. You can use these custom fonts however you’d like – including on your WordPress site. To add them manually, you’ll follow a similar procedure as described for Google Fonts, but let’s break it down in detail.

First of all, you need to select the font you want to use. Once you find one you want, click the toggle button next to it that says Activate font.

From here, you’ll need to click the link that says < / >Add to Web Project.

Give your project a name and toggle the various font styles and weights associated with your chosen font. Click Create Project when you’re done making changes.

From here on out, the process is identical to adding Google Fonts. Just grab the embed code from Adobe Fonts and paste it into the <head> tag in your site’s header.php file. Add the CSS snippet to the Customizer and you’ll be good to go.

Load Google or Adobe Fonts in WordPress Properly

Making customizations to your site’s design can be an exciting prospect. However, it’s vital that you do it right. Failing to install or load fonts correctly can mean slower site load times and even poor functionality. Why leave it to chance? Follow the instructions offered here and prep your fonts the right way.

And sometimes, it really is all of those things. However, if you plan ahead and have a good set of instructions to walk you through the process, you should be good to go.

Why Migrate?

Site owners find they need to migrate WordPress sites for a number of different reasons. A lot of the time, it’s a matter of finding a better hosting deal elsewhere. The promise of saving money is always enticing. Another common reason to migrate your site is due to a lack of satisfaction with your current service provider. Whether they offer poor customer service or slow server response times, there are many reasons to switch.

Here are a few more common reasons people decide to migrate a WordPress website:

• Seeking better site performance. If your site is currently too slow, an upgrade to a new host might be the right call.
• A need for greater bandwidth. If your site is growing rapidly, migrating to a host that can handle your increased traffic needs is a must.
• A need for more storage space. If your site is multimedia-heavy, migrating to a host with greater storage capacity might be the right choice for you.
• More hands-on customer support. If you run an extensive website with a lot of moving parts (customers, clients, accounts, etc), the need for a more responsive customer support team might be more pronounced and necessary.
• Better pricing. Sometimes, the price tag tells the whole story. If you find a better hosting deal elsewhere, migrating your WordPress site might be your best bet.
• Expanded feature set. If your current host is lacking in features, you may find you need to migrate to one that offers more.

With the “why” spelled out, let’s move onto the “how.” We’ll cover how to manually migrate WordPress, along with some plugins that will do the hard work for you.

How to Manually Migrate a WordPress Site

You will need an FTP client to complete this process. A few options include:

• FileZilla
• CyberDuck
• CuteFTP
• FreeFTP

Step 1: Backup Your Site

Before you can move your site anywhere, you need to back it up. This means going through the process of downloading every single file of your WordPress site from a remote location. You will need an FTP client for this. Though I typically use FileZilla for this process, I’ll keep the steps fairly generic. Apply as needed to your chosen FTP client:

1. Connect to your old site’s server.
2. Go to the public_html folder.
3. Select all files in this folder.
4. Download the files.

Next, you’ll need to create and download a backup of your site’s MySQL database as well. To do this, you’ll need to go to the control panel of your web host. Most of the time, this will be cPanel. Go to phpMyAdmin and select the database associated with your WordPress site. Click Export and the database will be downloaded to your computer.

If you’d rather have this process be somewhat automated, go to cPanel (if your host supports it) and access the File Manager. In here, you can create a .zip file that contains all of your site’s files and its database for easy downloading. If you’re not super familiar with FTP, this might be the preferred method to use.

Step 2: Upload Your Files to the New WordPress Host

The next step to migrate a WordPress website is to upload your site’s files to the new host. You’ll need your trusty FTP client again. Once connected, you’ll need to go to the public_html folder on this new hosting account. Next, you’ll need to upload all the files from your site – make sure to decompress them first!

Step 3: Upload Your WordPress Database to the New Host

Once the files are uploaded, you’ll need to upload your WordPress MySQL database, too.

To do this, go to the cPanel or other control panel connected to your new hosting account. There should be a section specifically for MySQL databases. From there you’ll need to:

1. Create a new database. Make note in a safe place of the database name, username, and password associated with this new database.
2. Go to phpMyAdmin. The new database should be listed. Select it.
3. Click Import. Then, select the MySQL database file you’d previously downloaded. Upload it and save your settings.

Step 4: Edit the wp-config.php File

Now that everything has been uploaded to the new host, you’ll need to do some fine-tuning to ensure all of the new host’s settings work with your site. This will require using your FTP client again, but this time, find the wp-config.php file.

Once you’ve located this file, you’ll need to modify some code. According to SiteGround, you need to locate this section of code within the file:

/** The name of the database for WordPress */
define('DB_NAME', 'user_wrdp1');

/** MySQL database username */
define('DB_USER', 'user_wrdp1');

/** MySQL database password */
define('DB_PASSWORD', 'password');

/** MySQL hostname */
define('DB_HOST', 'hostname');

Once you’ve located this section of code, you need to replace bits of it with information about the WordPress database you created. Here’s what you need to replace:

1. Change the database name, if necessary
2. Set username to your database’s username
3. Set password to your database’s password
4. Swap out hostname for localhost or a custom name provided by your host
   

Save the changes you made. In a lot of cases, this will be the last step you need to take. Your site should now be up and running on the new host.

Step 5: Update the DNS

In some cases, you’ll need to update Domain Name Server or DNS information on your new host. This will ensure that when someone types in your site’s URL, they wind up on your actual site and not a blank page. This is common practice when you’re switching domain servers, hosting plans, and hosting companies.

According to WPEngine, you’ll need DNS info about your new host and access to the registrar from whom you bought your domain name in the first place. Specifically, you’ll need:

1. CNAME record
2. A NAME for your site.

Input this info in your domain registrar account. This can sometimes take up to a few days to complete processing.

11,000+

Icons

20,000+

Illustrations

DOWNLOAD NOW

14,000+

UI & UX Kits

16,000+

Web Templates

Plugins for Migrating WordPress Sites

If all of the above sounds like a lot of work, you can rely on plugin-based solutions to do the heavy lifting for you. These plugins are sometimes referred to as “cloning” plugins but for our purposes, we’re considering them all methods of migrating WordPress websites.

Now, you will still likely need to adjust a few settings on your new site server manually, but these plugins will definitely take care of the backing up, exporting, and importing processes.

Duplicator

The Duplicator plugin makes it much easier to migrate WordPress by streamlining the process. It works by making click-of-a-button copies of your site’s files and database. Then you can download all of this information in a handy .zip file with minimal effort.

All-in-One WP Migration

Another great option is the All-in-One WP Migration plugin. This one allows you to make backups of your site’s content and database as well and import this information over to your new host, all from within the plugin.

WP Engine Automated Migration

Our last recommendation is the WP Engine Automated Migration plugin. This one copies your files and WordPress database and allows you to upload them to your new site server with ease. So long as you have your hosting account details on hand, the plugin will handle much of the site migration process for you. Just note that this plugin only works with the WP Engine hosting provider.

Migrate Your Site Now

Whether you decide to migrate a WordPress site manually or you opt for the plugin route, you hopefully now have a stronger understanding of what the process entails, how it works, and what you need to do to prepare. Again, it might seem like a lot of work on the surface but the end result is often well worth it when you end up with a better home for your website.

Best of luck!

Gutenberg breaks content down into “blocks”, or little sections that can be rearranged with ease. By default, WordPress comes with a nice selection of blocks. But it also allows developers to build their own custom blocks as well.

Custom Gutenberg blocks can be a game-changer for theme developers. Rather than relying on workarounds or rigid page templates, a custom block can place specialized content anywhere within a page. Elements such as testimonials, accordion menus and pricing tables are just a few examples of what can be achieved.

As great as custom Gutenberg blocks sound, there was some initial concern about the barrier to entry. Building blocks natively requires knowledge of React, which could leave out a lot of developers.

Thankfully, the WordPress developer community has stepped up with tools that get around the React/JavaScript requirement. They allow you to create your own custom blocks in a visual manner and implement them into your existing WordPress theme.

Today, we’ll introduce you to a few of these tools and show you how easy it is to get started.

Custom Gutenberg Blocks: Tools

A number of tools have hit the market that allow web designers to create custom Gutenberg blocks without JavaScript. Mind you, they still require at least some knowledge of code (HTML, CSS and PHP) – or at least how a WordPress theme works. That’s because each option requires you to create a PHP file of block code and optionally add some styling to match your website.

That said, each of the WordPress plugins below leverages custom fields in order to create content. Custom fields existed well before Gutenberg came along. In fact, it’s long been common practice to utilize them as a way to get around the limitations of the old Classic Editor.

The nice thing about this sort of configuration is that custom fields offer flexibility in the types of content you can create. Mix that in with the portability of a Gutenberg block and you have a powerful new tool.

Advanced Custom Fields PRO

Advanced Custom Fields has been around for years. It started out as a handy UI for building complex custom field sets and now boasts over 1 million active users of its free version.

The commercially-available PRO version of the plugin (pricing starts at $49 per year) has evolved to allow for custom Gutenberg block creation. The ACF Blocks feature lets developers create a field set and assign it to a custom block.

More than the other plugins in this category, you’ll need to know PHP to get the most out of ACF Pro. However, existing users of the plugin will find the process for block creation very familiar.

Lazy Blocks – Gutenberg Blocks Constructor

Lazy Blocks is a free WordPress plugin that offers a visual way to create custom blocks. Like ACF, the plugin includes a number of custom field types (referred to as “controls”) for your block. Text, image, file, Classic Editor, color picker and repeater fields are just some of what’s available. There’s also an API for creating your own custom controls.

Other handy features include the ability to restrict your blocks to specific posts types, import/export via JSON and custom templates.

Block Lab

With Block Lab, custom block creation is a 3-step process. First is adding a block within the admin – which is similar to adding any other page or post. Next, add in the desired mix of custom fields (text, image, radio buttons/checkboxes, URLs, etc.) and configure settings like a custom icon. Third, create a block template for your theme and style it to your liking. From there, your custom block is ready for use.

The plugin is well-documented and even offers tutorials for creating specific block types.

A Simple Custom Block Using Block Lab

For simplicity’s sake, we’ll take a test drive using Block Lab. However, don’t let that stop you from trying out the other options as they have plenty to offer.

Now, on to our example. We’ll assume you have a WordPress website with the Block Lab plugin installed and activated.

In our project, we’ll create a simple notification block that we can use to display important information to visitors. It won’t be much, just a colored background and some text. But it will hopefully provide a glimpse into what’s possible with a custom Gutenberg block.

1. Navigate to Block Lab > Add New to create our new block.

2. We’ll start by adding a title (Notification Bar) and three fields:

• Background Color – A Color field that will let us choose the background for our notification bar. We’ll assign it to display in the Inspector area of the block editor, which is in the right sidebar.
• Text Color – Another Color field, this time for our text. This one will also display in the Inspector.
• Message – A Text field that will display our custom message. This field will be housed in the main Editor area of Gutenberg.

Note the field names assigned to each block, as we’ll need those in just a bit.

We should also mention that the plugin allows us to choose a custom icon and categorize our block. This will help us find it when we want to add it to a page.

3. With our fields and settings in place, it’s time to click the Publish button to save our block. Doing so will trigger a notification message, telling us where to place our custom block template within our theme:

/wp-content/themes/YOURTHEME/blocks/block-notification-bar.php

4. Next, we’ll need to create a block template. So, fire up the code editor of your choice and create a new file called block-notification-bar.php and save it into a new /blocks/ folder within your theme.

Block templates have to be written from scratch. But don’t worry, it’s not too difficult! Block Lab has documented how to do this, with plenty of examples.

In our case, we have just two block types: Color (background-color; text-color) and Text (message). Using the documentation as our guide, we’ll add this code to our custom block template:

Make sure to save the file and upload to your web server when done.

5. Our custom block has now been created! That’s really all there is to it. Now, we can add it to a page.

6. On the front end, we have a basic notification bar that’s sure to grab the user’s attention.

Going Further

Even in this very simple use case, there is a real value in the notification bar we’ve created. It can be placed on any page or post within our website and can be customized each time.

If we wanted to expand upon what we’ve built, there are plenty of options. Adding things like icons, buttons and the ability to link to another page or post come to mind. These things are all possible within Block Lab, as well as the other plugins mentioned above. And, the use of CSS can greatly enhance the look as well.

Now that you’ve had a taste of the custom block creation process, it’s time to experiment! Install one of the plugins above and see how you can enhance your WordPress website.

WordPress has an abundance of conditional tags built in (see details here). Utilizing these to match the conditions you’re looking for, you can wrap the enqueuing of your script so that it only loads when the condition is met. For instance, if you only wanted the script to run on a page with the slug of ‘mypage’, you would use the conditional tag if(is_page('mypage')) { load that script! } to conditionally enqueue your script only on that page.

Of course, there are a multitude of other conditional tags you can use, found at the link above. Some more common uses may be:

• is_single()  – When a single post of any post type (except attachment and page post types) is being displayed, narrowed down by using the post ID, title, slug, or an array of a combination of any of the three.
• is_front_page() – When the main blog page is being displayed and the ‘Settings > Reading ->Front page displays’ is set to “Your latest posts”, or when ‘Settings > Reading ->Front page displays’ is set to “A static page” and the “Front Page” value is the current Page being displayed. (Confusing? Click here for more explanation.)
• is_home() – This one gets a bit more tricky, but when used correctly it will display your blog posts page. (See here.)
• is_category() – When the archive page of a specific category or group of categories is being displayed, narrowed down by using the category ID, name, slug, or an array of a combination of any of the three, plus a few more conditions can be designated.

So let’s move on to how to use these tags to conditionally enqueue scripts in WordPress. Simply open your theme’s functions.php file and add the following code at the bottom.

add_action('wp_enqueue_scripts', 'firstwd_enqueue');
function firstwd_enqueue() {
    if (is_page('mypage')) {
        wp_enqueue_script('script-name', get_template_directory_uri().'/path-to-script-name.js', array( 'jquery' ), '', true);
    }
}

You will need to make sure to change ‘mypage’ to the slug of your page, ‘script-name’ to whatever you want to use as a unique name of the script, and ‘/path-to-name-of-script’ to match the url to the script within your theme’s directory (often something like ‘/assets/js/name-of-script.js’).

Again, refer to the WordPress Codex for all of the variations of tags that you can use to conditionally enqueue scripts in WordPress. be sure to check out our other WordPress tutorials for more quick snippets like this along with more in-depth articles as well.