How to Avoid Keyword Stuffing & Fix Over Optimization in SEO

Fotolia Subscription Monthly 4685447 Xl Stock

Are you worried that you’ve stuffed too many keywords into your content?

When it comes to optimizing your site for search engines, many new users have a tendency to stuff their content with keywords. However, this is not a good practice and could lead to over-optimization, which can then lead to being penalized by search engines like Google.

In this article, we will show you how to avoid keyword stuffing and fix over-optimization in SEO.

How to avoid keyword stuffing and fix over optimization in SEO

What is Keyword Stuffing?

Keyword stuffing is filling a web page with keywords to manipulate search engines in the hopes of getting higher rankings.

In the early days of search engine optimization (SEO), it was easy to exploit search engines and use keyword stuffing to boost ranking. However, search engines like Google have become a lot smarter and can penalize sites that use this as an exploit.

There are different ways you can do keyword stuffing in your content. For instance, repeating words and phrases unnecessarily, listing or grouping text together unnaturally, or inserting blocks of keywords that appear out of context.

Here’s an example of how using the same keyphrase repeatedly in a single paragraph can lead to keyword stuffing.

Keyword stuffing example

Another way site owners can stuff search terms is by adding hidden text to the source code of the page. Users won’t be able to see this, but search engine crawlers will. Google does not like this practice.

That said, let’s look at how keyword stuffing can impact your site’s SEO.

Why is Keyword Stuffing Bad for SEO?

If you’re starting out with WordPress SEO, then it can be easy to get carried away and add the same keyword lots of times in the content. However, you should know that it goes against the web search policies of Google.

This could lead to a penalty from Google, where your site can be demoted in rankings. In worst cases, Google can also remove your page from its search engine results.

Besides that, keyword stuffing also leads to poor user experience because the content can be come hard to read. People might not find your content useful and exit the website. As a result, your site might look spammy and you won’t be able to build a healthy relationship with your audience.

Having said that, let’s look at different ways you can fix over-optimization and avoid keyword stuffing.

1. Measure Your Content’s Keyword Density

The easiest way of avoiding keyword stuffing is by measuring the keyword density of your content. Keyword density checks how many times a search term is used within the content.

You can use WPBeginner Keyword Density Checker to get started. It is a free tool that doesn’t require signup, registration, or installation.

Simply enter the URL or text of your content into the tool and click the ‘Check’ button.

WPBeginner keyword density checker tool

Next, the tool will analyze your content and show you the results.

You can then see how many times a keyword is being used on the web page. For instance, in the screenshot below, you can see the word ‘parrotfish’ occurs 28 times or has a 13.66% density.

The Free WPBeginner Keyword Density Checker Tool

After finding the density of the search term, you can then edit your content and remove words and phrases that are repeated multiple times.

A best SEO practice suggests that keyword density should be around 2%. You can use this as a guideline and ensure your content isn’t over-optimized.

2. Assign a Primary Keyword to Each Content

Another way you can fix over-optimization for SEO is by assigning a primary keyword or phrase to each blog post and page.

You should conduct keyword research and pick a search term that best represents the main topic of your content. This way, your content will focus on a specific issue and you’ll be better able to fulfill the search intent

If you try to optimize a web page with multiple keywords with different intent, then you’ll leave your site in a big mess. It will confuse search engines from understanding your content and who it is for, which will prevent your page from ranking for the right keyword.

There are different keyword research tools you can use to find the primary search term for your content. We recommend using Semrush, as it is a complete SEO tool that offers powerful features.

The Semrush keyword overview tools

You get a detailed overview of the keyword along with other valuable information. For instance, Semrush shows search volume, intent, keyword difficulty, and more for the search term.

Once you’ve found a primary keyword, you can use the All in One SEO (AIOSEO) plugin to optimize your content for the search term. AIOSEO is the best SEO plugin for WordPress that lets you add focus keyphrases to each post and page.

Adding focus keyphrase for your blog post

The plugin analyzes your content for the keyphrase, shows a score, and provides tips to improve keyword optimization. AIOSEO also integrates with Semrush to help you find more related keywords.

To learn more, please see our guide on how to properly use focus keyphrases in WordPress.

3. Use Synonyms and Related Keywords

You can avoid keyword stuffing by using LSI (latent semantic indexing) or related keywords for your content.

These are search terms that are closely related to the primary keyword. Related keywords also help search engines better understand your content.

Using different variations of keywords, synonyms, or long tail phrases can also help avoid keyword stuffing. It gives you more flexibility in incorporating different topics into your article.

You can find related keywords using the WPBeginner’s Keyword Generator tool. Simply enter your main search term or topic in the search bar and click the ‘Analyze’ button.

Keyword generator tool

The tool is 100% free to use and generates over 300 keyword ideas.

You can then use different variations in your article to avoid keyword stuffing.

keyword analysis report

Besides that, you can also search the primary keyword on Google and then scroll down to see related searches.

This will give you even more keyword variations to use in your content and fix over-optimization issues.

Related searches

4. Add Value by Extending the Word Count

Next, you can create long-format content to cover the topic in detail and help achieve higher rankings.

Extending the word count gives you the opportunity to cover multiple sub-topics, answer different questions users might have, and easily use keyword variations to avoid stuffing.

This also helps you use different search terms naturally instead of forcing them in every sentence. Plus, it offers a better reading experience for users.

While extending the word count will help avoid keyword stuffing, you should also focus on content quality. Google and other search engines emphasize creating content that’s valuable. So, we recommend writing for your users instead of focusing on keyword placement.

One way of extending the word count and diversifying the use of keywords is by adding a FAQ section at the bottom of the post.

Include a FAQ section

5. Include Keywords in On-Page SEO Optimization

You can also avoid keyword stuffing and fix over optimization by placing the target search term in different places during the on-page SEO process.

On-page SEO is optimizing a webpage for search engines and users. It refers to anything you do on the page itself to boost its rankings in search engine page results (SERP).

By spreading the placement of keywords across different page elements, you can easily fix keyword stuffing issues. For instance, there are different page elements where you can add the main keyword. These include the title, meta description, subheadings, permalink, and more.

With AIOSEO, it is very easy to perform on-page SEO and ensure your content is properly optimized. You can add meta descriptions, focus keyphrases, build internal links, and get suggestions for improvement.

Post title and meta description example

Similarly, adding keywords to image alt text lets you rank for image search and allows you to diversify the use of primary search terms across the content.

It can help show screenshots from your blog post as featured snippets, helping you get more traffic.

Adding alt text, a description, caption, and more to images in WordPress

You can learn more by following our tips to optimize your blog posts for SEO.

We hope this article helped you learn how to avoid keyword stuffing and fix over-optimization in SEO. You may also want to see our guide on a 13-point WordPress SEO checklist for beginners and must-have WordPress plugins for business sites.

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 Avoid Keyword Stuffing & Fix Over Optimization in SEO first appeared on WPBeginner.

How To Screw Up Your WordPress Blog

Fotolia Subscription Monthly 4685447 Xl Stock
WordPress is a powerful platform that allows you to create stunning blogs and websites. However, if you’re not careful, you can inadvertently make mistakes that can negatively impact your blog’s functionality and appearance. In this article, we will discuss some common pitfalls to avoid when managing your WordPress blog. 1. Overloading with Plugins Plugins are […]

How to Bulk Edit Featured Images in WordPress

Wp Plugins

Do you want to bulk edit featured images in WordPress?

It’s easy to add, change, and remove featured images from your WordPress posts and pages. However, changing the featured images for multiple pages can take a lot of time and effort.

In this article, we will show you how you can save time by bulk editing featured images in WordPress.

How to bulk edit featured images in WordPress

Why You Might Need to Bulk Edit Featured Images in WordPress

Featured images, also known as post thumbnails, are an important part of many websites.

Almost all modern WordPress themes come with built-in support for featured images and display them across different areas of your WordPress website including your blog archives.

As an important part of your WordPress blog or website, you’ll want to make sure your featured images look good and represent your brand.

With that in mind, at some point you may need to bulk edit your featured images in WordPress. For example, you might install a new WordPress theme and decide to design new featured images that better compliment your new theme.

You can change the featured image for an individual page or post in the standard WordPress editor. However, changing the featured image for lots of different pages and posts can be frustrating and time-consuming.

With that in mind, let’s see how you can bulk edit featured images in WordPress.

How to Bulk Edit Featured Images in WordPress

The easiest way to bulk edit featured images in WordPress is by using the Quick Featured Images plugin.

This plugin makes it easy to change every single featured image across your website. It also has detailed filters that allow you to change the featured images for specific categories, tags, post types, and more.

Before you start using the Quick Featured Images plugin, just be aware that this plugin doesn’t allow you to undo your bulk edits. This can cause problems if you change your featured images and are unhappy with the results.

With this in mind, it’s a good idea to backup your WordPress website before using this plugin. If you don’t already have a backup solution, then there are several great WordPress backup plugins that allow you to automatically backup your website.

After creating a backup, you’ll need to install and activate the Quick Featured Images plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Featured Images » Overview in the left-hand menu. On this screen, click on the following link: ‘Bulk set, replace and remove featured images for existing posts.’

How to bulk edit featured images in WordPress

This screen allows you to bulk edit your featured images in a few different ways.

Your first option is the ‘Set the selected image as a new featured image’ radio button.

This setting finds all of the posts and pages that don’t currently have a featured image. You can then choose a new featured image and apply it to all of these pages and posts.

Bulk editing WordPress featured images

Another option is ‘Replace featured images by the selected image.’ You can use this to replace any existing featured images with a new image.

Next up is ‘Remove the selected image as featured image.’ This lets you choose a specific image, and then remove that featured image wherever it appears on your website. This is perfect for removing an outdated featured image, such as any image that features your site’s old logo.

After selecting one of these radio buttons, click on the Choose Image button.

Choosing a bulk edit action for your WordPress featured images

You can now choose the image that you want to use in the bulk edit. You can either select an image from your WordPress media library or upload a new file.

Once you’ve done that, scroll to the bottom of the screen and click on the ‘Next’ button.

Bulk editing featured images in WordPress

On this screen, you’ll be able to configure how WordPress performs the bulk edit.

The options you see may vary depending on whether you’re adding, changing, or removing a featured image. For example, if you selected the ‘Set the selected image as new featured image’ radio button then you can choose whether to override all existing featured images, or ignore them.

Override featured images in WordPress

To select which posts your bulk changes will apply to, scroll to the ‘Add a filter’ section.

By default, Quick Featured Images will apply its bulk edit to all pages and posts, across all of your site’s categories and tags.

If you don’t want to bulk edit every page and post, then you can create filters. These filters let you bulk edit featured images that meet a specific criteria.

Creating a filter for bulk editing featured images in WordPress

You can check more than one box. For example, you might check the ‘Post Type Filter’ and ‘Tag Filter’ boxes if you want to bulk edit posts that have a specific tag.

After checking one or more boxes, go ahead and click on the ‘Next’ button.

You will now see some settings that you can use to create your filter. For example, if you checked the ‘Post Type Filter’ box then you can choose between the ‘Posts’ or ‘Pages’ box.

The Quick Featured Images WordPress plugin

If you checked either the ‘Category Filter’ or ‘Tag Filter’ box, then you’ll have access to a dropdown menu.

You can open this dropdown and then choose the category or tag where you want to make the bulk edit.

Bulk editing WordPress featured images using filters

When you’re happy with how your filter is set up, scroll to the bottom of the screen.

You can then go ahead and click on the ‘Preview filtering’ button.

The Quick Featured Images plugin will now show a preview of all the pages and posts that will be affected by the bulk edit.

Previewing a bulk edit action

If you’re happy with the preview, then you can go ahead and click on the ‘Apply’ button.

Quick Featured Images will now bulk edit all of the relevant featured images across your WordPress website.

How to Set Multiple Images Randomly as Featured Images

When you bulk edit featured images in WordPress, you can sometimes end up using the same featured image for lots of different posts. These duplicate images can make your website look boring and repetitive.

With that in mind, you may want to set your featured images at random. You can use the Quick Featured Images plugin to select different images from your WordPress media library. The plugin will then add these featured images to your pages and posts at random.

In this way, you can bulk edit your images without creating lots of duplicate featured images.

