Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
Imagine having to manually send an email to your subscribers every time you publish a post. Drafting up an email, gathering your subscriber list, and sending it to all of them wastes a lot of time you could spend working on your blog. Why do that when you can simply automate the process and have […]
The post How to Automatically Email New Posts to Subscribers appeared first on WPExplorer.
Here’s Atif Afzal on using a <div> that is permanently on the page where tooltips are added/removed and how they perform vastly better than plopping those same tooltips right into the <body>. It’s not really discussed, but the reason you put them that high-up in the DOM is so you can absolutely position them exactly where you need to on the page without having to deal with hidden overflow or relative parents and the like.
To my amazement, just having a separate container without even adding the [CSS]
containproperty fixed the performance. The main problem now, was to explain it. First I thought this might be some internal browser heuristic optimizing theRecalculate Style, but there is no black magic and I discovered the reason.
The trick is to avoid forced recalculations of style:
[…] The tooltip container is not visible in the page, so modifying it doesn’t invalidate the complete page render tree. If the tooltip container would have been visible in the page, then the complete render tree would be invalidated but in this case only an independent subtree was invalidated.
Recalculating Stylefor a small subtree of 3 doesn’t take a lot of time and hence is faster.
Looks like popper.js was used here, so you have to be smart about it. We use toast messages on CodePen, and it’s the only third-party component we use at the moment: react-hot-toast. I checked it, and not only do we tuck the messages in a <div> of our own, but the library itself does that, so I think we’re in the clear.
The post Don’t attach tooltips to document.body appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
With Forminator Pro’s Stripe Subscriptions, recurring payments, pricing plans, and other improvements, your payment forms just got better! Learn how to implement these amazing features and hear about some other recent advancements in this article.
Forminator Pro, our popular form-creating plugin, just keeps improving with its new subscription payments options. It coordinates with Stripe, making managing and implementing recurring payments more effortless than ever.
This feature works for one-time payments and subscriptions. Plus, you can include free trials, customize subscription terms, add multiple payment structures, and more!
We’ll be going over:
You’ll see how Forminator Pro’s payment features can benefit your business today and other advanced options.
Subscriptions are perfect for gym memberships, donations, food boxes, book subscriptions — you name it. There are many reasons to include a subscription on your WordPress site, and now with Forminator, it’s a breeze!
Subscriptions can get set up by going to the Add-Ons section in Forminator’s dashboard. From here, it’s just a matter of clicking Install from the Forminator Stripe Subscription Add-On.
At this point, you click Activate.
If you don’t have your Stripe account connected, you will do so here. You’ll fill in the required information, including your Test Publishable Key, Test Secret Key, Live Publishable Key, and Live Secret Key.
If you need any help setting up your Stripe account, we have you covered in our documentation.
Multiple pricing plans are perfect if you want someone to pay in a given timeframe (e.g. every month), add extra orders, buy additional subscriptions for gifts, including a free trial, and more.
It’s up to you how you want to set up plans for your subscriptions.
Get started by heading to Forminator’s dashboard, go to Forms, and create or edit a form that you already have.
I went ahead and set up a new form called Forminator Subscription.
For this example, let’s say that I want to take subscription payments with the options of Monthly, Quarterly, and Annually. I set up all the fields that I felt were necessary for this type of form.
You’ll notice the Membership Plans field. That was created with a Select field, where I entered the various membership options and labeled it Membership Plans.
Now we include the Stripe field and edit its settings.
In the Settings tab in the Stripe field, you go to the Payment Plan section and add different plans in the Plan Setup. We’ll go ahead and set up a Monthly option…
Now it’s time to choose a Payment Type. You can choose between One Time or Subscription. It’s then time to decide if you’d like a Fixed or Variable amount.
In this article, we’ll set up a monthly payment plan that costs $25. It’s just a matter of choosing Subscription and entering the Fixed monthly payment in the Amount box.
From here, you choose a Quantity. Pick a fixed amount or variable — whatever is best for your specific needs.
And now, we’re ready to choose a billing cycle. You can decide how often to bill by:
There’s also an option for a Trial Period. Just check the box!
Selecting this option will give the user a limited-time free trial for a specific plan. For the time being, let’s allow for a 7-day trial. So, I’ll enter a ‘7’ in the Trial Duration area.
Next, we’re going to head to the Conditions tab to connect it to our dropdown selection. This tab is in all of your subscription options. In this case, we’re on the Monthly subscription.
From here, you add the condition(s) selections from the dropdown.
Conditions can be adjusted and changed however you’d like. For more information on how to specify what conditions are and how they function, be sure to check out our documentation.
To sync everything with Stripe, under the Advanced tab in the Stripe Field, scroll down, and you can select the Billing Details, where you choose your appropriate fields from the dropdown (e.g. Name, Email, etc.).
Use the Meta Data area to include any other additional information that you’ll need from your users. This information will be sent to Stripe and appear in the MetaData section of every transaction.
For example, add a Phone Number.
Once you have all of the Meta Data you want to collect, you’re all set to publish your form!
What’s remarkable is how the information syncs with Stripe. This makes it easy to manage your subscriptions, see sales, get users’ information, and much more.
From Stripe’s dashboard, you check out who signed up under the Customers tab. You’ll be able to view the email, trial end date, invoice number, credit card info, and all additional information you need.
On top of that, you can see all of the subscriptions that you created in the Products area.
All of this can be viewed in test data and live mode, making for smooth operations as you start collecting payment for your subscriptions!
To get an idea of the possibilities with recurring subscriptions and payments, here’s an example of a book box membership created with Forminator.
As you can see, there are a lot of options and variables to choose from. Users decide whether to get hardcover only and extra items (e.g. coffee, bookmark, etc.). When it comes to subscription options, you can choose between 3, 6, and 12 months.
The form also gives a running total of the price.
It goes without saying that setting up an appealing subscription option can be a game-changer when it comes to your sales.
If you’d like to test out this specific template for yourself, upload the code for it into Forminator’s dashboard and give it a try! Get the code here to check it out.
Another advanced feature that’s now included with Forminator Pro is the option to use localized number formatting.
This feature is available for the Number, Currency, and Calculations fields. In these fields, you can edit the number format under the Settings > Formatting.
You choose your decimal separator from the Separator dropdown. From here, you’ll have numerous options for decimals and commas, including not having them in specific spaces.
Pick what decimals you want to round to in the — you guessed it — Round To section. You choose between 0-4.
Finally, you can also pre-populate this field dynamically using the query parameter passed in your form URL. Just enter it in the Query Parameter area (e.g. query_parameter_key).
Localization number formatting gives you more control of how the value of your field is displayed.
Forminator Pro released some other advanced features that you will find beneficial. They include:
Let’s check them out!
Instead of having just one or the other, you can now include both Stripe and PayPal. They can be included as payment options for your users on a single form.
Just add the Stripe and PayPal fields to any form as a payment option. You can also use the Select field to provide a dropdown of the options.
The dropdown makes it simple for a user to choose their preferred payment.
Want to spice up your quizzes? Add videos in quiz answers! This is useful for various purposes (e.g. a correct answer to a scene in a movie, what a particular song is, etc.) and can provide added engagement.
It’s done by adding a link to a video on YouTube or elsewhere. Then, it’s just a matter of including the link to the video in the Description area.
You can always arrange the quiz order from Forminator’s dashboard under Appearance > Layout > Quiz Item Ordering. This is beneficial for arranging if you need the video to appear first or want the description at the top of the question.
And just like that, you’ll have videos added to your quiz!
With recurring payment options, more payment options, and the inclusion of videos for quizzes, your forms for your WordPress site will go beyond the norm!
Plus, there are new advanced features always in the works. Be sure to check out our Roadmap for a glimpse of what’s coming next.
Forminator Pro is worth subscribing to. Really though, you don’t need to “subscribe” — it comes with every WPMU DEV membership (which you can try free for 7-days).
This post is originally published on Designmodo: How to Improve Cumulative Layout Shift (CLS) on WordPress
It is a very common thing to experience that sudden changes happen when you are on a website. For example, if you are reading an article or shopping from an online store, the text and the size changes all of …
For more information please contact Designmodo
Our 5-star free form creating plugin, Forminator, has a few advanced features that you can implement today for your WordPress site.
For example, he has pagination for Knowledge & Personality Quizzes! This allows you to show quiz questions one at a time, or all the questions at once. The pagination feature helps further determine how your quiz will be displayed and used.
Plus, Forminator also has Bulk Editing, image support in Checkbox and Radio fields, and reCAPTCHA badge positioning!
This article will show you pagination support and rundown other features so that you can implement them for your WordPress site today.
We’ll look at:
By the time you read through this, you’ll hopefully have some ideas to put these features immediately to work!
If you want to display several questions for your knowledge quizzes at a time, then you’ll want to use Quiz Pagination. As you’ll see, creating a quiz with pagination is as easy as ever with Forminator.
You’ll start just like usual by making a new quiz. Just hit Create…
…then, give it a Quiz Name. For this example, we’ll create a Knowledge Quiz.
At this point, Forminator will ask you how you want to present your quiz. Since we’re focused on pagination, we’ll choose the Paginated Quiz option and hit Continue.
Once you continue, you’ll also have the option to collect leads. That’s up to you and won’t have any effect on your pagination options.
After creating the quiz, you can set it up like a regular quiz (e.g. adding a title, featured images, etc.). Additionally, add your questions.
If you need help getting a quiz set up in detail, check out our Getting the Most Out of Forminator article to walk you through the process.
I’ve set up some questions and am now ready to edit the pagination (and again, if you need help setting up questions, please refer to this article).
Editing pagination is done from the Behaviour tab.
Once you’re here, you have the option No Pagination or Paginated Quiz. This is so you can remove pagination if you decide not to use it in the future.
For this article, we’re going with Paginated Quiz.
Paginated Quiz then lets you determine the number of questions per page, the Start Quiz Button text, and the text for previous & next buttons. You can also check the box if you want to show a page indicator.
It’s as simple as filling in the details in the spaces provided.
When the pagination details are entered, the rest can be created like any other knowledge quiz. That includes:
Set the quiz up as you feel appropriate, and then you’re on to…
When you have your quiz configured to your standards, click Preview to see what it looks like. Let’s check it out!
I uploaded a cover image and titled it Forms and Superheros, and added a description. This is how the quiz begins…
And here’s a quick walkthrough where I have a correct — and incorrect — answer. Plus, it’ll show me the results. Keep in mind that this is a two-question quiz that I wanted on the same page.
As you can see, Forminator lets you know when you have the answer right or wrong immediately.
When you click View Results, Forminator lets you know exactly how many you got right and wrong. Whew! This was a tough one.
If the preview looks good, like any quiz, hit Publish, and Forminator will deliver a shortcode that can be used on any page, post, or acceptable widget.
And that’s it!
If you need to, you can always edit the quiz at any time through Forminator’s dashboard. Otherwise, your paginated knowledge quiz is ready to go.
Another great advanced editing feature in Forminator is Bulk Editing. Bulk editing lets you add a large number of options at once. This makes the process of editing more streamlined, efficient, and quick.
This feature works with the Radio, Checkbox, and Select fields.
When it comes to bulk editing, you have three options. You can bulk edit:
The process to get this implemented is the same in all of the fields. Bulk Edit is located in the Labels tab in each respective field.
To get started, simply click the Bulk Edit option.
One-click is all it takes to get moving.
Once implementing Bulk Edit, any existing options you have manually created will automatically populate in the Bulk Edit section.
Let’s take a look at each option when it comes to bulk editing.
This option is great if you want to manually enter or paste your list of options into the Bulk Edit area. When doing this, enter them one per line with each term separated by a semicolon in this order:
Or, you can enter Label only. By doing this, Forminator will generate the value automatically and set selected to zero. Plus, it won’t add an image URL.
An example of this might look like this…
Manually entering options is best for adding just several options at a time in bulk.
When you have a ton of options on a CSV file, you can quickly bulk upload these to Forminator.
What if you don’t have a CSV file? Download Forminator’s CSV template. It has a list of examples that you can edit to include your own options.
The example file is fundamental, with just a few pieces of information. Edit however you want, and then click Upload File once you have edited and saved the CSV file. Then, hit Import to add all of your options into the Bulk Edit section.
Keep in mind that uploading will replace any existing options that you have in place.
Forminator has quite a few predefined options you can use in an instant. They’re all available via the dropdown menu.
The dropdown menu has them all.
Choose from the dropdown menu:
Plus, you can add New Option, which will allow you to input your data.
The predefined options make it quick and easy to bulk edit whatever field you’re working in.
There are several more advanced features for Forminator that you may find helpful. These were all included in the release of 1.14.12, and include Image Support for Checkbox & Radio Field, HTML Quiz Description Field, and Setting reCAPTCHA Badge Position.
We’ll quickly check out each one of these and demonstrate how they work.
Forminator now gives you the option to upload an image to the Checkbox and Radio fields. This can help forms become much more visually appealing and easier to set up than uploading an image separately for a form.
Just have a form with the fields in them (if you need help setting up a form, please check out our How to Get the Most Out of Forminator article).
Go into the form field, and you’ll see that under the Labels tab, there’s a checkbox you can click to Enable Images.
Once enabled, you simply go to the Options, click the dropdown by any option you want an image in, and upload a photo.
Once you have your images uploaded, click Apply, and you’re all set! Your images will be included with your Checkbox or Radio field.
You can always edit and adjust your images at any time.
Add descriptions for each individual quiz answer in Forminator’s HTML Quiz Description Field. This feature helps clarify any answer for your users and can help make for a more engaging quiz.
All you do is type it in the Description area in each individual question field.
Once you have the description entered, click Apply. Your description is now added!
This is a fast adjustment that can be made regarding the reCAPTCHA position. It puts you in control of where your reCAPTCHA is displayed.
You just go into your reCAPTCHA field, click Settings, and choose where you want your badge to appear on your site.
Choose from these specific areas:
Once you select where you want your badge to appear, click Apply.
Keep in mind that this only works with V2 Invisible and reCAPTCHA V3 options.
And for even more about using reCAPTCHA, please read our article covering incorporating it with our security plugin, Defender.
If you think features like pagination are sensational, Forminator is constantly adding new beneficial features and enhancements. Be sure to follow our Roadmap to see what’s next!
And now that you know how, implement these advanced features (for free!) and give them a try today.
Happy form building!
Configs eliminate painstaking manual adjustments for individual sites. Instead, you can immediately apply your preferred plugin and uptime settings to unlimited sites with a click!
Best of all, they’re all implemented quickly from The Hub and WordPress admin.
Adjust any config-supported plugin to your preference, save as a new config, apply your custom config to all of your Hub-connected sites in one click — it’s that easy!
This article is your ultimate guide to learn, know, and use configs for your WordPress sites. We’ll be going over:
Once you have configs up and running, you’ll see for yourself how easy and beneficial it is to adjust your settings on unlimited sites.
Plus, with easy config access from The Hub, WordPress management just got better than ever.
Let’s get to it!
Configs are by far one of the most beneficial features you can use to help build and tweak your WordPress sites.
In a nutshell, they allow you to set up any supported plugin to your preference, and then save these (non-unique) plugin settings as a new config – which you can then apply to the rest of your sites in one hit.
Think saving your video game progress, but for WordPress plugins.
You can create new configs in WordPress or The Hub, and they automatically sync across to the each other.
Note that you can also use configs WITHOUT The Hub, you’ll just have to save and upload them to your sites manually – which will still save time – but won’t be as fast as one-click applying them via The Hub.
Currently configs can be used with SmartCrawl, Defender, Smush, Hummingbird, and Uptime (Forminator, Branda, and Automate coming soon!).
Finally, you have the option of using our default configs (which are already set up and optimized by our expert team), or you can create your own custom configs.
We’ll first check out how to use default configs from the WordPress admin.
They’re a great way to get started with configs, especially if you’d prefer to skip the configuration process. Our default options will suit most users and are a great foundation to build from.
In this walkthrough, I’ll be using Defender.
In Defender’s dashboard, you can see that there’s a section labeled Preset Configs.
It shows what’s included (Basic Config and Default Security Config), Manage Options, and Save New.
You can view the details of each one by clicking on the dropdown arrow, showing you what’s activated and what’s not.
Here’s a look at the Basic Config.
From here, it’s a matter of applying or downloading the config. It’s done by clicking the gear icon and Download.
As mentioned earlier, the download option is mainly for non-Hub users who want to still upload their configs to other sites.
By tapping Apply, Defender will make sure you want to proceed and recommends a backup for your site.
If you want to make this config active, hit Apply, and you’re all set!
You can now move to The Hub and apply this same config to all your other sites in bulk, but we’ll get to that soon.
Alright, now that you know how to use default configs, let’s set up a completely customized one.
Creating a custom config is a way to set up plugin configurations to your standards and preference.
It can be done from WordPress or The Hub, and they can be applied to unlimited WordPress sites.
Let’s set one up in WordPress using Defender again.
We’ll start by assuming you’ve already activated relevant Defender settings and tools.
Once you’ve done this it’s as simple as hitting Save New in the Configs section.
When hitting Save New, a new box will appear. This is where you can add a Title and Description of the config.
Then, click Save, and all of the configurations you have saved at this time will be available as a new config.
It will then appear with your other configs, where you can activate, edit name and description, or delete.
The new config is also ready to be activated or downloaded and applied to as many sites as you want.
If you’re in The Hub, you’ll see that this new config is also accessible here. It’s under My Configs.
Speaking of The Hub, now it’s time to see how easy it is to apply configs to unlimited sites with a couple of clicks.
From the My Sites area you should see the Configs tab.
Once you click on Configs, you’ll see you can access either our Default Configs or any custom configs you’ve created in My Configs.
For this example, we’ll show you how to apply a default config, but the process for applying custom configs is exactly the same.
Next, you’ll see the option to Apply to site(s) and an ellipsis by each plugin and service.
To apply this config to your site(s), click Apply to site(s).
Before applying, you can also check out what’s in the config by clicking the ellipsis.
When clicking this, you’ll hit Details, and it shows you all that’s included, so you can make a good decision about what sites you want to apply it to.
For example, here is detailed information about the Performance Config and Hummingbird Pro.
It shows the date it was created, what’s active/inactive, what’s automated, and is broken up into categories (e.g. Advanced Tools).
Like what you see, and you want this config applied to a specific site? Or unlimited sites? You can do that from here by clicking Apply.
After hitting Apply, you’re given the option to add configs for one or numerous sites.
You can do this individually or all at once by tapping Select All.
Choose as many sites as you want to apply configs to.
When hitting Select All, you’ll notice any website with the plugin not active won’t be included.
Plus, it will give you the total amount of sites the config is applied to.
Once you have the sites, you want to apply configs to, hit Apply to site — and you’re all set!
Want more convenience?
Configs can also be enabled directly from The Hub Overview.
Here’s an example of saving or applying an Uptime config.
If you click on the ellipsis, it will open up a dropdown where you have an option to Save Config and Apply Config.
Once you’ve created different configs across different plugins, you can easily add them all to single sites at once using our quick config site setup.
From The Hub, go to a site and click on the ellipsis in the upper-righthand corner.
From there, you’ll see Quick Setup. Click on that to get started.
Your configs are now well on the way.
This brings up a brief guide of configs and gives you the option to Start Setup.
From here, it’s a matter of selecting what you want to set up by checking the box next to the feature.
Any configs that are available (including custom configs), you’ll be able to select from the dropdown where it says Select Config. Select from the dropdown the configs you want to use.
Once you have the DEV configs sorted the way you want, click Start Setup.
It’s just a matter of choosing what configs to apply and where.
And just like that, your configs are attributed to your WordPress site!
Note: We recommend not using configs for brand-spanking new sites. It’s best to get established with your plugins and features first so that any functionality isn’t disrupted (e.g. if you were to enable a Defender config on a brand new site with masked login activated, you will not be able to log into the site).
Our uptime tool allows you to monitor downtime and uptime, configure the notification threshold, and the email recipient who you want to keep tabs on your chosen site.
Uptime configs also work slightly different to our regular plugin configs, and custom uptime configs can be a great tool for agencies or freelancers who manage many websites and want to prioritize them differently.
For example, you can create specific uptime configs especially for clients who have purchased your top tiered plans. In this case, your alerts could be set up to instantly notify your top developers.
On the other hand, for lower paying, less priority sites – you might only have a 10 min downtime alert, which is sent to your intermediate developers.
Then simply save these two unique setups as configs, and apply to relevant sites based on their priority.
That’s the one example anyway. The point is, you can get creative with how you customize this particular config tool, and use it to your advantage.
Like the others, Uptime configs can be found in your default and custom config dashboards.
For more on Uptime, be sure to check out our documentation.
As you can see, configs are a BIG advantage to your WordPress management. They put you in the driver’s seat when it comes to your WordPress sites settings!
Configs streamline everything, so you don’t have to adjust settings for each site that you have. They’re an excellent one-and-done solution.
Be sure to give them a spin today on unlimited sites with our supported plugins and Uptime. If you don’t have The Hub and want to check out all that was covered, sign up for a free 7-day trial. You’ll also get access to all of our award-winning premium plugins, 24-7 support, and more!
Now that you know how to use them, there’s nothing else to configure out.
Do you want to remove the WordPress version number from your website?
Many believe that removing the WordPress version number from your website’s source code can prevent some common online attacks.
In this article, we’ll show you how to easily remove WordPress version number the right way.
By default, WordPress leaves its footprints on your site for the sake of tracking. That is how we know that WordPress is the top website builder in the world.
However, sometimes this footprint might be a security leak on your site if you are not running the most updated version of WordPress. It provides the hacker with useful information by telling them which version you are running.
We recommend using the latest version of WordPress on all your websites so you don’t have to worry about this. However, if for some reason you are running an older version of WordPress, then you should definitely follow this tutorial.
It is quite difficult to remove all traces of which WordPress version you are using on your website. A sophisticated attack may still be able to find that information.
However, it will prevent automatic scanners and other less sophisticated attempts from guessing your WordPress version.
That being said, let’s take a look at some ways to easily remove version number from your WordPress website.
This method is easier and recommended for all users.
All top WordPress security plugins offer an option in the settings to hide your WordPress version number.
However, we recommend using Sucuri because it automatically hides WordPress version information and offers other more advanced security features.
Simply install and activate the Sucuri plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, the plugin will automatically hide WordPress version information. You can verify it by visiting Sucuri Security » Settings and switching to the Hardening tab.
This method requires you to add code to your WordPress website. If you haven’t done this before, then see our guide on how to copy and paste code snippets in WordPress.
Now, many websites will recommend you to edit your theme’s header.php file and get rid of the following line of code:
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
This method doesn’t work as a new theme update will automatically replace the old template with the new file.
Another commonly recommended, but inefficient method is to put this code in your theme’s functions.php or site-specific plugin:
remove_action('wp_head', 'wp_generator');
This will only remove the information from the WordPress header. The version number will still be visible in your website’s RSS feeds.
The right way to remove WordPress version information is by disabling the function responsible for displaying it.
In order for you to completely remove your WordPress version number from both your head file and RSS feeds, you will need to add the following code to a site-specific plugin or code snippets plugin.
function wpbeginner_remove_version() {
return '';
}
add_filter('the_generator', 'wpbeginner_remove_version');
By adding this code, you will remove the WordPress version number from WordPress RSS feeds and your website’s head section.
WordPress may still add the version information in various other places throughout your website. For instance, it is included as the query string in source code for CSS and JS files.
Removing all instances of WordPress version information can be time-consuming, complicated, and may not always work.
From a security perspective, removing the obvious generator tags can protect you from some very common attacks.
However, if someone is determined to break into your website, then hiding your WordPress version number does little to stop this.
You need to implement a proper WordPress security setup in place to make your website more secure. This adds layers of security around your website making it harder to hack into.
We hope this article helped you learn how to easily hide WordPress version number from your website. You may also want to see our guide on how to get a free SSL certificate for your website, or our list of must-have WordPress plugins for small business.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post The Right Way to Remove WordPress Version Number appeared first on WPBeginner.
You can build a completely advanced site without using many plugins and without having to code. The Total theme is now integrated with Toolset, which means you’ve got an entirely new set of professional features available to create any kind of powerful website you want. Total isn’t your average WordPress theme. Designed for ultimate flexibility, […]
The post Build an Advanced Website with Total & Toolset appeared first on WPExplorer.
Do you want to move a site from a WordPress multisite to a single install?
If you run a WordPress multisite network, sometimes, you may need to move one of the websites to its own separate WordPress install.
In this article, we’ll show you how to easily move a site from WordPress multisite to its own single install while preserving SEO rankings and all your content.
To move a website from a WordPress multisite network, you’ll need a domain name.
If you already have a domain name where you want to install the single site, then you are good to go.
If you don’t have a separate domain name, you’ll need to register and add a new domain name to your hosting account.
We recommend using Domain.com. They are one of the best domain name registrars in the world and offer beginner-friendly domain management experience.
For more details, see our article on how to register a domain name.
Alternatively, you can buy a separate hosting account and domain name for your fresh WordPress install.
We recommend using Bluehost. They are offering a free domain name with a generous discount on hosting.
Basically, you can get started for $2.75 per month.
After getting your domain name and hosting, the next step is to install WordPress.
See our step-by-step WordPress installation tutorial if you need help.
Important: Since you are going to make some serious changes to your WordPress multisite, it is necessary to create a complete WordPress backup before you do anything else.
Now that everything is set up, let’s move a site from WordPress multisite network to its single install.
The built-in WordPress import/export functionality works the same way in multisite as it does on a single site install. We will use the default tools to export the data from a site on a WordPress multisite network.
First, you need to log in to the dashboard of the single site you want to move, and then click on Tools » Export.
Next, you want to ensure all content is checked and click on the Download Export File button.
WordPress will now create an XML file containing all your data and send it to your browser for download.
Be sure to save the file on your computer because you will need it later.
Login to the WordPress admin area on the new location where you want to move your child site and then go to Tools » Import. On the import screen, WordPress will show you a number of import options.
You need to click on the ‘Install Now’ link below ‘WordPress.’
Wait for the importer to be installed and then click on the ‘Run Importer’ link.
On the next screen, you will be asked to upload the WordPress export file you downloaded earlier from the WordPress multisite.
Click on the Choose file button to select the file from your computer and then click on the ‘Upload file and import’ button.
On the next screen, WordPress will ask if you would also like to import users. If you do nothing, then WordPress will import all users. This is recommended if you do not want to change authors.
You will also see the Import Attachments option, and you want to make sure it is checked so that WordPress can download images from your posts and pages.
Don’t worry if it misses out on some or most of your images. You can import them separately afterward.
Click on the ‘Submit’ button to continue.
WordPress will now start importing your content. This will take a few minutes depending on how much content you have. Once it is done, you will see a notification that says ‘All done. Have fun!’
That’s all. You have successfully imported data from a multisite network child site to an individual WordPress install. There are still a few things left to do.
If you were using WordPress multisite with custom domains, then you don’t have to set up any redirection.
However, if you were using subdomains or directory structures in your WordPress multisite, you need to set up redirection so that users coming to your old URLs are redirected to your new site.
There are two ways to do this. You can set up a redirect using a WordPress plugin (recommended), or you can add some code to your WordPress .htaccess file.
We’ll show you both methods, and you can choose the one that best suits you.
Note: Make sure that your old site on the multisite network and the site on the new domain are both using the same permalink structure.
Method 1. Setting Redirects Using All in One SEO for WordPress
This method is easier and recommended for all users. We’ll be using All in One SEO for WordPress, which is the best WordPress SEO plugin on the market.
It allows you to easily optimize your WordPress site for search engines and comes with powerful features like SEO analysis, custom XML sitemaps, Schema.org support, and a redirects manager.
First, install and activate the All in One SEO for WordPress plugin on your WordPress multisite and then Network Activate it for the child site. For more details, see our guide on network activating plugins on WordPress Multisite.
Note: You’ll need at least the Pro plan to access the Redirection Manager feature.
Next, you need to install and network activate the Redirection Manager addon. You can find it under ‘Downloads’ from your account page on the All in One SEO website.
Once you have network-activated both plugins, you need to switch to the dashboard of the child site.
From here, go to the All in One SEO » Redirects page and switch to the ‘Full Site Redirect’ tab.
First, turn on the Relocate Site option by toggling the switch next to it.
Then, enter your new site’s domain name next to ‘Relocate to domain’ option.
Now click on the Save Changes button to store your settings.
All in One SEO for WordPress will now redirect users to your new domain name.
Method 2. Setting up Redirects using the Redirection Plugin
First, you need to install the Redirection plugin on your WordPress Multisite.
You can Network Activate a plugin, or you can log in as Super Admin on your child site and activate the Redirection plugin for that particular site alone.
After that, you need to visit the admin dashboard of the child site for which you want to set up the redirect.
Redirecting from Subdomain to New Domain
The Redirection plugin makes it super easy to point a domain name to a different one.
Simply go to the Tools » Redirection page and switch to the ‘Site’ tab.
Simply enter your new domain name and then click on the ‘Update’ button to save your settings.
The plugin will redirect all your site users to your new domain name with the correct permalink structure.
The advantage of this method is that you can still log in to the admin area of your old subdomain.
Redirecting from Directory to New Domain
If your multisite uses a directory-based URL structure, then the Redirection plugin makes it easy to redirect it properly to your new domain.
Simply go to the Tools » Redirection page on your sub-site, and then click on the Add New button at the top.
This will take you to Redirection’s setup form. Here is how you need to fill in that form:
Source URL: ^childsite/(.*)$
Target URL: https://example.com/$1
Be sure to replace childsite and example.com with the name of your subsite and its new location.
Don’t forget to change select ‘Regex’ from the dropdown to the right, and then just click on the Add Redirect button to save your settings.
You can now visit your sub-site to see the redirects in action.
Method 2. Setting up Redirects Using .htaccess file
For this method, you need to add redirect rules to the .htaccess file in your WordPress hosting account for your multisite network.
Subdomain to New Domain Redirect
For subdomain installs, you need to use this code in the .htaccess file of your WordPress multisite.
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^subdomain.example.com$ [NC]
RewriteRule ^(.*)$ http://www.example.net/$1 [L,R=301]
This code redirects visitors coming to any page on subdomain.example.com to http://www.example.net. The $1 sign at the end of the destination URL ensures that your users land on the same page they requested.
Redirecting From Directory to New Domain
For directory-based multisite installs, you’ll need to paste the following code in the .htaccess file of your WordPress multisite.
Options +FollowSymLinks
RewriteEngine On
RewriteRule ^childsite/(.*)$ http://example.net/$1 [R=301,L]
This code simply redirects any users coming on http://www.example.com/childsite/ to http://example.net. The $1 makes sure that your users land on exactly the same page or post they requested.
Don’t forget to replace childsite and example.net with the name of your subsite and its new location.
Moving a site is not a routine task, so it is likely that you may come across some issues.
1. Export File Too Large – If your WordPress export file is too large, you may fail to import it properly. To fix this, you may need to split large XML file into smaller pieces.
2. Images Not Imported – Another common issue is that images may not import correctly to your new site. To fix this, you can try importing them as external images.
3. Redirects Not Working – If users are not being redirected correctly to your new site, then you need to carefully review your redirect settings. Make sure that your single install and the child site are both using the same Permalinks structure.
For other issues, see other common WordPress errors and how to fix them.
We hope this article helped you move a site from a WordPress multisite to a single install. You may also want to review our WordPress SEO checklist for your new install or try these essential WordPress plugins on your fresh site.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Move a Site from WordPress Multisite to Single Install first appeared on WPBeginner.
So you’ve started your own WordPress website and you can’t wait to publish your first blog post. There’s only one small problem: you can’t decide whether you should add categories or tags to your blog post… or maybe both? You’re not alone. Many bloggers get confused by WordPress categories and tags so in today’s post, […]
The post Ultimate Guide to WordPress Categories & Tags appeared first on WPExplorer.
There is no doubt that CSS plays a huge role in web performance. Milica Mihajlija puts a point on exactly why:
When there is CSS available for a page, whether it’s inline or an external stylesheet, the browser delays rendering until the CSS is parsed. This is because pages without CSS are often unusable.
The browser has to wait until the CSS is both downloaded and parsed to show us that first rendering of the page, otherwise browsing the web would be a terribly visually jerky to browse. We’d probably write JavaScript to delay page rendering on purpose if that’s how the native web worked.
So how do you improve it? The classics like caching, minification, and compression help. But also, shipping less of it, and only loading the bit you need and the rest after the first render.
It’s entirely about how and how much CSS you load, and has very little to do with the contents of the the CSS.
Direct Link to Article — Permalink
The post How to Improve CSS Performance appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Are you trying to point multiple domains to a single WordPress installation? Do you want to display unique content for each domain and have it all easily managed in one site? Domain mapping is the solution! Many people looking for a solution like this don’t often know what to call it, so here are a […]
The post How to Map Domains in WordPress (Domain Mapping) appeared first on WPExplorer.
Ever wonder why so many eCommerce stores are using Instagram feeds throughout their websites? It’s all down to the power of social proof. Social proof is a phenomenon where people are influenced by the actions, or purchases in this case, of others. One of the most effective types of social proof is that originating from […]
The post How to Promote WooCommerce Products with Instagram appeared first on WPExplorer.
Do you want to disable image attachment pages in WordPress?
Image attachment pages can look like incomplete pages on your site. If a visitor views these, then it can leave a poor impression.
In this article, we’ll show you how to disable image attachment pages in WordPress and redirect it to the parent post.
By default, WordPress creates a single page for every media attachment you have on your site.
This includes images, audio/video files, pdfs, and more. Some users might find this functionality useful, however, most WordPress websites don’t need it.
For example, a photography theme could use the attachment page to display EXIF data. This could show the camera model used, the camera settings, and even the image’s location data.
Often we get complaints from users who accidentally linked their images to the attachment pages, and they don’t like the way it looks.
This is a big issue because many themes don’t have special templates for the image attachment pages.
Sometimes an image on your website can become popular, and people might start landing on the attachment page directly from Google.
Ideally, you want visitors to land on your post and see the image in the context you have used it.
This is why we always recommend users to disable image attachment pages on their WordPress blog.
There are two ways to disable image attachment pages in WordPress.
The first approach uses WordPress plugins, while the second involves adding custom code to WordPress.
You’ll want to choose the method that’s best suited for your skills.
The easiest way to disable image attachment pages is to use a WordPress plugin. This method is beginner friendly and requires no coding.
We recommend using All in One SEO. It’s the best SEO plugin for WordPress used by over 2 million sites.
The first thing you’ll need to do is install and activate the plugin. To do this, see our guide on how to install a WordPress plugin.
Once the plugin is installed and activated, you’ll have a new menu item called ‘All in One SEO’.
Navigate to All in One SEO » Search Appearance. Next, click the ‘Media’ navigation tab.
The first setting is ‘Redirect Attachment URLs’. You can disable the setting entirely, redirect to the attachment page, or the attachment parent page.
We recommend redirecting to the ‘Attachment Parent’ page. That way, when a user lands on the image attachment page, they’ll be redirected to your article instead.
Once you select your preferred setting, make sure to click ‘Save Changes’ before exiting the screen.
If you aren’t using the All in One SEO plugin, you can still disable image attachment pages and redirect users to a parent post using a plugin called Attachment Pages Redirect.
All you have to do is install and activate the plugin. It’ll automatically start redirecting users that land on attachment pages to the parent post.
If no parent post is found, then users will be redirected to your homepage.
This plugin works out of the box and has no settings page. Simple and easy.
Another option is to add a code snippet to WordPress that accomplishes the same goal as the plugin above.
If you don’t want to use a plugin or feel that you’re already using too many WordPress plugins, then you can use this method.
First, you’ll need to create a new file in your WordPress theme folder and name it image.php. If your theme already has an image.php file, then you’ll need to edit that file instead.
After that, all you have to do is add the following code as the first line in your image.php file:
<?php wp_redirect(get_permalink($post->post_parent)); ?>
Next, you need to save the image.php file and upload it to your theme directory using FTP or your WordPress hosting control panel.
Now, when a user lands on your image attachment page, they’ll be redirected to the parent post.
We hope this article helped you disable image attachment pages in WordPress. You may also want to see our beginner’s guide to image SEO and our guide on how to fix common image issues in WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Disable Image Attachment Pages in WordPress appeared first on WPBeginner.
Thanks to Forminator and E2Pdf, you can now quickly and easily generate a PDF from a form in WordPress. This makes it as simple as ever when creating agreements, contracts, certificates, licenses, and more directly from a form on your WordPress site.
Plus — it’s free!
As you’ll see, when these two get together, they form a PDF-ect team.
To kick things off, watch Forminator and E2Pdf in action in the video below. Then, once you get a glimpse of how they work together, we’ll break-down all the information in detail throughout this article.
As you can see, Forminator and E2Pdf can deliver some amazing PDFs as easily as ever.
You should already be familiar with Forminator. He’s our popular 5-star form building plugin that can create amazing forms, quizzes, polls, registration forms, and much more in just a few clicks.
And when it comes to PDFs, E2Pdf is another popular 5-star rated plugin that features PDF Document Viewer, PDF Document Editor, PDF Data Injector, and other awesome features.
You’ll see how the combined forces of Forminator and E2Pdf can allow your users to fill out a form on your WordPress site and have it become a PDF.
If you haven’t already, download Forminator and E2Pdf. Once you have them installed and activated, you’ll be ready to follow along as we create some PDFs directly from our WordPress form.
Now, let’s walk through how to create a PDF using three different methods that include:
Additionally, at the end of this post, there’s an opportunity to get a sweet discount for E2Pdf. Though it’s free to use, there are some upgrades you can make with WPMU DEV and E2Pdf’s partnership.
Ready to get your PDF on? Let’s get started.
This method creates a PDF template based on a form that was created in Forminator. It’s a way to get started with an established form instantly, so you don’t have to start from scratch.
Clicking on Templates from the E2Pdf admin and Add New will get you started. Once clicking Add New, a pop-up will appear where you will create the PDF.
From here, you’ll want to give this PDF a Title, select whether it’s active or not in the Status, and change the Width & Height.
You can also choose a premade custom selection from the Size Preset dropdown regarding the size. There are options for Letter, Note, Tabloid, and more.
You can see there are quite a few options already available to you.
Also, choose a Font, Font Size, and Alignment.
Once you have the prerequisites figured out, head to the Extension dropdown. This is where the integration comes into play.
You’ll notice that E2Pdf has picked up that Forminator is installed on our WordPress site and automatically included it as an option. Cool, huh?
I premade a form on Forminator and titled it “E2PDF Test Form.” You can see I have First Name, Email Address, Phone Number, and Message as the fields in the preview below.
Keep the Extension on Forminator, and then you’ll choose what form you want to use in the Item dropdown.
You’ll notice my premade Forminator form “E2PDF” is an option, so we’ll select that.
When everything is set up, hitting the Auto PDF button will take care of the rest.
And just like that, we now have a PDF template that is created from a form. E2Pdf takes all the input fields and places them into a template automatically.
You can check out what it looks like by hitting Preview.
Need to edit? That’s a click away by clicking the gear icon for Options.
You can also drag and drop the fields around to rearrange any way that you’d like. Additionally, if you right-click (or use two fingers to tap if you’re on a Mac) on a field, it will open up the options for:
The PDF Builder located on the righthand side allows you to drag and drop Fields and Objects into your PDF form.
Drag and drop any additional details that you’d like.
Again, just hit Update if any changes are made, and you’ll be all set!
You’ll notice then that your new PDF for the form is in the Templates section of E2Pdf’s admin. From here, you can open it up, see if it’s active or not, and get the Shortcode for it (which I’ll be discussing soon).
Now that we’ve looked at how to generate a PDF from a form automatically let’s move on to…
Another way of creating a PDF from a form is by using a premade template and simply mapping data to the fields in it.
You’ll want to add a new PDF template by going to Templates > Add New. Then, title it, and include the settings you’ll want (e.g. width, font, etc.).
Make sure Forminator is selected as the Extension and choose the form used to add in all of the data.
Next, we’ll click Upload PDF, and we’ll select a PDF we want to upload as a template.
Once uploaded, it shows up in the admin. In this example, I created one called “Another Example.”
Currently, none of the form fields are mapped on the template. Changing that is a breeze. All you have to do is add them manually from the PDF Builder — just like I showed in the previous example.
As you can see, I added several input fields and a signature field.
Now, to choose how the data is stored in the form on Forminator, all you do is right-click (or use two fingers on a Mac) on the field and select Map Field. You’ll then click on the field in Forminator’s form for whatever selection you want.
All the data is quick and accessible to input.
Do this for every field that you want to include on the form and PDF.
If you’re happy with everything after hitting preview, just click Update and save your changes. It’s that easy!
The final method of creating a form that translates into a PDF is the…
This method creates a template by just using the PDF Builder. Like the other ways of creating PDFs, it’s fast and straightforward to set up.
You’ll start by going to Templates and Add New for a new template. As I previously demonstrated, name it and choose the settings that suit your needs.
Make sure Forminator is selected in Extensions, and choose a form that you’d like to use from the dropdown menu.
This time around, we will click the Empty PDF button because we will completely design this template.
Once clicking Empty PDF, it takes you to — you guessed it — an empty PDF page.
PRO TIP: When doing this, write everything down that you want to include on your PDF. That way, you don’t miss anything, and you can ensure that your PDF design is precisely how you want it before you start putting it together.
Once you know what you’d like to include, you can map all of the blank PDF fields by dragging items from the PDF Builder. Then, right-click (or use two fingers on a MacBook) to Map Field to the form inputs on the Forminator form.
As always, you can preview it. Once it looks good, click Save, and you’re all set!
The way users view, receive, and download PDFs all begins with shortcodes. Then, depending on where you add them, users can download, view, or save the PDF.
Each time you create a new template, it creates a shortcode accessible in the admin under Templates and each template. When clicking on Shortcodes, a dropdown appears that has several to choose from.
Copy and paste a shortcode of your preference. Then, we’ll head into the form settings in Forminator.
From here, you’ll click on the form that you want and select Edit and then Behavior.
We’re going to add this shortcode to the inline message that appears after the form submission. I’ll also add a little note beforehand. This particular shortcode that I copied is to save the PDF.
Additionally, after a user submits a form, they can receive an email. I’ll set up an Attachment option for the PDF that the user will receive.
Then, just copy the Attachment shortcode…
Go into Forminator, Email Notifications, and Add Notification (or edit, if you already have one set up). Finally, paste the shortcode that the user receives with your message.
After a user submits a form, they’ll get an email notification with the PDF attachment. Here’s what this example email looks like:
When the user downloads the PDF, it will show exactly what was submitted on the form that the user filled out.
This is a great way to provide contracts, quotes, or any form to your user and yourself — all in an easy and accessible way via PDF.
As you can see, E2Pdf teaming up with Forminator makes creating a PDF based on a form a reliable way to provide PDFs directly from your WordPress site.
There’s an endless amount of combinations you can create when it comes to forms that create PDFs. E2Pdf free version allows for one active page template at a time. That might be fine, depending on what you’re using Forminator and E2Pdf for.
However, if you need more templates than just one, be sure to take advantage of a special 20% discount for E2Pdf on our partners’ page.
And now, you should have the perfect PDF solution for you and your users!
Do you want to learn how to display full-size images in WordPress?
The latest version of WordPress automatically resizes large images to improve performance. But sometimes you may need to display images with larger dimensions.
In this tutorial, we’ll share four different ways to display full-size images on your WordPress site.
Earlier versions of WordPress allowed users to upload images with very large dimensions.
But, what happened is WordPress beginners were uploading images that were simply too large for the modern web. Large images lead to slow website loading speeds and poor performance.
To fix this issue, the WordPress 5.3 update changed how WordPress handles very large images.
For example, if you upload an image with the dimensions of 5000px by 7000px, then WordPress will resize the image to 2560px and scale the width to match the original dimensions.
Now, when a user visits a page with a previously large image, they’ll see the scaled-down version of that image.
This leads to improved website performance and happier users overall.
This new feature is useful for most WordPress website owners, but some users might need to display full-size images.
For example, if you’re a photographer or artist who sells your work, then you may want to display larger images on your website, so visitors can buy or download them.
Or, you could be running a website where larger images are a requirement, like a stock photo website or website that sells custom prints and pictures.
Maybe, you need one large image for your home page background image that’s bigger than the 2560px limits?
No matter what your reason for wanting a full-size image, we’ll show you how to do it, step by step.
There are 4 different ways you can display full-size images in WordPress.
Some methods work better for single images, while others are best for an entire image library.
You’ll want to choose the full-size image method that’s right for your goals.
If you only want to use one or two large images on your website, then this solution is probably best.
When you upload an image to WordPress that exceeds the dimensions, WordPress will scale your image and create a new one. But, the original image is still intact.
To display the original image dimensions, you’ll need to delete ‘-scaled’ from the end of the WordPress image URL and insert the image into your site with the modified link.
Simply head over to your media library by going to Media » Library and select your large image.
Now, locate your ‘File URL’ in the image box.
Next, you’ll want to delete ‘-scaled’ from the end of your image URL.
After that, you can copy the image URL and insert the image into your website.
Note that you’ll need to embed the image into your site using the link, minus the scaled portion.
To do this navigate to a post or page you want to add the image and click the ‘+’ icon to add a new block.
Then click the ‘Image’ icon to add an image block where you can paste your URL.
Click ‘Insert from URL’, then paste your full size image URL into the box and press the ‘Enter’.
After that, you’ll need to click ‘Publish’, or ‘Update’, if the post is already live, and your full-size image will now be viewable on your site.
You can follow this same process for every full-size image you want to add to your site. But, as long as you use the File URL minus ‘scaled,’ your WordPress images will display in full size.
The second method is using a WordPress plugin to disable image scaling across your site.
The plugin we recommend is called Disable “BIG Image” Threshold. This plugin offers one of the easiest workarounds for displaying big images on your site, and it’s entirely free to use.
First, you’ll need to install and activate the Disable “BIG Image” Threshold plugin. For more details on installing a plugin, see our step by step guide on how to install a WordPress plugin.
Once you’ve installed and activated the plugin on your site, it’ll automatically remove the big image threshold added by WordPress.
You’re free to add new images just as you were before the WordPress image update.
When this plugin is active, WordPress will not add the ‘-scaled’ attribute to any image.
Another option is to add a code snippet to WordPress that accomplishes the same goal as the plugin above.
If the plugin doesn’t work for some reason, or you don’t want to install too many plugins, then you can use this method.
The new WordPress image scaling feature uses a filter called big_image_size_threshold.
You’ll want to use the following code to disable this function:
add_filter( 'big_image_size_threshold', '__return_false' );
You need add this code in your theme’s functions.php file, in a site-specific plugin, or by using the Code snippets plugin.
The final option is to add a full-size image lightbox to your site. With this solution, you get the best of both world.
You can load smaller image thumbnails in your blog content, gallery, or carousel, and when clicked, it will popup with your full-size image.
To do this, we recommend using the Envira Gallery plugin. It’s the best WordPress image gallery plugin in the market and lets you easily add the lightbox popup image effect.
The first thing you’ll need to do is install the Envira Gallery plugin. For more details, see our step by step guide on how to install a WordPress plugin.
After installing and activating the plugin, see our step by step guide on creating an image gallery in WordPress with the lightbox effect.
Keep in mind that before you upload full-size images for your gallery, you’ll need to disable image scaling via the plugin or child theme methods above.
Otherwise, your lightbox images will be using the scaled-down version of the image.
Finally, it’s important to note that if you add images with large dimensions, it’s essential to optimize them for the web, so you don’t slow down your website.
We hope this article has helped you display full-size images in WordPress. You may want to see our guide on optimizing images for SEO and our expert pick of 40 useful tools to manage and grow your blog.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Display Full Size Images in WordPress (4 Methods) appeared first on WPBeginner.
Malte Ubl’s list for:
8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.
height and width attributes in HTML so you get proper aspect-ratio on first render.content-visibility: auto;loading="lazy"decoding="async"Apparently, there is but one tool that does it all: eleventy-high-performance-blog.
My thoughts:
lazy loading, do you really need to do the content-visibilty thing also? They seem very related. Direct Link to Article — Permalink
The post Maximally optimizing image loading for the web in 2021 appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Do you want to easily disable the admin bar in WordPress?
By default, you can easily disable the WordPress admin bar for any user from the dashboard. But this method can take time if you have a lot of registered users on your site.
In this article, we’ll show you how to disable the WordPress admin bar for all users except administrators.
By default, WordPress displays an admin bar on the top for all logged-in users. This toolbar is visible in the WordPress admin area as well as all other pages when you are logged in.
The WordPress admin toolbar contains useful shortcuts to different WordPress sections. The shortcuts available in the admin bar change based on a users’ role and permissions in WordPress.
However, when viewing the public pages on the front-end of your website, the admin bar can be a bit distracting. It may also affect your website’s design and user experience.
Luckily, there are multiple ways to easily disable the WordPress admin bar for all users except administrators.
WordPress allows each user to disable the admin bar by simply editing their user profile. As a site owner, you can also edit other user’s profiles and disable the admin bar for them.
If you want to disable the admin bar for any particular user in WordPress, you’ll need to edit their user profile.
Simply go to the Users » All Users page and then click on the ‘edit’ link for any user you want to disable the admin bar for.
This will bring you to the user profile editor page. From here, uncheck the box next to the ‘Show toolbar when viewing site’ option.
Scroll down and click the ‘Update User’ button to save your changes.
This will disable the admin bar for that particular user when they visit the website.
If you have a handful of users, then you can go ahead and manually disable the admin bar for all of them. However, if you run a membership site with a lot of users, then this method wouldn’t work.
Luckily, there are other ways to quickly disable the admin bar for all users except administrators.
This method allows you to quickly disable the WordPress admin for all users.
First, you need to install and activate the Hide Admin Bar Based on User Roles plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, go to the Settings » Hide Admin Bar Settings page. From here, check the boxes next to the user roles where you want to disable the admin bar.
Don’t forget to click on the ‘Save Changes’ button to store your settings.
This method requires you to add code to your WordPress theme files. If you have not done this before, then check out our guide on how to copy and paste code snippets in WordPress.
Simply add the following code to your theme’s functions.php file or a site-specific plugin.
add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
if (!current_user_can('administrator') && !is_admin()) {
show_admin_bar(false);
}
}
This code checks if the current user is not an administrator, and they are not viewing the admin dashboard. If both conditions match, then it will disable the WordPress admin bar.
Don’t forget to save your changes and check your website to make sure everything is working fine.
What if you wanted to disable the admin bar for all users including yourself and any other administrator on your site?
You can do this by modifying the code we showed earlier.
Simply add the following code to your theme’s functions.php file or a site-specific plugin.
/* Disable WordPress Admin Bar for all users */ add_filter( 'show_admin_bar', '__return_false' );
This code will disable the admin bar for all users when viewing the public pages of your website. All users will still be able to see the toolbar inside the WordPress admin dashboard.
We hope this article helped you learn how to disable the WordPress admin bar for all users except administrators. You may also want to see our ultimate WordPress security guide and our comparison of the best WordPress page builder for creating custom page layouts without any code.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Disable WordPress Admin Bar for All Users Except Administrators appeared first on WPBeginner.