To set your featured images at random, go to Featured Images » Overview and again click on ‘Bulk set, replace and remove featured images for existing posts’.

Once you’re here, click on ‘Set multiple images randomly as featured images.’

You can then click on the ‘Choose Images’ button to open the WordPress media library.

Replacing WordPress featured images at random

Here, hold down the Shift key and then click all the images that you want to randomly use as your featured images.

Once you’ve done that, click on the ‘Choose Images’ button. Then, scroll to the bottom of the screen and click on ‘Next.’

Bulk replacing multiple featured images in WordPress

By default, Quick Featured Images will apply these images to all your WordPress pages and posts at random.

Do you just want to use these images for certain content types, categories, or tags? Then you can create a filter by following the same process described above.

After adding a filter, Quick Featured Images will show a preview of all the pages and posts that it plans to update. You can check the thumbnail to see which image the plugin has randomly assigned to each page or post.

Replacing WordPress features images at random

If you’re happy with the preview, go ahead and click on ‘Apply.’ Quick Featured Images will now add the new images to your pages and posts.

How to Bulk Remove Featured Images in WordPress

Sometimes you may prefer not to use featured images on your website. For example, you might be trying to speed up your WordPress performance, or you may be using a theme that simply doesn’t look good with featured images.

You can use Quick Featured Images to easily remove all the featured images from your pages and posts.

You can also use filters to remove the featured images from pages, posts, or content that has a particular tag or category.

To bulk remove featured images in WordPress, simply click on the ‘Remove all featured images without existing image files’ radio button. You can then go ahead and click on ‘Next.’

Removing featured images from WordPress in bulk

Now, you can apply filters by following the instructions above.

Once you’ve created one or more filters, go ahead and click on the ‘Next’ button.

Building a bulk editor feature in WordPress

As always, the plugin will show a preview of all the pages and posts that it will change as part of this bulk edit. Since you’re deleting the featured image, it will show ‘No image set’ in the ‘Future Featured Image’ column, rather than a thumbnail preview.

If you’re happy to go ahead and remove the featured image for these pages and posts, then just click on the ‘Apply’ button.

Applying the bulk edit to your featured image in WordPress

We hope this article helped you learn how to bulk edit featured images in WordPress. You may also want to see our guide on the best Instagram WordPress plugins, and how to create automated workflows in WordPress to save time.

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 Bulk Edit Featured Images in WordPress first appeared on WPBeginner.

How to Add Social Media Icons to WordPress Menus (Easy Way)

Wp Plugins

Are you looking for a way to add social media icons to WordPress menus?

The logos for sites like Facebook and Twitter are instantly recognized by people all over the world. By adding these icons to your menus, you can promote your social media profiles in an eye-catching way that doesn’t take up a lot of space.

In this article, we will show you to add social media icons to WordPress navigation menus.

How to add social media icons to WordPress menus (easy way)

Why Should You Add Social Media Icons to Menus?

By adding social media icons to your website, you can encourage people to visit your different social networking profiles. This can get you more followers and engagement across Facebook, Twitter, Instagram, and more.

One option is to add social media icons to your WordPress sidebar or a similar widget-ready area. However, when people want to visit a new page, they typically look at your navigation menu first.

By adding social media icons to your WordPress menus, you can often get more clicks, engagement, and followers across all your social media profiles.

Social media icons can also grab the visitor’s attention without adding extra text to your menus. This allows you to promote lots of different profiles in a small amount of space.

That being said, let’s take a look at how to easily add social media icons to WordPress menus.

Video Tutorial

If you prefer written instructions, just keep reading. Simply use the quick links below to jump straight to the method you want to use:

The easiest way to add social media icons to WordPress menus is by using Menu Image. This free plugin allows you to add image icons to your navigation menus, including social icons.

When creating your social icons, you can use any image that you have uploaded to the WordPress media library.

For example, many of the top social media companies provide logos that you can use on your website, such as the Twitter brand toolkit. You can also download icons from online libraries like the Font Awesome website.

Menu Image also integrates with the Font Awesome plugin. This allows you to browse and import all the Font Awesome icons directly from the WordPress dashboard, including icons for all the major social networks. For this reason, we recommend installing the Font Awesome plugin.

For detailed instructions on how to set up Font Awesome, please see our guide on how to easily add icon fonts in your WordPress theme.

No matter how you plan to provide the social media icons, you will need to install and activate the Menu Image plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you may want to take a look at the icon sizes and change them if necessary. To do this, you need to go to Menu Image » Menu Image.

How to add social media icons to a WordPress menu

When creating your social icons, you can use any of the default WordPress image sizes, such as thumbnail, image, or large. Menu Image also lets you choose between three unique sizes that are set to 24×24, 36×36, and 48×48 pixels by default.

These sizes should work well for most WordPress websites, but you can change them by typing different numbers into the 1st, 2nd, or 3rd Menu Image fields.

Resizing social media icons in WordPress

With that done, click on ‘Save Changes’ to store your settings.

To add icons to a navigation menu, head over to Appearance » Menus. By default, WordPress will show your site’s primary menu.

Selecting a WordPress menu to edit

If you want to add social media icons to a different menu, then just open the ‘Select a menu to edit’ dropdown.

You can then choose a menu from the list and click on ‘Select.’

Editing a WordPress navigation menu

For step-by-step instructions on how to create a new menu, please see our guide on how to add a navigation menu in WordPress.

To start, you will need to add each social profile to your menu as a new link.

When you are ready, click to expand the ‘Custom Links’ section and then type in the address of the social media page you want to use. For example, you might enter the URL of your Facebook group or YouTube channel.

You will also need to type in some ‘Link Text’. In a later step, you will have the option to change where this title appears in the menu or even hide it completely.

Adding link text to a website navigation menu

With that done, click on ‘Add to Menu.’

This item will now appear in the right-hand column.

Adding social links to a WordPress website

To add a social media icon, simply hover over the new menu item.

Then, click on the ‘Menu Image’ button when it appears.

Adding icons and images to a WordPress menu

Note: If you don’t see a ‘Menu Image’ button, then click on ‘Save Changes’. Now, the ‘Menu Image’ button should appear when you hover over any item in the menu.

You can now decide whether to use an image from your WordPress media library or an icon provided by Font Awesome.

To use a ready-made Font Awesome icon, click on the radio button next to ‘Icon’.

Adding Twitter, Facebook, and other social icons to WordPress

Then, select ‘Fontawesome’.

You can then click on ‘Brands’.

Adding branded icons to a WordPress navigation menu

You will now see all the branded icons, including icons for all the major social networks. When you see the image you want to use, just give it a click.

Another option is using your own icon from the WordPress media library by selecting the ‘Image’ radio button. Then, click on the ‘Set Image’ link.

Adding any file or image to a WordPress navigation menu

You can now either choose an image from the WordPress media library or upload a new file from your computer.

No matter where you get the icon from, Menu Image will show a preview on the right.

Previewing icons in a website or blog navigation menu

You can now change whether the link title appears above, below, before, or after the social media icon using the ‘Title position’ settings.

Many social media icons are instantly recognizable, so the link title may be unnecessary. If you are adding lots of social icons to a navigation menu, then titles can even make your menu look more messy and complicated.

With that being said, you may want to hide the title by selecting the ‘Hide’ radio button.

Hiding the menu link title text

As you make changes, the live preview will update automatically, so you can try different settings to see what looks the best.

Finally, if you are using your own image, then you can resize the social media icons using the ‘Image Size’ dropdown.

Resizing social icons on a WordPress navigation menu

Bigger icons will grab the visitor’s attention, but they can also be distracting. With that in mind, you may want to try different sizes to see what works best on your WordPress blog.

When you are happy with how the social media icon is set up, simply click on ‘Save Changes’.

Publishing social icons on a WordPress website

Simply repeat these steps to add more icons to your WordPress menu.

You can even add icons to other important items in the navigation menu. For example, you might add icons to your contact form or WooCommerce checkout page.

When you are happy with how the menu is set up, just click on ‘Save Menu.’

Publishing a menu with social icons

Now, you can visit your website to see the new social media icons in action.

This is how it looked on our demo website.

Adding social icons to a WordPress menu

Method 2: Using the Full Site Editor (Block Themes Only)

WordPress has a built-in Social Icons block that allows you to create a menu containing social media icons and then display them in a nice layout.

An example of a social media navigation menu

This block comes with built-in icons for all the major social networks, so you don’t need to install a plugin like Font Awesome or upload icons to your media library. However, you can only add social media icons and links to the Social Icons block, so it isn’t as flexible as the Menu Image plugin.

If you are using a block theme, then you can add a Social Icons block to any part of your website, such as the header or footer. In this way, you can show a social media menu across your entire website.

To get started, head over to Appearance » Editor in the WordPress dashboard.

Accessing the full site editor

By default, the full site editor shows your theme’s home template, but you can add social icons to any template or template part. You can even add social media icons to parts of your website you can’t edit using the standard WordPress content editor.

For example, you can add a social media menu to your site’s 404 page template.

To see all the available options, you need to select either ‘Templates’ or ‘Template Parts’.

Adding social icons to a block-based template

You can now click on the template or template part that you want to edit.

As an example, we will add social media icons to the WordPress header, but the steps will be the same no matter which template you select.

Adding Twitter, Facebook, Instagram and other social icons to a block-enabled template

After making your choice, WordPress will show a preview of the template or template part.

To continue, click on the small pencil icon.

Editing a block-based header template

With that done, click on the blue ‘+’ icon in the top-left corner.

In the search bar, you must type in ‘Social Icons.’

Adding the Social Icons block to WordPress

When the right block appears, drag and drop it onto the theme template.

To add the first icon, just click on the ‘+’ icon inside the block.

Adding social icons to a WordPress template

In the popup that appears, type in the icon you want to add, such as ‘Twitter’ or ‘Facebook’.

When the right icon appears, simply click to add it to your WordPress blog.

Adding a Twitter icon to a WordPress navigation menu

Now, click on the new social media icon.

This opens a small bar where you can type in the URL you want to link to, like your Facebook page.

Adding URLs to a social media menu

To add more social icons to WordPress, simply click on the ‘+’ icon and repeat the same process described above.

After adding all the social media icons, you may want to customize the block. To do this, click to select the Social Icons block and then click on the ‘Block’ tab.

Customizing a social block in WordPress

You can change the icon’s justification, alignment, and orientation using the ‘Layout’ settings.

By default, all the social media links will open in the same tab. To keep visitors on your website, you may want to click to enable the ‘Open links in new tab’ toggle.

Opening website links in a new browser tab

By default, WordPress shows the social icons only, without any text.

If you want to show text next to each icon, then click to enable the ‘Show labels’ toggle.

Adding labels to a social menu

Next, click on the ‘Styles’ tab.

Here, you can change the button style by clicking on ‘Default’, ‘Logos Only’, or ‘Pill Shape’.

Adding button styles to a navigation menu

Finally, you can change the space between the social icons using the settings under ‘Block Spacing’.

When you are happy with how the menu looks, click on the ‘Save’ button.

Publishing a social icons block in WordPress

Now, if you visit your website, then you will see the social media icons live.

Bonus: How to Promote Your Social Media Profiles

Adding social media icons to WordPress menus is a great way to get more followers and engagement across your different accounts. However, there are lots more ways to promote your Twitter, Facebook, and other social profiles.

The best way to get more followers and engagement is by embedding a live social feed on your website. This allows you to show the latest posts from multiple accounts, along with buttons that visitors can use to engage with your posts or follow you on social media.

The best way to add social media feeds to your website is by using Smash Balloon. It’s the best social media feed plugin for WordPress and lets you embed live feeds from Twitter, Instagram, Facebook, and more.

The Smash Balloon social media WordPress plugin

For more information, please see our guide on how to add social media feeds to WordPress.

We hope this article helped you learn how to add social media icons to WordPress menus. You may also want to see our guide on how to embed a Facebook video in WordPress or see our expert picks for the best Twitter plugins for 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 Add Social Media Icons to WordPress Menus (Easy Way) first appeared on WPBeginner.

12 Ways To Monetize Your WordPress Blog

Fotolia Subscription Monthly 4685447 Xl Stock
In today’s world, content creation has become a popular medium for self-expression and sharing opinions or expertise. However, many creators devote significant time and effort to their blog posts without earning much in return. Unfortunately, crafting an article requires a considerable amount of time and dedication. Over time, you may have encountered numerous blogs that […]

How to Properly Add Images in WordPress (Step by Step)

Category Image 091

Are you looking for the right way to add images to your WordPress website or blog?

By adding images in WordPress correctly, you can improve the visual appeal, accessibility, and SEO of your website. You can even allow users to upload their own images and use them on your site or in your competitions.

In this article, we will show you how to properly add images in WordPress.

Add images in WordPress properly

The Importance of Correctly Uploading Images in WordPress

Sometimes, users directly copy an image from the source and paste it into their website content. Unfortunately, this can cause problems like slow pages, poor user experience, and poor SEO.

When you add images to your WordPress website, it’s important to do it properly. This means using the right file format, file name, and alt text.

We recommend naming your images with descriptive words separated by dashes. For example, you might use the file name ‘bali-vacation-photo.jpg’ for an image on your travel blog.

Properly adding images also means resizing your images so that they load quickly and look good on all devices. For example, some image formats like JPEG, are more compressed than others, which means that these images will take up less space on your server and will take less time to load.

By using these formats, along with an image compression plugin for the images on your WordPress blog, you can improve the user experience of your website.

Similarly, by using the Image block in WordPress and properly optimizing your images for SEO and alt text, you can make it easier for search engines to index your images.

This can increase your website’s rankings and improve the accessibility of your website for people with disabilities.

That being said, let’s see how to properly add images in WordPress. We will cover several methods, and you can use the quick links below to jump to the different sections of our tutorial:

How to Add Images in the Block Editor (Gutenberg)

You can easily add images in the WordPress block editor by using the Image block.

First, you need to open the existing or new page/post where you want to add an image.

Once you are there, click the ‘+’ button in the top left corner of the screen to open the block menu. From here, you must find and add the Image block to the post or page.

Add image block to the post

Once you have done that, click the ‘Media Library’ button to launch the ‘Select or Upload Media’ prompt on the screen.

From here, you can switch to the ‘Upload Files’ tab if you want to upload an image from your computer.

However, if you want to add an image from the media library, then you can also do that by switching to the ‘Media Library’ tab.

Select image from the media library

Upon adding an image, you will need to add alt text for it in the left column. This alt text is crucial for image SEO as it helps search engines understand the context of the image. It also allows people with screen readers to see this information about your images.

You can also add a title and caption describing the image in the right column. Captions are the visible text descriptions of your images, while the title will appear when a user hovers their mouse over the image.

For details, you may want to see our beginner’s guide on how to add captions to images in WordPress.

Next, just click the ‘Select’ button to add the image to your page or post.

Fill in image details

Now that you have uploaded an image, you can further customize its size, dimensions, border, and style from the block panel on the right.

For details, check out our tutorial on how to add and align images in WordPress.

Images settings in the block panel

Finally, click the ‘Update’ or ‘Publish’ button to store your settings.

You have now properly added an image in the Gutenberg editor.

How to Add Images in the Classic Editor

If you are still using the old classic editor in WordPress, then you can use this method.

First, you need to visit the page or post where you want to add the image from the WordPress dashboard. Once you are there, just click the ‘Add Media’ button to launch the media library.

Click the add media button

After that, you can switch to the ‘Upload Files’ tab to upload an image from your computer.

Alternatively, for adding an image from the media library, just switch to the ‘Media Library’ tab.

Upload image file in the classic editor

Upon adding an image, you will need to add alt text and a title for it. You can also add a description and caption if you wish.

You can simply describe the image for all these options. This will help search engine index your image and increase your website’s visibility.

Next, go ahead and click the ‘Insert into Post’ button.

Configure attachment details in classic editor

Now, the image will be added to your WordPress post or page.

From here, you can change its alignment by using the alignment icons above the image. You can also further edit an image by clicking on the pencil icon.

Click the Pencil icon to edit an image

This will open the ‘Image details’ prompt on your screen, where you can change the size and add image title attributes, CSS classes, alignment, and more.

Once you are done, just click the ‘Update’ button to save the changes you made.

Edit image in the classic editor

After that, simply click the ‘Publish’ or Update’ button to save your post.

How to Add Images in the Media Library

If you want, you can also directly add an image to the media library. Keep in mind that after adding an image to the media library, you will still need to open a post or page and insert the Image block.

To add an image from the media library, you must visit the Media » Add New page from the WordPress admin area.

Once you are there, click the ‘Select Files’ button to upload an image from your computer. Then, click the ‘Edit’ link next to the image.

Add Image in the media library and click the Edit link

This will take you to the ‘Edit Media’ page, where you can start by changing the title for the image. After that, you can add alt text, a caption, and a description by scrolling down.

Once you have done that, you can also click on the ‘Edit Image’ button.

Click the Edit Image button

This will direct you to another page, where you can crop, scale, rotate, or flip the image according to your liking. For detailed instructions, please see our beginner’s guide on how to do basic image editing in WordPress.

Once you are satisfied, just click the ‘Update’ button to save your changes.

basic editing features in WordPress

This will take you back to the ‘Edit Media’ page, where you have to click on the ‘Update’ button again to store your settings.

You have now successfully added an image to the media library.

Next, visit the post where you want to add this image from the WordPress admin sidebar. Once you are there, click the ‘+’ button to add an Image block to the post.

Next, you need to select the ‘Media Library’ button.

Image block

This will launch the ‘Select or Upload Media’ prompt on your screen, where you will notice the image that you uploaded in the media library at the top.

On selecting the image, you will see that its title, alt text, caption, and description have already been added to it from the media library page.

Now, simply click the ‘Select’ button to upload the image to the block editor.

Add image from the media library

Finally, click the ‘Publish’ or ‘Update’ button to store your settings.

How to Optimize an Image for WordPress SEO

Once you have added an image to a post/page, it is also crucial to optimize it for search engines. Unfortunately, WordPress does not offer any built-in advanced SEO features for images.

This is where All in One SEO for WordPress (AIOSEO) comes in.

It is the best WordPress SEO plugin on the market that makes it super easy to optimize your content, including images, for search engines.

First, you need to install and activate the AIOSEO plugin. For more instructions, see our step-by-step guide on how to install a WordPress plugin.

Note: AIOSEO also has a free version. However, you will need the pro version of the plugin to unlock the Image SEO feature.

Upon activation, you will have to configure the setup wizard.

For more details, see our guide on how to set up All in One SEO for WordPress correctly.

AIOSEO setup wizard

Next, head over to the All in One SEO » Search Appearance page from the WordPress admin sidebar and switch to the ‘Image SEO’ tab.

After that, scroll down and click the ‘Activate Image SEO’ button to unlock the feature.

Activating the Image SEO Module in AIOSEO

You will now be able to see the Image SEO settings. Here, you will notice different tabs for the title, alt text, caption, description, and filename.

Configure Automatic Image Titles

Once you switch to the ‘Title’ tab on the Image SEO page, you can start by creating a title format for your images using smart tags.

These smart tags will then automatically generate title attributes for your images. This is what a visitor will see when they hover their mouse over your images.

For example, if you want each image title attribute to use the image title and the site title, then you can add these smart tags in the ‘Title Format’ field.

Add smart tags to configure title SEO

After that, you can also enable the Strip Punctuation option if you want AIOSEO to automatically remove some characters when creating an image title from the filename.

For example, if you use dashes when saving an image file like ‘an-example-image’, then you can choose the ‘Dashes (-)’ option in the ‘Characters to Convert to Spaces’ section.

Once you do that, AIOSEO will automatically remove these dashes and turn them into spaces, making the image title ‘an example image’.

Configure strip punctuation and casing options

After that, scroll down to the ‘Casing’ section.

From here, you can choose a casing option for your title. We recommend picking sentence case or title case to make your titles more readable.

Configure Automatic Alt Tags

After configuring title settings, switch to the ‘Alt Tag’ tab from the top.

From here, you can use the smart tags next to the ‘Alt Tag Format’ option to automatically generate alt text for all your images.

After that, you can also enable the Strip Punctuation setting if you want characters like dashes (-) or underscores (_) to be converted into spaces.

SEO settings for alt tags

Similarly, if there are characters like numbers or plus signs (+) that you don’t want AIOSEO to strip when creating the alt text, then you can check the boxes for these options in the ‘Characters to Exclude from Being Stripped’ section.

You can also select a casing for your alt text.

Configure Automatic Captions and Descriptions

To generate automatic captions for your images, switch to the ‘Captions’ tab.

From here, make sure that the ‘Autogenerate Caption on Upload’ option is enabled. You can then select the smart tags that will be used to generate captions for your images.

Enable Captions toggle and configure its smart tags

Next, you can also use the Strip Punctuation feature to exclude or include characters in the captions and choose a casing for them.

Once you are done, you need to switch to the ‘Description’ tab from the top.

From here, make sure that the ‘Autogenerate Description on Upload’ option is enabled. You must also select the smart tags you want to use for generating automatic image descriptions.

Enable the Description toggle and configure its smart tags

Next, you can also use the Strip Punctuation feature to include/exclude characters like underscores, apostrophes, or numbers in the description.

After that, simply select a casing for your image descriptions.

Strip punctuation and casing settings

Configure Automatic Filenames

As we mentioned earlier, we recommend giving your image files SEO-friendly file names. You can do this before uploading your images, or AIOSEO can do it for you automatically.

Once you switch to the ‘Filename’ tab from the top, you will notice that AIOSEO has already configured the Strip Punctuation setting for you.

However, if there are any more characters that you want AIOSEO to delete from your image filenames when creating titles or alt text, then you can type those characters into the ‘Words to Strip’ box.

AIOSEO settings for Filename

After that, you can also select a casing for your filenames.

Once you are done, don’t forget to click the ‘Save Changes’ button to store your settings.

You have now successfully optimized your images for SEO, and AIOSEO will automatically generate titles, alt text, captions, and descriptions for all your images.

For more detailed instructions, please see our beginner’s guide on how to optimize images for search engines.

Bonus: Allow Users to Upload Images in WordPress

You may also want to allow your users to upload their own images to your WordPress website. This can come in handy if you are hosting a contest or running a photography website that accepts user-generated images.

For this, you can use WPForms, which is the best contact form plugin on the market. It comes with a drag-and-drop builder that makes it super easy to create any kind of form you want, including an image submission form.

First, you will need to install and activate the WPForms plugin. For details, see our instructions on how to install a WordPress plugin.

Upon activation, head over to the WPForms » Add New screen from the WordPress dashboard to launch the form builder.

From here, you need to type a name for your form and then click the ‘Use Snippet’ button under the ‘Simple Contact Form’ template.

Select contact form template

This will load the form template in the form builder, where you will notice its preview on the right and the available fields in the left column.

From here, go ahead and drag and drop the File Upload field onto the form and click on it to further customize its settings.

Add file upload field

From here, you can change the label and description of the field and even specify the extensions that are allowed.

For example, if you want to allow JPEG and PNG files only, then you must type these options into the ‘Allowed File Extensions’ field. Keep in mind to separate each extension with a comma.

After that, you can also configure the maximum image file size and number of uploads in the left column.

Configure field settings

For more detailed instructions, you may want to see our tutorial on how to allow users to upload images in WordPress.

Once you are done, just click the ‘Save’ button to store your settings.

Next, open the page/post where you want to add the image upload form. Once there, click the ‘+’ button in the top left corner of the screen to open the block menu

From here, you need to add the WPForms block to the page/post.

Locate and add the WPForms block

Just choose the image file upload form that you created from the dropdown menu.

Finally, click the ‘Update’ or ‘Publish’ button to store your settings. Now, you can visit your WordPress site to view the form in action, and visitors will be able to submit their images using the form.

We hope this article helped you learn how to properly add images in WordPress. You may also want to see our beginner’s guide on how to change the block height and width in WordPress, and our expert picks for the best WordPress themes for graphic designers.

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 Properly Add Images in WordPress (Step by Step) first appeared on WPBeginner.

How to Make Recipe Cards in WordPress (Step by Step)

Category Image 091

Are you looking to add recipe cards to your WordPress content?

Millions of people online are searching for recipes every single day. Whether it’s for whipping up a quick weekday dinner or impressing guests with a show-stopping dessert, recipe cards with easy-to-follow instructions can guide readers to recreating their desired dish.

In this article, we will show you step-by-step how to make recipe cards in WordPress.

make-recipe-cards-in-post

What Are Recipe Cards And Why Use Them?

Recipe cards provide the ingredients and instructions for cooking a particular dish. These cards often feature a structured format with sections such as:

  • Recipe title
  • List of ingredients
  • Step-by-step instructions
  • Additional notes or tips
  • Nutritional facts

They’re essentially blueprints for whipping up delicious dishes. Recipe cards are perfect for cooks of all skill levels, especially busy people in need of quick and easy meal ideas. They’re laid out in a tidy format, allowing your readers to recreate your meals easily and simply.

recipe card

Besides that, they’re highly shareable, which is helpful for building your social media presence. Also, recipe cards use structured data (schema markup), meaning they have better odds of appearing higher in search engine rankings.

Chances are, if you run a food blog, have a restaurant website, or are a health and wellness professional, you already have thought about adding recipes to your site.

Best of all, it doesn’t take complex coding or a ton of technical know-how to do so. Let’s dig in and see how it’s done.

Adding Recipe Cards With WP Tasty Recipes

The best way to add recipe cards is with a recipe plugin like WP Tasty Recipes. It’s a simple plugin that lets you customize your recipes in lots of ways.

Step 1: Installing WP Tasty Recipes Plugin

To get started, you’ll need to install and activate the WP Tasty Recipes plugin. For more information, check out our detailed tutorial on how to install a WordPress plugin.

Next, head over to the WP Tasty » Dashboard from your WordPress admin. Click on ‘Enter License.’

enter license

A popup window will appear. Simply paste your license key from the downloads page from your WP Tasty account.

Select the ‘All Plugins’ and then hit the ‘Save License’ button.

Save license

Step 2: Adjusting the Recipe Card Design

Next, it’s a good idea to adjust the design of the recipe card to fit your needs.

Go to the WP Tasty » Tasty Recipes page from your WordPress dashboard.

Under the Design tab, you can customize how your recipe card will look.

design recipe card

You can customize elements like as button colors, title and subtitle colors, star ratings, and even a social footer.

If you scroll all the way to the bottom, you’ll notice that the ‘Default Template’ is selected.

change recipe card template

Click on the left and right arrows and pick the template that you find most visually appealing and suits your site’s design the best.

From there, make sure to click ‘Save Changes.’

Step 3: Adding Recipe Cards to a Post in WordPress

Next, head over to the post that you want to add your recipe card to. Click on the ‘+’ icon in the upper-left of the block editor to add a new block.

Here, you can search and select the ‘Tasty Recipe’ block.

tasty recipe block

From there, a window will appear on the screen. This is where you’ll need to add all of the information about your recipe.

It’s important to add as many details as possible so that Google can easily identify the information and give you the best odds to display rich snippets in search results.

create recipe

Here, you’ll be able to add the following information:

  • Title
  • Recipe image
  • Author Name
  • Description
  • Ingredients
  • Instructions
  • Notes
  • Details such as prep time, cook time, yield, category, etc.
  • Keywords
  • Video URL
  • Equipment
  • Nutrition

Once you’ve filled out the information about your recipe, click the ‘Insert’ button at the bottom.

Insert recipe card

After that, all you have left is to make sure that your recipe card is live on the site!

Step 4: Publishing Your Recipe Card

Now, you’re ready to publish your recipe card. Just hit the ‘Publish’ or ‘Update’ button at the top.

publish recipe card

Now, just go to the front end of your website to see your recipe card in action.

Here’s what our S’mores Brownies card looks like on the front end of our demo site.

example of recipe card

Step 5: Adding the ‘Pin It’ Button to Your Recipe Card (Optional)

If you upgraded to the WP Tasty ‘All Access’ plan or bought the Tasty Pins product, then you may want to also add a ‘Pin It’ button to your recipe card so that your readers can easily add the recipe to a Pinterest board.

When readers pin your recipe to Pinterest, it will show your image to more users on the platform. As a result, that can potentially drive more traffic to your website.

Scroll to the bottom of your block editor and then add a Pinterest image, title, and text, which will be used to optimize your images for SEO and Pinterest.

tasty pins

This will apply a ‘Pin It’ button to all images related to the recipe card, making your content much easier to share.

Bonus: Adding SEO-Friendly Recipes With Schema in WordPress

Making recipe cards is only one piece of the puzzle. You also have to make sure you drive as much traffic as possible to your recipes. That could ultimately lead to more sales of your cookbook, affiliate sales, or bookings for your services.

The best way to do that is to add a recipe schema markup in WordPress by using the All in One SEO plugin.

Once installed and activated, you’ll have the ability to generate any type of schema in your posts or pages.

You’ll need to scroll to the bottom of the block editor where it says ‘AIOSEO Settings.’ Then, under the ‘Schema’ tab, select ‘Generate Schema.’

generate schema for recipe card

From here, a popup window will appear where you’ll see a variety of schema templates from which to choose. This does all the heavy lifting for you since it creates structured data based on the type of post you’re publishing.

In this case, we’d click on the ‘+’ icon next to ‘Recipe.’

recipeschemaaddrecipeschema

You’ll enter all of the details of your recipe in the Schema Generator.

You and your visitors won’t be able to see a difference on your website, but search engine bots will have the information they need for featured snippets.

recipeschemaaioseoaddschema

For more details, check out our full tutorial on how to add SEO-friendly recipe schema in WordPress.

We hope that this article helped you learn how to make recipe cards in WordPress. You may also want to see our showcase of the best WordPress themes for recipe blogs and our tutorial on how to easily create a restaurant website with 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 Make Recipe Cards in WordPress (Step by Step) first appeared on WPBeginner.

How to Display Any Number of Posts in a WordPress Loop

Category Image 052

Do you want to show multiple blog posts in a WordPress loop?

Using the loop, WordPress processes each of the posts to be displayed on the current page. It formats them according to how they match specified criteria within the loop tags.

In this article, we will show how to display any number of posts in a WordPress loop.

How to display any number of posts in a WordPress loop

What Is the WordPress Loop?

The loop is used by WordPress to display each of your posts. It is PHP code that’s used in a WordPress theme to show a list of posts on a web page. It is an important part of WordPress code and is at the core of most queries.

In a WordPress loop, there are different functions that run to display posts. However, developers can customize how each post is shown in the loop by changing the template tags.

For example, the base tags in a loop will show the title, date, and content of the post in a loop. You can add custom tags and display additional information like the category, excerpt, custom fields, author name, and more.

The WordPress loop also lets you control the number of blog posts that you show on each page. This can be helpful when designing an author’s template, as you can control the number of posts displayed in each loop.

That being said, let’s see how to add any number of posts to a WordPress loop.

Adding Any Number of Posts in a WordPress Loop

Normally, you can set the number of posts to be displayed in the loop from your WordPress admin panel.

Simply head to Settings » Reading from the WordPress dashboard. By default, WordPress will show 10 posts.

Reading settings WordPress

However, you can override that number by using a Super Loop, which will allow you to display any number of posts in that specific WordPress loop.

This will allow you to customize the display settings of your pages, including author profiles, sidebars, and more.

First, you will need to open a template file where you would like to place the posts and then simply add this loop:

<?php
// if everything is in place and ready, let's start the loop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

	// to display 'n' number of posts, we need to execute the loop 'n' number of times
	// so we define a numerical variable called '$count' and set its value to zero
	// with each iteration of the loop, the value of '$count' will increase by one
	// after the value of '$count' reaches the specified number, the loop will stop
	// *USER: change the 'n' to the number of posts that you would like to display

	<?php static $count = 0;
	if ( $count == "n" ) {
		break;
	} else { ?>

		// for CSS styling and layout purposes, we wrap the post content in a div
		// we then display the entire post content via the 'the_content()' function
		// *USER: change to '<?php the_excerpt(); ?>' to display post excerpts instead

		<div class="post">
			<?php the_title(); ?>
			<?php the_content(); ?>
		</div>

		// here, we continue with the limiting of the number of displayed posts
		// each iteration of the loop increases the value of '$count' by one
		// the final two lines complete the loop and close the if statement

		<?php $count ++;
	} ?>
<?php endwhile; ?>
<?php endif; ?>

Note: You will need to replace the value of ‘n‘ in the if ( $count == "n" ) part of the code and choose any number.

An easy way to add this code to your WordPress website is by using the WPCode plugin. It is the best code snippet plugin for WordPress that helps you manage custom code.

By using WPCode, you don’t have manually edit theme template files and risk breaking something. The plugin will automatically insert the code for you.

First, you need to install and activate the free WPCode plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, you can head to Code Snippets » + Add Snippet from your WordPress dashboard. Next, you need to select the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

After that, simply paste the custom code for the WordPress loop that we showed you above into the ‘Code Preview’ area.

You will also need to enter a name for your code and set the ‘Code Type’ to ‘PHP Snippet’.

Add custom loop code to WPCode

Next, you can scroll down to the ‘Insertion’ section and choose where you would like to run the code.

By default, WPCode will run it everywhere on your WordPress website. However, you can change the location to a specific page or use a shortcode to insert the code.

Edit insertion method for code

For this tutorial, we will use the default ‘Auto Insert’ method.

When you are done, don’t forget to click the toggle at the top to make the code ‘Active’ and then click the ‘Save’ button. WPCode will now deploy the code on your WordPress blog and display the specified number of posts in the WordPress loop.

We hope this article helped you learn how to display any number of posts in a WordPress loop. You may also want to see our guide on how to exclude sticky posts from the loop in WordPress and our expert picks for the must-have WordPress plugins for business websites.

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 Any Number of Posts in a WordPress Loop first appeared on WPBeginner.

How to Email Authors When Articles Are Published in WordPress

Featured Imgs 23

Do you want to email authors when their articles are published in WordPress?

If you run a multi-author blog, then notifying authors when their blog posts are published keeps them informed. Plus, it can also help increase engagement on your website since authors can quickly share their content and participate in discussions.

In this article, we will show you how to email authors when their articles are published in WordPress.

Email authors when their articles are published in WordPress

Why Email Authors When Their Articles Are Published in WordPress?

By notifying authors when their posts are published on your WordPress blog, you allow them to immediately promote their work on social media platforms and communicate with readers in the comments section.

Additionally, notifications keep authors updated about the publication statuses for different posts. This helps build trust among your team by showing that you value the writer’s contributions to your multi-author blog.

By alerting authors immediately upon post publication, you also give them the opportunity to view their content and correct any typos or errors before visitors have a chance to read it.

Having said that, let’s see how to easily email authors when their articles are published in WordPress. You can use the links below to jump to the method of your choice:

Method 1: Email Author When Their Article Is Published in WordPress Using a Plugin

If you prefer to use a plugin to notify your authors, then this method is for you.

First, you need to install and activate the PublishPress Planner plugin. For detailed instructions, you may want to see our beginner’s guide on how to install a WordPress plugin.

Note: You can also use the PublishPress Pro plan to unlock more features like Slack integration, send reminder notifications, and meta posts. This will help you improve the overall editorial workflow of your multi-author blog.

Upon activation, you need to visit the Planner » Settings page from the WordPress admin sidebar and switch to the ‘Notifications’ tab.

Once you are there, type in the admin email address that will be used to send emails to your authors next to the ‘Email from’ option.

After that, check the ‘Always notify the author of the content’ option to send emails to authors every time their posts are published on your website.

Check the always notify author option

If you also want to notify the users who edited the post, then you can check the ‘Always notify users who have edited the content’ option.

Once you are done, click the ‘Save Changes’ button to store your changes.

Now, when you publish an author’s post, they will receive an email notification that looks like this:

Preview of author email notification upon post publication

Method 2: Email Author When Their Article Is Published in WordPress Using Code

If you don’t want to use a plugin, then you can also automatically send emails to authors by adding code to your theme’s functions.php file.

However, the smallest error when adding code can break your website and make it inaccessible.

That is why we recommend always using WPCode. It is the best WordPress code snippets plugin on the market that makes it super safe and easy to add custom code to your website.

First, you need to install and activate the WPCode plugin. For details, you can see our step-by-step guide on how to install a WordPress plugin.

Note: You can also use WPCode’s free plan for this tutorial. However, upgrading to the pro version will give you access to more features like a code snippets library, conditional logic, CSS snippets, and more.

Upon activation, simply visit the Code Snippets » + Add Snippet page from the WordPress dashboard. Then, click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

This will take you to the ‘Create Custom Snippet’ page, where you can start by adding a title for the code snippet.

After that, select the ‘PHP Snippet’ option from the Code Type dropdown menu on the right.

Choose the PHP Snippet option for emailing authors upon post publication

Now copy and paste the following custom code into the ‘Code Preview’ box:

function notifyauthor($post_id) {
 
$post = get_post($post_id);
$author = get_userdata($post->post_author);
$subject = "Post Published: ".$post->post_title."";
 
$message = "
      Hi ".$author->display_name.",
       
      Your post, \"".$post->post_title."\" has just been published.
       
      View post: ".get_permalink( $post_id )."
       
      Thanks"
      ;
       
   wp_mail($author->user_email, $subject, $message);
}
add_action('publish_post', 'notifyauthor');

This code runs when a new post is published in WordPress. It sends an email notification to the author using the subject and message defined in the code. Feel free to change the subject and message fields to meet your needs.

Once you have done that, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode. The code will be automatically executed on your website upon activation.

Choose an insertion method

Finally, scroll back to the top and toggle the ‘Inactive’ switch to ‘Active’.

After that, click the ‘Save Snippet’ button to store your settings.

Save the snippet for emailing authors upon post publication

Now, when you publish a post, the author will automatically receive an email notification.

It will look like this:

Preview for sending email notification to authors upon post publication

Bonus: Use WP Mail SMTP to Send Your Emails

When you send emails to your authors about their published posts, you are using the default WordPress email settings, which are not always reliable.

This means that your email may not reach the author or might even end up in their spam folder.

To fix this issue, you can use WP Mail SMTP, which is the best WordPress SMTP plugin on the market. It uses the SMTP (Simple Mail Transfer Protocol) method for mail transmission and eliminates your email delivery problems.

WP Mail SMTP website

You can easily connect WP Mail SMTP with popular email marketing services and make sure that your emails reach the user’s inbox immediately.

With WP Mail SMTP, you can easily avoid the spam folder, track your email logs, use backup connections and failure alerts, and use premade templates to send emails to your users.

For detailed instructions, you can see our beginner’s guide on how to properly configure your WordPress email settings.

We hope this article helped you learn how to email authors when their articles are published in WordPress. You may also want to see our tutorial on how to highlight author comments in WordPress and our expert picks for the best free author bio box plugins 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 Email Authors When Articles Are Published in WordPress first appeared on WPBeginner.

How to Limit Comment Length in WordPress (Easy Tutorial)

Category Image 098

Do you want to limit comment length in WordPress?

WordPress comments encourage discussions around your blog post content. However, you may find that comments that are very brief or overly long are not very helpful.

In this article, we will show you how to easily limit comment length in WordPress.

Limit Comment Length in WordPress

Why Limit Comment Length in WordPress?

An active comment area is a great way to build a community around your WordPress blog. Visitors can give feedback, ask questions, and offer their own points of view on the topic.

However, not all comments are helpful.

We’ve been moderating WordPress comments for well over a decade. In our experience, we’ve found that the most helpful comments are above 60 characters and below 5000 characters in length.

One-word comments are usually not very helpful. In most cases, they are spam comments where the author just wants a backlink from your site.

On the other hand, long comments above 5,000 characters are often rants or complaints. Sometimes, they are not even relevant to the article.

Setting comment length limits in WordPress can improve the overall quality of your comments and discourage spam comments. However, there is no built-in way of doing this in WordPress.

That being said, let’s take a look at how to control comment length in WordPress by setting minimum and maximum limits.

How to Limit Comment Length in WordPress

You can limit comment length in WordPress by adding code to your functions.php file. However, keep in mind that the smallest error while entering the code can break your site and make it inaccessible.

That’s why we recommend always using WPCode to insert code snippets into your WordPress site. It is the best WordPress code snippets plugin on the market that makes it safe and easy to add custom code.

First, you need to install and activate the WPCode plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin.

Note: WPCode also has a free version that you can use for this tutorial. However, upgrading to the paid plan will give you access to more features like a larger code snippets library, conditional logic, and more.

Upon activation, visit the Code Snippets » + Add Snippet page from the WordPress admin sidebar.

Here, click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

This will take you to the ‘Create Custom Snippet’ page, where you can start by adding a title for your code snippet. This name won’t be displayed on the website front end and can be anything you like.

Next, choose the ‘PHP Snippet’ option as the Code Type from the dropdown menu in the right corner of the screen.

Choose the PHP Snippet option for comment length limit

Once you have done that, simply copy and paste the following code snippet into the ‘Code Preview’ box:

add_filter( 'preprocess_comment', 'wpb_preprocess_comment' );
 
function wpb_preprocess_comment($comment) {
    if ( strlen( $comment['comment_content'] ) > 5000 ) {
        wp_die('Comment is too long. Please keep your comment under 5000 characters.');
    }
if ( strlen( $comment['comment_content'] ) < 60 ) {
        wp_die('Comment is too short. Please use at least 60 characters.');
    }
    return $comment;
}

This code snippet works by adding a filter hook to preprocess_comment. This filter is run before WordPress saves any comments to the database or performs any pre-processing on submitted comments.

It checks the comment length and displays an error message if it is too short or too long. By default, the comment limit is set to a minimum of 60 characters and a maximum of 5,000 characters in this snippet.

However, to set your own comment limit, just replace the number 5,000 in the code with your maximum limit number.

Similarly, you can replace the number 60 in the code to set a different minimum comment limit on your WordPress website.

You can also change the message that will be displayed on your website when a user exceeds or falls short of the comment limit. Simply type the sentence you want to display after the wp_die lines in the code.

Edit comment limit snippet

After that, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode.

The custom code will be automatically executed on your website upon activation.

Choose an insertion method

If you only want to limit comment length on specific website pages, then you can also do that.

Simply scroll down to the ‘Conditional Logic’ section and toggle the ‘Enable Logic’ switch.

After that, choose the ‘Show’ option from the ‘Conditions’ dropdown menu and click the ‘+ Add new group’ button.

Enable the Conditional Logic toggle

This will open a new tab where you must select the ‘Page URL’ option from the dropdown menu on the left.

Next, type the URL of the page where you want to limit the comment length in the field on the right.

Now, the code snippet will only be activated on the page with the URL you have just entered.

Type the conditional logic

Scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active’.

Finally, click the ‘Save Snippet’ button to store your settings.

Save the comment limit snippet

Now, when a user types a comment that falls short of your minimum comment length, this message will be displayed on their screens.

Users won’t be able to post a comment until it is at least the minimum length you chose.

An Error Message Is Displayed if a Comment is Too Short or Too Long

Similarly, when a user types a comment that exceeds your maximum limit, this message will be show on their screens.

This will help reduce rants and spam comments on your website.

Message preview for a long comment

Bonus: Improve Comment Engagement on Your WordPress Site

Controlling comment length is just one way to increase engagement in your WordPress comments section. This is great for keeping visitors on your site for longer and can even benefit your site’s SEO when users’ comments contain relevant keywords and add context to your content.

You can also easily further improve the comments section on your website using Thrive Comments.

The Thrive Comments WordPress plugin

It is the best WordPress comments plugin that comes with a dedicated moderation board, lets you lazy load comments, allows users to leave comments with their social media profiles, and more.

Plus, the tool enables you to add an upvote/downvote functionality to reduce spam and encourage interesting comments on your website.

Thrive Comments even lets you feature encouraging comments at the top and bury offensive or irrelevant comments at the bottom of the discussion section.

Feature comment from dropdown menu

This allows you to reward users who are adding the most value to the discussion while politely discouraging other users from leaving unhelpful comments.

For detailed instructions, you may want to see our tutorial on how to feature or bury comments in WordPress.

We hope this tutorial helped you learn how to limit comment length in WordPress. You may also want to learn how to increase your blog traffic or check out our list of the best WordPress plugins to grow your 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 Limit Comment Length in WordPress (Easy Tutorial) first appeared on WPBeginner.

How to Create a “Sticky” Floating Footer Bar in WordPress

Category Image 091

Are you looking for a way to create a sticky floating footer bar in WordPress?

A sticky floating footer bar stays visible on your website even when users scroll down on your page. It can help you promote discount offers or social media handles, which can reduce the bounce rate and get more conversions.

In this article, we will show you how to easily create a sticky floating footer bar in WordPress, step by step.

Create a "Sticky" Floating Footer Bar in WordPress

What Is a Floating Footer Bar in WordPress?

A sticky floating footer bar allows you to prominently display important content and news to users.

This bar remains visible to visitors at all times, so they are more likely to click on it and discover more useful content.

WPForms floating footer bar preview

You can use the floating footer bar to:

  • Drive more clicks to other blog posts.
  • Generate leads and build your email list.
  • Bring attention to special coupons or discount offers/sales.
  • Promote your social media accounts.
  • Build brand recognition.
  • Provide access to important resources on your WordPress website.

Having said that, let’s see how to easily create a sticky floating footer bar in WordPress. We will show you two methods in this tutorial, and you can use the links below to jump to the method of your choice:

You can easily create a sticky floating footer bar with OptinMonster. It is the best lead generation and conversion optimization tool on the market that makes it super easy to convert your website visitors into subscribers.

OptinMonster comes with a drag-and-drop builder and premade templates that allow you to create a floating footer bar, slide-in popups, and banners without using any code.

We recommend this method because OptinMonster is super easy to use and offers more customization options than the free plugin method.

Step 1: Install OptinMonster on Your Website

First, you will need to sign up on the OptinMonster website by clicking on the ‘Get OptinMonster Now’ button.

The OptinMonster lead generation tool

Next, you must install and activate the free OptinMonster connector plugin on your website. For more instructions, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, the OptinMonster setup wizard will open up on your screen, where you have to click the ‘Connect Your Existing Account’ button. This will connect your WordPress site with your OptinMonster account.

Connect your existing account

Once you do that, a new window will open up on your screen.

Here, click the ‘Connect to WordPress’ button to move ahead.

Connect OptinMonster to WordPress

Step 2: Create And Customize the Floating Sticky Footer Bar

Now that you have connected OptinMonster with your website, it’s time to create a sticky floating footer bar.

To do this, you need to visit the OptinMonster » Templates page from the WordPress admin sidebar and select ‘Floating Bar’ as the campaign type.

Once you do that, all the premade templates for the floating bar will load on the screen. From here, you can click the ‘Use Template’ button on the one you want to use.

Choose a premade template for a floating sticky footer bar

This will open the ‘Create Campaign’ prompt on the screen, where you can add a name for the floating footer bar that you are about to create. It can be anything you like, as the name won’t be displayed to your visitors.

After that, just click the ‘Start Building’ button.

Add a name for your floating sticky footer bar

OptinMonster’s drag-and-drop builder will now be launched on your screen, where you can start customizing your floating footer bar. Here, you will notice a floating bar preview on the right with blocks in the left column.

For example, you can use a countdown timer block if your floating footer bar is promoting a discount offer. This will help create a sense of urgency among users and encourage them to take action.

You can also add a CTA, video, or social media block to the footer bar. For detailed instructions, you can see our tutorial on how to create an alert bar in WordPress.

Add blocks to customize your floating footer bar

You can also edit text on the footer bar by clicking on it. This will open the block settings in the left column, where you can adjust them according to your liking.

For example, if you want to change the discount offer in the template, then you can change the button text. After that, you can select the ‘Redirect to a URL’ option and add the page link that you want users to be directed to upon clicking on the button.

Change button text in the footer bar

Step 3: Configure The Display Rules For Your Floating Footer Bar

Once you are satisfied with your footer bar’s customization, just switch to the ‘Display Rules’ tab from the top.

Here, you can configure when to display the bar on your page. If you want to display the floating footer bar at all times, then you must select the ‘time on page’ option from the left dropdown menu.

After that, choose the ‘is immediate’ option from the dropdown menu on the right.

Configure display rules to display the floating footer bar at all times

However, to display the floating footer bar on a specific page, you must select the ‘Page Targeting’ option from the right dropdown menu.

After that, choose the ‘exactly matches’ option from the dropdown menu in the middle and then add a page URL. Once you do that, the floating footer bar will only displayed on the page you chose.

Configure page targeting for floating footer bar

Additionally, you can select the ‘Exit Intent’ option to show the sticky floating footer bar when the user is about to leave your site. You can then configure the exit intent sensitivity and choose the devices where the footer bar will be displayed. This can be handy if you want to reduce your bounce rate.

You can even select the ‘Visitor’s Device’ option if you only want to display the floating footer bar to desktop visitors.

Configure exit intent technology for footer bar

You can also configure the display rules according to the date, time, or scroll distance by selecting the ‘When’ option from the left column.

For an explanation of more display rule options, you can see our complete OptinMonster review.

Step 4: Publish Your Floating Footer Bar

Once you have defined the display conditions for your footer bar, switch to the ‘Publish’ tab from the top.

Here, simply click the ‘Publish’ button.

Publish floating footer bar

After that, don’t forget to click on ‘Save’ to make your changes live.

Now, you can visit your WordPress blog to see the sticky floating footer bar in action.

Sticky floating footer bar preview

Alternative: You can also use Thrive Ultimatum to show a countdown timer floating footer bar on your website. For more details, see our Thrive Themes Suite review.

Method 2: Create a Sticky Floating Footer Bar With a Free Plugin

If you are looking for a free way to create a sticky floating footer bar, then this method is for you. However, keep in mind that you will have limited customization options compared to OptinMonster.

First, you need to install and activate the Firebox Popup Builder plugin. For detailed instructions, see our tutorial on how to install a WordPress plugin.

Upon activation, visit the Firebox » Campaigns page from the WordPress dashboard and click the ‘+ New Campaign’ button.

Click + New Campaign button

This will open the Firebox campaign library, where you can search for sticky floating bar premade templates.

Next, simply click the ‘Insert’ link under the floating footer bar that you like. Keep in mind that if you select a header bar, then you won’t be able to change its position. You must ensure the template you select is for a footer bar.

Click the Insert link under a template

The block editor will now open up on your screen, where you can start by adding a name for your floating bar.

After that, you can edit the text in the footer by clicking on it and add new blocks by clicking the ‘+’ button. This will open the block menu, where you can add images, headings, paragraphs, videos, quotes, or list blocks.

For instance, if you want to add social media handles, then you can choose the Social Icons block. After that, you can add social media accounts and links using the block panel.

For more details, you can see our tutorial on how to add social media icons in WordPress menus.

Add blocks in the floating footer bar from the block menu

You can also change the text in the button block and add a link to the page where you want to direct users by clicking on the link icon in the block toolbar.

After that, type in the URL of your choice and press ‘Enter’.

Add a link for the button

Next, you can scroll down to the ‘Firebox Settings’ section.

Here, you can change the background color, text color, alignment, size, padding, and margin for the floating footer bar.

Configure floating footer bar design

After that, switch to the ‘Behaviour’ tab from the left column and select ‘Page Load’ as the floating bar trigger point.

Then, use the ‘Delay’ slider to choose a delay timing for the floating bar. For example, if you drag the slider to 15 seconds, then the floating footer bar will be displayed once the user has spent 15 seconds on your site.

If you want the sticky floating footer bar to be displayed immediately, then you can keep the slider at 0.

Choose a trigger point for footer bar

Next, you can leave other settings as they are or configure them according to your liking.

Once you are done, don’t forget to click the ‘Publish’ button at the top.

Publish floating footer bar

Now visit your WordPress site to view the sticky floating footer bar in action.

This is what it looked like on our demo site.

Sticky floating footer bar preview

Bonus: Create a Sticky Floating Navigation Menu in WordPress

Apart from adding a sticky footer bar, you might also like to create a sticky floating navigation menu on your WordPress site.

A navigation menu contains links to the most important pages on your WordPress blog and acts as an organizational structure for your website.

If you make this menu sticky, then it will remain visible on your page at all times, even as the user scrolls down on your screen. This can increase engagement and make your website easier to navigate.

Sticky floating navigation menu preview

To create a sticky floating navigation menu, simply install and activate the Sticky Menu & Sticky Header plugin. For details, see our tutorial on how to install a WordPress plugin.

Upon activation, visit the Settings » Sticky Menu page from the WordPress dashboard and type #main-navigation next to the ‘Sticky Element (required)’ option.

Type navigation menu as the sticky element

After that, click the ‘Save Changes’ button to store your settings. You have now successfully created a sticky floating navigation menu.

For detailed instructions, please see our tutorial on how to create a sticky floating navigation menu in WordPress.

We hope this article helped you learn how to easily create a floating sticky footer bar in WordPress. You may also want to see our beginner’s guide on how to add header and footer code in WordPress and our checklist of things to add to the footer on your WordPress 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 Create a “Sticky” Floating Footer Bar in WordPress first appeared on WPBeginner.

How to Add Custom Meta Boxes in WordPress Posts and Post Types

Featured Imgs 13

Do you want to learn how to create custom meta boxes for your WordPress posts, pages, and custom post types?

WordPress adds metadata to your content automatically, such as the publication date, categories, and tags. However, you may also want to add your own custom meta data.

In this article, we will show you how to easily add unique information to your content, by creating a custom meta data box in WordPress.

How to add custom meta boxes in WordPress posts and post types

What is a Custom Meta Box in WordPress?

When you create posts and pages, or custom post types in WordPress, that content usually has its own metadata. This metadata is information related to the content like date and time, the author name, title, and more.

You can also add your own metadata using the default custom fields box.

Adding custom meta boxes in WordPress posts

Pro Tip: Can’t see the Custom Fields box in the post editor? Then see our guide on how to fix custom fields not showing in WordPress.

The Custom Fields box is a good solution if you just want to add custom metadata to a few posts. However, if you plan to add lots of unique information to your content, then it makes sense to create a custom metadata box.

In fact, many of the popular WordPress plugins add custom meta boxes to the Edit screen for posts and pages. In the following image, you can see how easy it is to add SEO information to your post, using a custom meta box provided by AIOSEO.

The All in One SEO (AIOSEO) WordPress plugin

With that being said, let’s see how you can easily add custom meta boxes in WordPress posts and post types.

How to Add Custom Meta Boxes in WordPress Posts and Post Types

The easiest way to add custom meta boxes to WordPress is by using Advanced Custom Fields. This plugin allows you to attach all kinds of extra information to your posts and pages, and then show that data to visitors using a shortcode.

The first thing you need to do is install and activate the Advanced Custom Fields plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Create a Custom Meta Box

Upon activation, go to ACF » Field Groups and then click on the ‘Add New’ button.

Adding a custom field to your WordPress website

Here, you can create the custom fields that will appear in the metadata box.

To start, you’ll need to type a title into the field that shows ‘Field Group Title’ by default. This will appear in the WordPress content editor, and it will be used as the title of your meta box.

With that being said, you should use something descriptive, especially if you manage a multi-author WordPress blog or share the dashboard with other people.

How to easily add custom meta data to your website or blog

With that done, you’re ready to add the first field to your meta box.

Add Custom Fields to the Meta Box

To start, open the ‘Field Type’ dropdown and choose the type of field you want to add, such as Text, Date Picker, Checkbox, or any other field type.

Adding custom fields to the WordPress content editor

After that, type in a label for the field.

Advanced Custom Fields will show this label before the field, so it will help users understand what information they need to enter.

The Advanced Custom Fields WordPress plugin

Advanced Custom Fields will generate the ‘Field Name’ automatically, so you can leave this field empty.

With that done, you may want to type in a ‘Default Value.’ This will be added to the page, post, or custom post type automatically if the user doesn’t add their own information.

Adding default values to custom WordPress fields

You may see more options depending on the kind of field you’re creating. For example, if you selected ‘Image’ from the ‘File Type’ dropdown, then you can choose the image format.

Most of these options are self-explanatory so you can follow the onscreen instructions to configure the custom field.

When you’re happy with how the field is set up, click on ‘Close Field’ to collapse the section.

Adding custom data to a website or blog

You can now add more fields to the custom meta box by clicking on the ‘Add Field’ button.

Then, simply configure the field by following the exact same process described above.

Saving a custom field group

Add a Custom Meta Box to the WordPress Content Editor

When you’re happy with how the custom meta box is set up, you’ll need to define where and when the meta box will appear.

Scroll to the ‘Settings’ section and then click on the ‘Location Rules’ tab.

Controlling where custom content appears in the WordPress content editor

Advanced Custom Fields can add the box to all kinds of content. For example, you can show the meta box on specific post types, categories, taxonomies, navigation menus, and more.

Simply use the dropdown menus to choose where the meta box will appear in your WordPress dashboard. For example, if you accept guest posts then you may want to add the box to all posts in the ‘Guest Posts’ category.

Creating content rules using a WordPress plugin

After that, click on the ‘Presentation’ tab.

Here, you can choose the meta box style, where it appears on your WordPress blog, and where the label and instructions will appear.

ACF's presentation settings in the WordPress dashboard

If you plan to add multiple boxes in the same location, then you can change the order they appear in by typing into the ‘Order No’ field.

For example, showing the most important meta boxes towards the top of the screen may improve your editorial workflow.

If you’re unsure, then you can leave this field set to 0.

Reorganizing fields in the WordPress content editor

On this screen, you’ll also see a list of all the fields that WordPress usually shows on the post edit screen.

If you want to hide a field, then simply check its box. For example, if you’re using custom fields to create an author info box, then you may want to hide the default ‘Author’ field.

Hiding fields in the WordPress post editor

When you’re happy with the changes you’ve made, click on ‘Save Changes’ to make the field group live.

You’ve now successfully created a custom meta box for your WordPress post, page, or custom post type. Depending on your settings, you can now visit the post editor to see the custom meta box in action.

An example of a custom meta data box, created using a free WordPress plugin

Displaying Your Custom Meta Box Data in WordPress Theme

You’ve now successfully added a custom meta box to the WordPress dashboard. Any information users type into the meta box will be stored in the WordPress database when they save or publish the post. However, this information won’t appear on your website by default.

With that in mind, let’s make sure the custom metadata appears in your WordPress theme, so visitors can see it.

You can do this using shortcode or by editing your WordPress theme files.

How to Display Custom Metadata using Shortcode

Adding a shortcode in WordPress is the easiest method, and allows you to control exactly where the information appears on your website. For example, if you’ve created a ‘Star Rating’ field, then you can show this information after the post title, inside the content, in the footer, or anywhere else simply by adding a shortcode.

However, you will need to add a shortcode to every page, post, or custom post type manually. This can take a lot of time and effort, especially if you have a lot of content.

To get a field’s shortcode, go to ACF » Field Groups. Then, hover over the field group that you want to display and click on the ‘Edit’ link when it appears.

Editing a meta data field group

You’ll now see all the fields that make up this group.

For each field you want to display, make a note of the value in the ‘Name’ field.

How to show custom data in your WordPress theme using shortcode

With that done, go to the page, post, or custom post type where you want to show the custom metadata.

You can now click on the ‘+’ icon and type in ‘Shortcode.’

Adding shortcode to a WordPress page or post

When the right block appears, click to add it to your layout.

You can now add the following shortcode to the block, making sure to replace "article_byline" with the name of the field you want to show.

Adding custom meta data to a WordPress theme

You can now repeat these steps to add multiple custom fields to the post.

When you’re happy with the changes you’ve made, either click on the ‘Publish’ or ‘Update’ button. Now, simply visit your WordPress website to see the custom metadata in action.

An example of custom meta data, displayed using a shortcode

How to Display Custom Metadata by Editing Your WordPress Theme

If you want to show custom metadata in the same location on every page, post, or custom post type, then you can add code to your WordPress theme files.

This can save you time in the long-term, but it isn’t the most beginner-friendly method. You’ll also lose all the custom code the next time you update your WordPress theme, which is why we recommend creating a child theme. You can then add your custom code to the child.

If you haven’t edited your theme files before, then take a look at our beginner’s guide on how to copy and paste code in WordPress.

You’ll need to edit the file where you want to show the custom metadata. This will vary depending on your theme, but you’ll usually need to edit your site’s single.php, content.php, or page.php file.

Once you have the right file, you’ll need to add the code inside the WordPress loop. To find this loop, simply search for code that looks something like this:

	<?php while ( have_posts() ) : the_post(); ?>

You can then paste your code after this line and before the line that ends the loop:

	<?php endwhile; // end of the loop. ?>

As an example, your custom field code should look something like this:

	<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

Notice how we wrapped the code in a h2 heading with a CSS class. This allows us to format and style the custom field later by adding custom CSS to our theme.

Here’s another example:

<blockquote class="article-pullquote">
 
<?php the_field('article_pullquote'); ?>
 
</blockquote> 

When adding code to your theme, don’t forget to replace the field names.

With that done, you can visit any post where you’ve already entered data into the custom fields. You will now see your unique metadata in action.

How to add custom fields to a WordPress theme

We hope this article helped you learn how to add custom meta boxes in WordPress posts and post types. You may also want to see our guide on how to create automated workflows in WordPress, or see our expert pick of the best SEO plugins and tools that you should use.

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 Add Custom Meta Boxes in WordPress Posts and Post Types first appeared on WPBeginner.

OceanWP Theme Review: An All-Rounder Free WordPress Theme

Best Wordpress Themes 1

OceanWP is an exceptional free WordPress theme that provides a diverse range of premium features, making it a superb choice for any website. Its stylish design and extensive functionality have garnered immense popularity among developers and users alike. Professional Appearance and Customization Options One of the standout features of OceanWP is its ability to provide […]

The post OceanWP Theme Review: An All-Rounder Free WordPress Theme first appeared on WPArena and is written by Editorial Staff.

How to Replace Default Theme and Plugin Editor in WordPress

Wp Plugins

Are you looking for a way to replace the default theme and plugin editor in WordPress?

The default WordPress theme and plugin editors are plain text editors with limited functionality. By replacing these editors with better tools, you can use advanced features like access control, child theme creation, file downloads, and more.

In this article, we will show you how to easily replace the default theme and plugin editor in WordPress.

Replacing the default theme and plugin editor in WordPress

Why Replace the Default Theme and Plugin Editor in WordPress?

The default theme editor in the dashboard of your WordPress website allows you to make direct changes to the code in your theme files.

Similarly, the plugin editor lets you edit the code of the installed plugins on your website.

Default theme editor preview

These built-in editors have text editor interfaces that lack advanced features like access control, file download/upload, and child theme creation. This makes it time-consuming for you to add and maintain custom code.

Plus, if an unauthorized person gains access to your WordPress admin area, then they can easily access the default editors to edit your theme and plugin files. This can allow them to install malware on your website.

By replacing these editors with a plugin, you can easily customize your WordPress themes and plugins from the dashboard by adding or removing code snippets, customizing colors, modifying various template files, CSS styles, and more.

This will allow you to make quick changes to your theme or plugin without accessing your website files via FTP.

You can also create child themes, control editor access to make your website more secure, and even upload files to your plugins and themes from your computer.

Having said that, let’s see how to easily replace the default theme and plugin editor in WordPress. You can use the quick links below to jump to the different parts of our tutorial:

How to Replace the Default Theme and Plugin Editors in WordPress

First, you need to install and activate the Theme Editor plugin. For detailed instructions, you can see our beginner’s guide on how to install a WordPress plugin.

Note: Before making any changes to your theme or plugin files, please make sure to create a complete backup of your WordPress website. This will come in handy if anything goes wrong and you have to restore WordPress from a backup.

Upon activation, you need to head over to the Theme Editor » Settings page from the WordPress admin sidebar.

Once you are there, check the ‘Yes’ box for the ‘Enable code editor for theme’ option.

After that, if you want to disable the default WordPress theme editor, then you need to check the ‘Yes’ box next to the ‘Disable WordPress theme file editor?’ option.

Configure theme editor settings

Once you have done that, just switch to the ‘Plugin Editor’ tab at the top.

Here, you need to check the ‘Yes’ box next to the ‘Enable code editor for plugin’ option.

You can also disable the default editor by choosing the ‘Yes’ option for the ‘Disable WordPress plugin file editor?’ setting.

Configure plugin editor settings

Next, switch to the ‘Code Editor’ tab from the top of the page.

From here, you can choose a theme for the code editor from the dropdown menu. This will display the code in your theme and plugins in different backgrounds and font colors.

Once you are done, don’t forget to click the ‘Save Changes’ button to store your settings.

Choose a code editor theme

Editing Your Theme Files Using the Theme Editor

Now, you need to visit the Theme Editor » Theme Code Editor page from the WordPress admin dashboard.

Once you are there, you need to select the theme that you want to edit from the dropdown menu in the right corner of the screen. Next, you must choose the theme file where you want to add code from the sidebar on the right.

After that, you can easily add, remove, or edit code to your theme files from the theme editor on your screen.

Choose theme to edit

Once you are done, don’t forget to click the ‘Update File’ button to store your settings.

You can also download the file you just edited by clicking on the ‘Download File’ button. If you want to download the whole theme instead, then you can click the ‘Download Theme’ button.

Save theme files

Editing Your Plugins Using the Plugin Editor

If you want to add code to your plugin files instead, then you need to visit the Theme Editor » Plugin Code Editor page from the WordPress admin sidebar.

Once you are there, choose a plugin to edit from the dropdown menu in the right corner of the screen.

After that, you can select a plugin file to edit from the sidebar on the right and then edit it using the plugin code editor.

Edit plugin files

Once you are satisfied with your changes, just click the ‘Update File’ button to store your settings.

You can even download the file you just edited by clicking the ‘Download File’ button.

If you want to download the plugin with all the changes that you have made, then you can click the ‘Download Plugin’ button instead.

Download plugin files

Configuring Access Control With the Theme Editor Plugin

The Theme Editor plugin even lets you control access to your theme and plugin editors in WordPress. However, this feature is only available in the pro version of the plugin.

This way, only users who you approve will be able to edit the themes and plugins on your website.

By using access control, you make your website more secure by allowing only trustworthy users to make changes to your files, reducing the risk of malware.

First, you need to visit the Theme Editor » Access Control page from the WordPress dashboard.

Control the access to theme and plugin editor

From here, you just need to check the options in the columns that you want the WordPress user roles to have access to.

For example, if you want the editor to have the ability to update theme files, then you need to check that box in the ‘Editor’ row.

Once you are done, simply click the ‘Save Changes’ button to store your settings.

Creating a Child Theme With the Theme Editor

If you want to create a child theme to customize your WordPress themes, then you can visit the Theme Editor » Child Theme page from the WordPress admin sidebar.

Once you are there, you will first need to choose a parent theme from the dropdown menu in the middle and then click the ‘Analyze’ button.

Choose a parent theme

Once that’s done, you must provide a name for your new theme directory and select where to save your child theme stylesheet.

After that, you can even provide a name, description, author, and version for the child theme that you are creating.

Once you are done, just click the ‘Create New Child Theme’ button.

Configure child theme settings

Now that you have created a child theme, you can edit the selector, web fonts, CSS, child style, and theme files from the menu bar at the top of the page.

The changes that you make will automatically be saved in your child theme.

Child theme created

Bonus: Use WPCode to Add Custom Code to Your Website

Adding code to your website using plugins or theme file editors is always a bit risky because the smallest error can break your WordPress website and make it inaccessible.

That is why we recommend using the free WPCode plugin instead to add custom code to your website. It is the best WordPress code snippets plugin on the market.

First, you need to install and activate the WPCode plugin. For detailed instructions, you can see our tutorial on how to install a WordPress plugin.

Upon activation, you need to head over to the Code Snippets » + Add Snippet page from the WordPress admin sidebar.

From here, you can use the WPCode snippet library to add pre-made code snippets to your WordPress site.

However, if you want to add custom code, then you can also do that by clicking the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

This will open the ‘Create Custom Snippet’ page, where you can start by adding a title for your code snippet.

After that, you need to select a code type from the dropdown menu in the right corner of the screen. For example, if you want to add PHP code, then you just need to select the ‘PHP Snippet’ option.

Next, simply add your custom code into the ‘Code Preview’ box.

PHP Snippet as code type

Once you have done that, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode.

Your custom code will be automatically executed on your site upon activation.

Choose an insertion method

Finally, scroll back to the top and toggle the ‘Inactive’ switch to ‘Active’.

After that, click the ‘Save Snippet’ button to save and execute the custom code on your website.

Save code snippet

For more details, you can see our guide on how to add custom code in WordPress.

We hope this article helped you learn how to easily replace the default theme and plugin editor in WordPress. You may also want to see our beginner’s guide on how to safely update WordPress and our expert picks for the must-have WordPress plugins to grow your 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 Replace Default Theme and Plugin Editor in WordPress first appeared on WPBeginner.

How to Remove Parent Slug From Child Page URL in WordPress

Wp Plugins

Are you wondering how to remove the parent page slug from a child page URL in WordPress?

By default, WordPress adds the parent page’s slug as a prefix to child page URLs, and this is good for SEO. However, some people may not want the parent page slug in the URL.

In this article, we will show you how to remove the parent page slug from a child page URL in WordPress.

How to Remove Parent Slug From Child Page URL in WordPress

What Is a Parent Page Slug in WordPress?

Your WordPress website comes with two main content types called posts and pages.

Pages are hierarchical, which means they can have child pages. These child pages are dependent on their parent pages and typically cover subtopics related to the parent.

For example, you might have a ‘Products’ parent page with ‘Pricing’, ‘Support’, and ‘Features’ child pages.

By default, the URL of a child page in WordPress will have its parent page’s slug in the URL. Here’s an example:

http://example.com/parent-page/child-page/

Using URLs like this is the best way to organize content within a hierarchical page structure on your website. These URLs are considered best practice for WordPress SEO and will make sense to your users when they read them.

It’s usually not a good idea to remove the parent page slug. It can potentially break the URL, and some experts believe it is less SEO-friendly. Sometimes, it may even cause conflicts with the WordPress permalink structure.

In our experience, if you don’t want a parent page slug in your child page URL, then the best approach is to not create a child page at all. Instead, you can simply create a normal page and use a navigation menu to show that other pages belong under that page.

Adding Child Items to a Menu

However, we understand that some users may still want to use child pages and not include the parent page slug within the URL.

That being said, let’s take a look at how to easily remove the parent page slug from a child page URL in WordPress.

Removing Parent Page Slug From Child Page URL in WordPress

The first thing you need to do is install and activate the Custom Permalinks plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to edit the child page that you want to change. Under the content area, you will see a ‘Custom Permalinks’ field where you can change the child page URL.

Change child page URL

The permalink field will show your page’s current default URL. You just need to click it and enter the custom URL you want to use for your child page.

In our example, the hollywood-boulevarde page is a child page oflocations, so the default permalink is locations/hollywood-boulevarde.

We deleted the locations parent slug from the URL, as you can see in the screenshot below.

Custom page URL

Don’t forget to click the ‘Update’ button to save your page and store your URL changes.

After saving your changes, the plugin will automatically redirect the old permalink to the new address. This means your visitors will not see a 404 error if they click a link or bookmark to the page’s old address.

When you view the child page, you will now notice that its URL does not contain the parent slug.

Our Best Guides on Pages and Child Pages

Now that you know how to customize a child page’s URL in WordPress, you may want to learn more about how to use pages and child pages in WordPress:

We hope this article helped you learn how to remove the parent page slug from a child page URL in WordPress. You may also want to see our guide on how to create a custom page in WordPress or our expert picks for the best drag and drop page builder plugins for 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 Remove Parent Slug From Child Page URL in WordPress first appeared on WPBeginner.

What Is Google Knowledge Panel + How to Claim It With WordPress

Featured Imgs 11

Are you wondering how to claim a Google knowledge panel?

When you are looking at a search engine results page (SERP), Google often displays informational panels about people, organizations, and products with the most important facts in one convenient place. This is known as a Google knowledge panel.

In this article, we will show you what a Google knowledge panel is and how to claim it for your business with WordPress.

What Is Google Knowledge Panel + How to Claim It With WordPress

What Is Google Knowledge Panel?

Sometimes, when you are searching for information on Google, you will see a panel containing relevant information on the right side of the screen. This is called a Google knowledge panel.

It is designed to quickly summarize information about a topic to help users understand more about what they are searching for.

These panels are created on the fly using information from Google Knowledge Graph. This is a giant collection of information that Google scrapes from the web, similar to an encyclopedia.

Knowledge panels about organizations show the company’s name and logo and a quick summary of the company taken from Wikipedia.

Example of an Organization Google Knowledge Panel

You can also find a link to the company’s website, contact details, some historical and financial information, and a list of their popular products.

Knowledge panels about people are similar. They have a link to the person’s website, a quick biographical summary, as well as a list of important facts.

Example of a Person Google Knowledge Panel

If a knowledge graph hasn’t been claimed yet, then you will see a ‘Claim this knowledge panel’ button at the bottom. We will show you how to claim your knowledge panel later in this article.

If Google Knowledge Graph contains a lot of information about a person, then there may be an additional knowledge panel at the top of the page.

Example of a Person Google Knowledge Panel

There are also knowledge panels for products. These can’t be claimed by one organization because they feature a variety of online stores that are selling the product.

They show an overall rating for the product, buttons to pop up Details, Reviews, and Stores, and a shopping section that offers a price range and links to different stores.

Example of a Product Google Knowledge Panel

Google knowledge panels are helpful to the user because they provide relevant information that is presented in an easy-to-use way. They are also useful for website owners.

How Do Google Knowledge Panels Help Website Owners?

Google knowledge panels are very visible in the search results and can display a lot of useful information about your business. They make it much more likely that users will click on a link and visit your website. This is great for your website’s SEO.

Like Google answer boxes and featured snippets, knowledge panels make your website stand out on search engine results pages (SERPs) and are likely to be the first thing users look at.

You can claim your business’s knowledge panel to verify that it belongs to you. This gives you some benefits, such as being able to choose a featured image and suggest edits to Google.

If you have an online store, then it’s also worth trying to be featured in product knowledge panels. This allows users to compare your prices and click on a link to your store.

Google knowledge panels are also great for brand visibility. Since these panels contain a business’s logo and other branding elements, they can introduce your brand to more people.

With that said, let’s take a look at how to claim a Google knowledge panel with WordPress.

How to Claim a Person or Organization Knowledge Panel

Google allows you to claim a knowledge panel about a person or organization. However, you can’t claim a product knowledge panel.

To be featured in a product knowledge panel, you will need to add your products to Google Knowledge Graph using product schema, which we will show you how to do in the next section.

For now, let’s take a look at how to claim a person or organization knowledge panel.

Claiming a Person or Organization Knowledge Panel

First, you need to sign in to a Google account to claim your knowledge panel. You should use the account you use for your business needs, such as your Google Business account or business email address.

Now, you can search for your business name (or your own name) and look for the knowledge panel on the right. Make sure that the panel isn’t about a different business or person with a similar name.

Click the 'Claim This Knowledge Panel' Button

You should notice a button near the bottom of the panel that says, ‘Claim this knowledge panel’. Go ahead and click the button now.

Note: If you don’t see a knowledge panel for your business, then it may not have made it to Google Knowledge Graph yet. You should see the next section on how to add your website content to Google Knowledge Graph.

You will be taken to a page that describes how you can enhance your presence on Google. You need to click the ‘Get Verified’ button to verify that you are the owner of the business.

Click the 'Get Verified' Button

This will take you to the ‘Get verified on Google’ form. You will be asked to confirm the name of the business or person you are trying to claim.

After that, you will be asked a series of questions that demonstrate you have the right to claim the knowledge panel for that business or person.

The 'Get Verified on Google' Page

Google may ask you to upload a photo of yourself holding a valid ID. It may also ask you to provide screenshots of your online profiles, such as LinkedIn, Facebook, Twitter, and YouTube.

Once you have finished, you will need to check the box next to the agreement at the bottom of the page and then click the ‘Submit’ button.

Click the 'Submit' Button

On the final page, you will be thanked for the submission and told that Google will get back to you soon. You can expect to receive a confirmation email in several hours or the next day.

Suggesting Edits to a Person or Organization Knowledge Panel

Once you have claimed your Google knowledge panel, you can choose a featured image and hide personal information that you don’t want to be displayed, such as your date of birth or marital status.

You can’t change the content of the knowledge panel, but you can suggest edits.

Simply make sure you are logged into the Google account that claimed the knowledge panel, and then you can click the ‘Suggest edits’ link at the top or bottom of the panel.

However, before you suggest an edit, remember that Google found the information somewhere else on the web. It’s much better to find the source of the information and ask that source to change it. If you are unsuccessful, then you can suggest an edit to your knowledge panel.

How to Add Your Website Content to Google Knowledge Graph

The information contained in knowledge panels is automatically created using information from Google Knowledge Graph. While you can’t pick what content is displayed, you can make sure that Google can find and understand information from your WordPress website.

The best way to do that is to use schema markup to structure your website. This is a special type of HTML code that gives search engines more information about your website and its pages.

You can easily add schema to your site and individual pages using All in One SEO (AIOSEO), which is the best WordPress SEO plugin on the market. It automatically adds schema support to your site and offers many ways to optimize your content for higher search engine rankings.

Note: For this tutorial, we will use the free version of AIOSEO since it lets us add schema markup. However, there is also AIOSEO Pro that offers many extra features to help your website rank higher.

You can learn how to install and configure the plugin in our complete guide on how to install and set up All in One SEO for WordPress.

Adding Knowledge Graph Schema to Your Website

You need to go to the All in One SEO » Search Appearance page and scroll down to the ‘Knowledge Graph’ section. This is where you can let search engines know some basic information about yourself or your business.

First, you need to add the name of your website. This can simply be the name of your business or something more specific, such as ‘My Awesome Business Blog’. Optionally, you can type an alternate name for your website, like an acronym.

AIOSEO's Knowlege Graph Settings

In the next section, you need to click on the button to choose whether the website is for a person or organization. This will determine the type of knowledge graph your website information will be displayed in.

Next, you can type your organization name and phone number. You can also select the phone number’s team or department from a dropdown menu.

AIOSEO's Knowlege Graph Settings

Finally, you can add the logo you would like displayed on the knowledge panel. Make sure the image is no larger than 112 x 112 pixels in size.

There is also a button you can click to add local SEO settings. For more details, see the local business SEO setup section of our guide on how to set up All in One SEO.

AIOSEO's Knowlege Graph Settings

Once you have finished, make sure you click the ‘Save Changes’ button at the bottom of the screen to store your settings.

Adding Product Schema to Your Online Store

You can’t claim your products to make them appear in product knowledge panels. Instead, you need to add the right schema markup so that Google can consider your online store when displaying places to purchase different products.

Luckily, All in One SEO supports Merchant Listing schema markup, which will give Google the information it needs to include you.

When you edit any product in WooCommerce, you will notice that All in One SEO has automatically added a new ‘AIOSEO Settings’ area below the product editor.

AIOSEO product settings

You can use this section to customize the way your product title and description will appear on search results pages. You can see a preview next to ‘Snippet Preview’.

Now you should switch to the ‘Schema’ tab, and you will notice that AIOSEO has already added Product schema for you.

Product schema

You can add more information about your product by clicking the ‘Edit Schema’ pencil icon.

If you like, you can autogenerate fields based on the product data from WooCommerce. Now, you should fill in as much information as possible for each product, including the brand, material, identifiers, and more.

Edit product schema in All in One SEO

This product information will be added to Google Knowledge Graph so that Google has the option of adding it to product knowledge panels.

For detailed instructions, you can see the optimizing WooCommerce SEO section of our guide on how to set up All in One SEO.

Adding an About Page in WordPress

Google may also look at your About page when displaying information about your business in a Google knowledge panel.

You will want to make sure your website has an About page and add it to your navigation menu.

The page can let users know about the purpose, mission, and values of your business, and it’s also a good place to introduce your team.

About WPBeginner Page

You can learn more in our guide on important pages that every WordPress blog should have.

Bonus Tips for Getting Your Business Information Into Google Knowledge Graph

Of course, your website is only one source of information about your business that Google can use in its knowledge panels.

Here are a few more ways you can get the word out about your business and increase the chances of that information being added to Google Knowledge Graph.

Optimizing Your Social Media Presence

Google scrapes social media platforms for information it can use in knowledge panels.

That means it is essential to set up social media profiles for your business on major platforms like Facebook, Twitter, Instagram, Pinterest, and more. You might also consider adding your business to Wikidata.org.

After creating your social profiles, you need to navigate to All in One SEO » Social Networks. Here, you can paste the URLs to the profiles that you created.

AIOSEO's Social Profile Settings

This will let search engines know about the social profiles that are associated with your website, and they may be included in your Google knowledge panel.

For step-by-step directions, you can see the section on setting up social media optimization in our social media cheat sheet for WordPress.

Become Featured on Wikipedia and Wikidata

Google also scrapes authoritative websites like Wikipedia to use the information in knowledge panels. That makes being featured on Wikipedia very valuable.

Wikipedia’s rules prevent you from creating a Wikipedia entry about yourself or your business. That is to make sure that all entries are unbiased.

However, you can add your business information to Wikidata.org. Google Knowledge Graph draws information from this source, and it is also a source of useful information commonly used by Wikipedia authors.

Make sure you link to any third-party sources that can verify the information you add. This adds credibility to the facts you claim about your business.

Get Your Business Featured on Other People’s Websites

You might also be able to place information about your business on other websites. One of the best ways to do that is to look for blogs that accept guest posts.

Writing guest posts on other people’s websites can help you get valuable backlinks to your website, boosting your SEO. It can also give you the opportunity to talk about the history of your business or the products and services you offer.

You can also use websites like Help a Reporter Out (HARO). This is a website where reporters ask for information on a topic, and they may choose to publish your answer along with a link to your website.

You could also interview other people in your industry and post them on your website. Those people may then link to the interview on your site. Other ideas include being a guest on a podcast, writing an expert roundup that covers your industry, and speaking at events.

FAQs About Google Knowledge Panels

Here are some of the questions our readers ask us most often about Google knowledge panels.

What is a knowledge panel in Google?

A Google knowledge panel is a useful summary of information displayed on the right side of a Google search results page. This panel may be about a person, organization, product, or location.

The information is automatically pulled from Google Knowledge Graph. People and organizations can claim their knowledge panels.

How do I get a Google knowledge panel?

A Google knowledge panel is displayed automatically when someone searches for your business, as long as the Google Knowledge Graph contains information about your business.

If a knowledge panel isn’t displayed after searching for your business, then the best thing to do is add schema markup to your site to make it easier for Google to understand.

If a Google knowledge panel is displayed about yourself or your business, then you can follow our tutorial to claim it.

What does claiming a Google knowledge panel do?

There are a few benefits to claiming your Google knowledge panel. It will show Google that the business is yours, allow you to choose a featured image, and allow you to suggest changes to the content.

How much does a Google knowledge panel cost?

Google knowledge panels don’t cost anything. Google creates them automatically when it knows something about your business. Even claiming your Google knowledge panel is free.

Can I create my own Google knowledge panel?

No, Google knowledge panels are generated automatically, and you cannot make your own. However, the knowledge panels contain information found on the internet.

That means you can influence the contents of your knowledge panel by adding useful information to your website using schema markup and by claiming your knowledge panel and suggesting edits.

You can also influence its content by adding information about your business to social media platforms and third-party websites.

Why don’t I have a Google Knowledge panel?

If a knowledge panel isn’t displayed when performing a Google search on your business, then most likely, there isn’t enough information about your business in the Google Knowledge Graph.

You can help Google learn about your business by using schema markup on your website, being active on social media, and getting your business featured on other people’s websites.

We hope this tutorial helped you learn how to claim your Google knowledge panel with WordPress. You may also want to see our guide on how to track website visitors or our expert picks for the best social media plugins for WordPress to grow your audience.

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 What Is Google Knowledge Panel + How to Claim It With WordPress first appeared on WPBeginner.