How to Restart a WordPress Site – Reset WordPress (The Fast Way)

Category Image 091

Recently, one of our readers asked us, “How do I restart my WordPress site?”.

This isn’t something that most users will need to do, but knowing how to reset WordPress can be very helpful in some situations.

In this tutorial, we’ll show you how to restart or reset your WordPress site, the fast way.

Restarting a WordPress site

Why Restart a WordPress Site?

Restarting or resetting WordPress is a process where you restore WordPress to the default settings. Think of it as a similar process to restoring your phone to the default “factory settings”.

It will delete all your apps and customizations, so you can start over fresh.

There are several situations where you might want to restart or reset a WordPress site:

1. You’re using a demo site on your own computer. If you’ve installed WordPress on localhost, then you might want to reset after you’ve built a site and moved it from localhost to a live server. If you’re a developer and constantly test themes & plugins on your local install, then it can help to reset it every quarter to start fresh.

2. You’ve been working on a new site and want to start over. Maybe you’ve been busy creating a blog or website, but you are not happy with the customizations. Instead of undoing everything, you can simply reset WordPress and quickly start over with a new design.

3. You’re going to rework a client’s website. If they want something very different from what’s already there, then you might need to reset WordPress on staging server to start from scratch.

4. You’re learning about WordPress, hands-on. Maybe you’ve had a go at developing your own plugins or themes, or you’ve been experimenting with a starter theme. You might want to start again with a fresh installation of WordPress.

How to Restart and Reset a WordPress Site

Restarting your WordPress site might sound difficult, but it’s really not.

We’re going to walk you through the entire reset process, step by step.

Before you begin, it’s important to create a full backup of your site using a WordPress backup plugin. This is important in case you want to restore your site from the backup after restarting it.

Restart Your WordPress Site with WP Reset

Now you’re ready to move on and restart your WordPress site. We’re going to use the free version of the WP Reset plugin for this.

First, you’ll need to install and activate the WP Reset plugin. For more details, see our instructions on how to install a WordPress plugin.

Once the plugin is activated, you need to go to the Tools » WP Reset in your WordPress dashboard and scroll down to the Site Reset section of the page.

To reset your site, you need to type the word ‘reset’ in the confirmation field before clicking the red ‘Reset Site’ button.

The button in WP Reset to restart your WordPress site

WP Reset will pop up a message asking you to confirm that you want to reset the site. Click ‘Reset WordPress’ to continue.

Confirm that you want to reset your website

You’ll see a ‘Resetting in progress’ message for a few seconds. Then, your site will be restarted.

Next, you’ll see the homepage of your WordPress dashboard with a success message at the top from WP Reset.

WPReset's message confirming that you've successfully reset your WordPress site

That’s it. You’ve restarted your WordPress site.

Optional WP Reset Functions When Restarting Your Site

The above method gives you everything you need in order to restart your site.

However, there are some other options in WP Reset that you might want to use too.

Taking a Snapshot of Your WordPress Site Before Restarting

You can use WP Reset to take a snapshot of your site. A snapshot is a restore point for your WordPress database. It lets you see what changes have been made since the snapshot was taken. You can use it to roll back changes if necessary.

Important: A snapshot is not a WordPress backup. You should still make backups to restore your website.

To create the snapshot, click on the Snapshots tab. Then, scroll down and click the Create Snapshot button:

Creating a snapshot of your WordPress site before restarting it

You’ll be prompted to enter a name or description for the snapshot. Type in whatever you want to use, then click the ‘Create snapshot’ button.

Name the snapshot you're creating

Deleting Themes and Plugins Using WP Reset

By default, WP Reset doesn’t delete theme and plugin files. It simply deactivates them. However, you can use it to delete these files too.

First, you’ll need to go to Tools » WP Reset and click the ‘Tools’ tab. Once there, simply click on the ‘Delete Themes’ or ‘Delete Plugins’ links to jump straight to those tools.

Click the link to delete themes and/or plugins

Once you click either link, you’ll be scrolled down the page to the right tool:

Click the button to delete all themes from your WordPress site (including the active one)

You can click the ‘Delete all themes’ or ‘Delete plugins’ button to delete them.

Important: WP Reset doesn’t backup your files in any way. Deleting your themes and plugins can’t be undone.

After you click the button, you’ll be prompted to confirm. Click the Delete button on the popup to continue.

WP Reset will bring up a warning before allowing you to delete all themes

You’ll then see a message telling you how many themes or plugins have been deleted.

If you delete all themes, then you’ll need to install and activate a theme manually. Your site won’t work without one. If you go to Appearance » Themes, then you’ll see a screen like this:

The empty themes page with no themes installed

Go ahead and click the ‘Add New’ button and choose or upload a theme of your choice. If you need help, check out how to install a WordPress theme.

Restoring Your Data After Restarting Your WordPress Site

After restarting your WordPress site, any posts and pages you had will be gone. Instead, you’ll see the default pages and the ‘Hello, world’ post:

The 'Hello World' default post

To restore your old data, you will need to reinstall and activate the backup plugin that you used to create your backup.

You can then follow its instructions to restore your site from the backup.

Viewing Your Restored Content

Once you’ve restored your site from backup, your content should be back on your site.

You’ll find all your posts under Posts » All Posts. They’ll have the correct time stamps, categories, tags, and comments.

Viewing the imported postsv

We hope this tutorial helped you learn how to reset a WordPress site the fast way. You might also like our ultimate guide to speeding up WordPress and our list of must have WordPress plugins for all 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 Restart a WordPress Site – Reset WordPress (The Fast Way) appeared first on WPBeginner.

How to Add Facebook Open Graph Meta Data in WordPress Themes

Category Image 091

Do you want to add Facebook Open Graph meta data to your WordPress themes?

Open Graph metadata helps Facebook and other social media websites get meta data about your posts pages. It also allows you to control how your content appears when shared on Facebook.

In this article, we will show you how to easily add Facebook open graph metadata in WordPress themes. We’ll share three different methods, so you can choose one that works best for you.

Add Facebook open graph meta data in any WordPress theme

Method 1. Adding Facebook Open Graph Meta Data with All in One SEO

All in One SEO is a popular WordPress SEO plugin used by over 2 million websites. It allows you to easily optimize your website for search engines as well as social platforms like Facebook and Twitter.

First, you need to install and activate the All in One SEO plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit All in One SEO » Feature Manager page. From here you need to activate the ‘Social Meta’ feature.

Enable Social Meta feature in All in One SEO

Next, you need to visit All in One SEO » Social Meta page. From here, you can simply fill in the fields to enter your Facebook meta data.

Social meta page allows you to enter Facebook Open Graph meta data

You can start by providing title, image, and description for your homepage.

Below that you can set a default image to be used if an article doesn’t have an open graph image. You can also provide the width and height of the image.

Set default Open Graph image

Need help choosing image sizes? See our complete social media cheat sheet for ideal image sizes that you can use on all social media platforms including Facebook.

If your website is using a Facebook App or has a Facebook page, then you can provide your Facebook app ID in the next section. This allows you to get data for Facebook insights.

Facebook app settings

Optionally, you can also adjust settings for Twitter and run a scan to avoid duplicate Open Graph tags on your site.

Once you are done, don’t forget to click on the ‘Update Options’ button to store your changes.

Now that you have set site-wide open graph meta tags, the next step is to add open graph meta data for individual posts and pages.

By default, All in One SEO will use your post title and description for open graph title and description. You can also manually set the Facebook thumbnail for each page and post.

Simply edit the post or page and scroll down to the All in One SEO section below the editor. From here, switch to the Social tab and fill out open graph meta data. You can set the social media image here as well as title and description.

Open graph settings for posts and pages

Method 2. Set Facebook Open Graph Meta Data using Yoast SEO

Yoast SEO is another excellent WordPress SEO plugin that you can use to add Facebook open graph meta data into any WordPress site.

First thing you need to do is install and activate, the Yoast SEO plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Once activated, you need to go to SEO » Social and simply check the box next to Add Open Graph meta data.

Enable Facebook Open Graph

You can save your settings or continue and configure other Facebook social options on the screen.

You can provide a Facebook app ID if you use one for your Facebook page and insights. You can also change your homepage Open Graph meta title, description, and image.

Lastly, you can set a default image to be used when no image is set for a post or page.

Yoast SEO also allows you to set Open Graph metadata for individual posts and pages. Simply edit a post or page and scroll down to the SEO section below the editor.

Set open graph meta data for post and pages

From here, you can set Facebook thumbnail for that particular post or page. If you don’t set a post title or description, then the plugin will use your SEO meta title and description.

You can now save your post or page and the plugin will store your Facebook open graph meta data.

Method 3. Manually Add Facebook Open Graph Meta Data into Your WordPress Theme

This method requires you to edit your theme files, so make sure that you back up your theme files before making any changes.

After that simply copy and paste this code in your theme’s functions.php file, or in a site-specific plugin.

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');

//Lets add Open Graph Meta Info

function insert_fb_in_head() {
	global $post;
	if ( !is_singular()) //if it is not a post or a page
		return;
        echo '<meta property="fb:app_id" content="Your Facebook App ID" />';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site NAME Goes HERE"/>';
	if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
		$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
		echo '<meta property="og:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Note: Remember to change the Site Name where it says “Your Site Name Goes Here”. After that, change the default image URL with the image of yours. You also need to add your own Facebook app ID, If you don’t have a Facebook app, then you can remove the Facebook app ID line from the code.

We would recommend putting an image with your logo there, so if your post does not have a thumbnail, then it pulls your site’s logo.

That’s all you need to do. As soon as you save your functions.php file (or site-specific plugin) it will start showing Facebook open graph metadata in the WordPress header.

We hope this article helped you add Facebook open graph meta data in WordPress. You may also want to see our pick of the best social media plugins for WordPress to grow your social following, and our troubleshooting guide on how to fix the Facebook incorrect thumbnail issue in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for more WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Facebook Open Graph Meta Data in WordPress Themes appeared first on WPBeginner.

How to Easily Organize Media Uploads by Users in WordPress

Wp Plugins

Do you want to organize media uploads by user in WordPress?

If you run a multi-author website, then you may want to restrict each author’s media library access to only their own uploads. This can prevent an author from accidentally deleting another user’s images, and help keep subscriber-only content private.

In this article, we’ll show you how to organize media uploads by users in WordPress.

How to organize media uploads by users in WordPress

Why Restrict Author Access to Media Uploads?

If you have a multi-author WordPress blog, then people might be uploading lots of different images. This can make it difficult for an author to find the right image, or they might delete or edit another person’s media file by accident.

This can cause all sorts of problems including poor productivity, lots of extra work for site admins and editors, and a complicated editorial workflow.

This unlimited access can also be a privacy concern. For example, if you’re working on a new product or idea, then other authors might see confidential images in the media library before you make a public announcement.

If you have a WordPress membership site, then contributors and subscribers may be able to access premium media files they shouldn’t have access to. For example, if you sell online courses then a contributor might use their media library access to download premium PDFs and other course materials, without buying a subscription.

That being said, let’s take a look at how to restrict who can see media uploads inside your WordPress admin area. Simply use the quick links below to jump straight to the method you want to use.

Method 1. Organizing Media Uploads by Users With a Plugin (Quick and Easy)

The easiest way to restrict access to media uploads is by using the Frontier Restrict Access plugin.

This free plugin checks whether a user has the edit_others_posts permission, which allows them to edit another user’s posts.

By default, this ability is granted to everyone who has the site admin or editor role. If you want to change this, then you can add or remove capabilities to user roles in WordPress.

If the user doesn’t have this permission, then once this plugin is activated, they won’t be able to access another user’s files in the WordPress media library. This allows you to organize media uploads by users, without restricting access for admins and editors.

This plugin works out of the box and there are no settings for you to configure, so you can simply install and activate the Frontier Restrict Access plugin. For more details, see our guide on how to install a WordPress plugin.

Method 2. Organizing Media Uploads Using Code (Advanced)

Another option is to restrict access to files in the media library using code. This method requires you to add a code snippet to your WordPress blog or website, so it isn’t the most beginner-friendly method. However, you won’t need to install a separate plugin just to organize your media uploads.

Often, you’ll find guides with instructions to add custom code to your WordPress theme. However, this isn’t recommended as mistakes and typos in your code can cause common WordPress errors, or even break your site completely.

That’s why we recommend WPCode.

WPCode is the best code snippets plugin used by over 1 million WordPress websites. It makes it easy to add custom code in WordPress without having to edit the functions.php file.

For this method, we’ll be adding code that checks whether the user has the edit_others_posts permission. If they don’t have this permission, then the code snippet below will stop them from accessing other people’s files in the WordPress media library.

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

Upon activation, head over to Code Snippets » Add Snippet.

How to add custom PHP snippets to your site using WPCode

Here, simply hover your mouse over ‘Add Your Custom Code.’

When it appears, click on ‘Use snippet.’

Adding a custom code snippet to WordPress

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

After that, open the ‘Code Type’ dropdown and select ‘PHP Snippet.’

Restricting access to the media library using WPCode

In the ‘Code Preview’ area, paste the following code snippet:

add_filter( 'ajax_query_attachments_args', 'user_show_attachments' );
 
function user_show_attachments( $query ) {
    $user_id = get_current_user_id();
    if ( $user_id && !current_user_can('activate_plugins') && !current_user_can('edit_others_posts
') ) {
        $query['author'] = $user_id;
    }
    return $query;
} 

Next, just scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.

We want to use the custom PHP code across our entire WordPress website, so click on ‘Auto Insert’ if it isn’t already selected. Then, open the ‘Location’ dropdown menu and choose ‘Run Everywhere.’

Running custom PHP code across your website using WPCode

After that, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle, so it changes to ‘Active.’

Finally, click on ‘Save Snippet’ to make the PHP snippet live.

How to restrict access to media files using code

Now, users will only have access to the files they upload to the WordPress media library.

We hope this article helped you better organize media uploads by users on your WordPress site. Next, you can check out our ultimate WordPress security guide or see our expert pick of the best contact form 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 Easily Organize Media Uploads by Users in WordPress first appeared on WPBeginner.

How to Insert image in WordPress

Category Image 012

“Hearing and seeing something, which exists physically are two different things. When you hear about something then it is likely that you will begin to believe in it, but when you see that thing then it occurs to you that whatever you heard and believed in was accurate”. In WordPress, we see a number of […]

The post How to Insert image in WordPress appeared first on WPArena.

How to Put Images Side by Side in WordPress (Easily)

Category Image 091

Do you want to put images side by side in your WordPress content?

Often beginners struggle to find how to put two pictures next to each other in their WordPress posts and pages.

In this step by step guide, we will show how to easily put images side by side in WordPress (without writing any code).

Putting images side by side in WordPress

Using the Block Editor to Put Images Side by Side

The easiest way to get your images side by side is to use the WordPress block editor.

The block editor has a special ‘Gallery’ block that lets you display images in rows and columns.

First, you’ll need to create a new post / page or edit an existing one to open the content editor. Once inside, click the (+) symbol to add a new block.

Creating a post and adding a block to it

Next, you need to select the Gallery block and add it to your page. You can find the Gallery block in the Common Blocks section, or you can use the search bar to quickly locate it.

Selecting the Gallery block to add to your post

Now, you can easily add images to your gallery block, by dragging them into it or by using the Upload button. You can also select images from your WordPress media library.

As you can see, we’ve added 2 images to our Gallery block. WordPress has automatically positioned them side by side.

Two images in the gallery (butterflies and apple)

What if you want 3 images side by side? Here’s what happens if we add a third image. WordPress simply resizes the others to fit all 3 side by side:

Three images in the gallery (butterflies, apple, and blue flowers)

If you upload a fourth image, then WordPress will place it beneath the others.

Four images in the gallery (butterflies, apple, blue flowers, and robin)

You can change the number of images WordPress should include side by side in a single column.

First, click on the Gallery block, if it’s not already selected. On the right hand side of the screen, you’ll see the Gallery’s block settings.

Changing the settings for the gallery block

You can adjust the number of columns here to any number between 1 and 4. For instance, if you want two images side by side, and two more beneath them, you can set the Columns to 2.

Setting the gallery to have 2 columns rather than 3

It’s as simple as that!

If you want to change where an image is positioned in your gallery, just click on it. You’ll then see arrows that you can use to move it forward or backward in the gallery.

Moving an image forward or backward in the gallery

Here’s a finished gallery demo from our sample post:

The 2 column gallery in a live post

Using a Plugin to Put Images Side by Side in WordPress

If you’re using the old classic WordPress editor, or if you want to create more complex galleries than the default Gallery block, then you will need a WordPress gallery plugin.

We recommend using Envira Gallery because it is the best WordPress gallery plugin

For the sake of this tutorial, we will be using the free version of Envira, but you may want to get the Pro version to get powerful features like albums, image slideshows, etc.

First, you’ll need to install and activate the Envira Gallery plugin. If you’re not sure how, just check out our step by step guide on how to install a WordPress plugin.

Next, you can go to Envira Gallery » Add New in your WordPress dashboard.

Add a new gallery in Envira Gallery

You’ll need to give your gallery a title. We’ve called ours ‘Example Gallery’. Next, upload the images you want to use.

You can either drag and drop them into the upload box, or you can use one of the ‘Select Files’ buttons.

Give your new gallery a name

Here’s how the images look once they’ve been uploaded:

Images uploaded to Envira Gallery

You may want to give your images a title and alt text here. The title appears below your image when the user brings their mouse cursor over it.

The title also appears below the image in the lightbox popup mode, which we’ll take a look at in a moment.

To edit the title and alt text, click the Edit button on an image in the gallery.

Click the Edit button to edit an image in your gallery

You can then change the title for your image. It defaults to the image’s filename.

You should also enter alt text, as this is helpful for your WordPress site’s SEO. If your title describes the image, then you can simply repeat it for the alt text.

Setting the title and the alt text for the image

Once you’re done, please make sure you click the ‘Save Metadata’ button before clicking the X to close the window.

Click the Save Metadata button to save your changes

To add your gallery on the site, you’ll first need to publish it. Go ahead and click the Publish button on the right hand side of the screen.

Click the Publish button to publish your gallery, so you can use it on your site

Now, edit a post or page, or create a new one. Inside the content editor, click (+) to add a block to your post, and select the Envira Gallery block. You can find it in the Common Blocks section, or you can use the search bar.

Add the Envira Gallery block to your post or page

You’ll then need to click on the dropdown to select your gallery.

Select your gallery from the Envira Gallery block

You should see your gallery in place in your post.

You can adjust the settings on the right-hand side of the screen. For instance, you might want to change the column layout, or the size of the margin between images.

The Envira Gallery shown in the post editor

We decided to set our gallery to always display in two columns. We also added a wider margin between the images.

The user can click on an image to see the full-sized version in a lightbox. They can scroll through the images using the lightbox, too.

Viewing an image from the Envira gallery in a lightbox

If you want to add more images to your gallery, then you can go back to it by visiting Envira Gallery » All Galleries in your WordPress dashboard. Simply click on the name of your gallery to edit it.

Editing a gallery you've already created in Envira Gallery

Any changes you make to your gallery will appear wherever you’ve placed it in your posts, pages, or sidebars. You don’t need to add it to these again.

Tip: If you’re using the classic editor instead of the block editor, you can still use Envira Gallery.

You’ll see an ‘Add Gallery’ button above the classic editor that you can use to add an existing gallery to your post.

Adding an Envira gallery in the classic editor

You can also create a new gallery by clicking the ‘Add Media’ button then ‘Create Gallery’.

Creating a new gallery using the Media Library in the Classic Editor

We hope this tutorial helped you learn how to put images side by side in WordPress. You might also want to go through our guide on how to align images in the WordPress block editor, and our comprehensive list of the must have WordPress plugins (expert pick).

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 Put Images Side by Side in WordPress (Easily) appeared first on WPBeginner.

How to Add a Horizontal Line Separator in WordPress (5 Methods)

Category Image 052

Do you want to add a horizontal line across your post or page in WordPress?

Horizontal line dividers are a great way to break long posts into smaller sections, highlight special announcements or promotion, and clearly separate different parts of a page.

In this article, we’ll show you how to easily add a horizontal line divider in WordPress.

How to add a horizontal line in WordPress

Since this is a comprehensive guide on how to add a horizontal line divider in WordPress, you may find it helpful to use our table of content:

Adding a Horizontal Line in the WordPress Block Editor

To add a horizontal line using the WordPress block editor, click the (+) icon to add a new block wherever you want the line to be.

Adding a new block where you want your horizontal line

Next, select the Separator block from the Layout Elements section or search for it using the search bar.

Find and add the Separator block

Once added, you’ll see your horizontal line divider in your content area.

Styling the Horizontal Line in the WordPress Block Editor

By default, the horizontal divider is a pale gray line across the center of your post or page.

You can change how it looks by clicking on the line to select its block. Then, the ‘Block’ editing panel will open up on the right-hand side of your screen.

Click on the Separator block to select it and edit the settings

To change the style of your line, just click the little arrow next to Styles. Then, you’ll see the different options.

You can change the horizontal line to one of these, if you want:

  • A wide line that covers the full width of your post’s content.
  • Three dots that display in the center of your post.

The different styles available for the Separator block

Note: In some WordPress themes, both the wide line and the default line will cover the whole width of your post.

You can also change the color of your horizontal line under the Color settings. Simply click on one of the options displayed, or use the ‘Custom color’ link to pick any color at all.

Change the color of the horizontal line

If you want to go back to the default gray color, just click ‘Clear’ button under the color options.

Here, our horizontal line is blue and uses the “wide” style.

A horizontal line that's been modified to be wide and blue

Adding a Horizontal Line in the WordPress Classic Editor

If you’re still using the classic editor, then you can add basic horizontal lines. To do so, simply edit an existing post or page or create a new one.

If you only see one row of buttons in the toolbar above the post editor, then click on the Toolbar Toggle icon on the right:

Click the Toolbar Toggle button to see the second row of icons

This will open up the second row of buttons, which includes the horizontal line option.

Now, go ahead and put a line break between the paragraphs where you want the horizontal line to go. You can then click the Horizontal Line button. It’s the second from the left on the second row:

The horizontal line button in the classic WordPress editor

Your horizontal line will be light gray. It’ll cover the whole width of your post like this:

A horizontal rule created using the classic editor

Manually adding a Horizontal Line divider using HTML

In some rare cases, you may need to manually add a horizontal line divider in your WordPress content.

If so, you can simply do that by using the hr HTML tag in your content:

<hr>

This will add the horizontal line separator in your post content.

Other Separators You Can Use in Your Posts and Pages

The default WordPress block editor allows you to add multiple types of separators to your posts and pages.

Aside from the horizontal line separator, the other options in the Layout Elements set of blocks include the Spacer, the More link, and the Page Break blocks.

The Spacer Block

The Spacer lets you add white space between blocks. For instance, if you want a slight gap at the end of your post before a special offer, you can use the Spacer.

You can customize the height of the spacer. Here’s how it looks when you’re creating your post in the block editor:

The Spacer block in the block editor

And here’s how the spacer appears on your site:

How the spacer block appears in a page or post

The More Block

If your theme shows full posts (rather than excerpts) on your main blog page, then adding a ‘More’ link will break off your post at that point. The visitor can click to read more.

Here’s how it looks when you’re creating your post:

The More block in the post editor

And here’s how the More link appears on your site:

The Read More block in a post on the site

You can learn more about excerpts, in our guide on how to easily customize excerpts in WordPress.

The Page Break Block

The Page Break lets you split long blog posts into multiple pages. You can’t customize it in any way. Here’s how it looks when you’re creating your post:

The page break block shown in the block editor

And here’s how the page break appears on your site:

The page break as it appears on a site

Any of those could be good alternatives to adding a horizontal line in WordPress, depending on what you’re aiming to do.

Adding a Page Break in WordPress Forms Using WPForms

What if you want to put a break not in a post or page, but in a WordPress contact form? You can do that, too. We’re going to be using WPForms for this.

First, you’ll need to download, install, and activate the WPForms plugin. If you’re not sure how, just check out our step by step guide on how to install a WordPress plugin.

Next, go to WPForms » Add New in your WordPress dashboard.

Creating a new form using WPForms

Enter a name for your form then pick a template. We’re going to use the ‘Request a Quote Form’ template for ours. Run your mouse cursor over the template and click the button to create your form.

Creating a quote form in WPForms

Next, scroll down the Add Fields tab on the left hand side to the Fancy Fields section. Drag and drop the Page Break to wherever you want it on the form. We’re putting it just before the Request box.

Adding a page break in WPForms

You’ll see that the form is now broken into two parts. WPForms has automatically added a ‘Next’ button, too.

You can change the ‘Next’ label if you want to and you can add a ‘Previous’ button to go on the second page of the form. Just click on the page break field to edit it.

Editing the page break field in WPForms

Save your form once you’re done, by clicking the Save button on the top right.

You can now add the form to your website. First, you’ll need to create a new post or page, or edit an existing one.

Click the (+) to add a new block to your post or page and find the WPForms block. You can use the search bar or look in the Widgets section. Add the block to your page.

Adding the WPForms block to your page or post

Now, select your form from the dropdown list.

Choose your form from the dropdown list

Once you’ve done that, you can publish the post or page and view how your form looks on your website.

The form with a page break on the website

We hope this tutorial helped you learn how to add a horizontal line separators in WordPress. If you want to add more design and layout elements to your posts and pages, check out our article on the best drag and drop WordPress page builders.

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 a Horizontal Line Separator in WordPress (5 Methods) appeared first on WPBeginner.

How to Fix Facebook Incorrect Thumbnail Issue in WordPress

Featured Imgs 13

Have you noticed an incorrect post thumbnail when you share your articles on Facebook?

It’s a common error that beginners often complain about because knowing how to make the right thumbnail show up is not always clear.

In this article, we will show you how to fix the Facebook incorrect thumbnail issue in WordPress.

Fixing the Facebook incorrect thumbnail issue in WordPress

Why Facebook is Not Picking up The Thumbnail Image

There are many reasons why Facebook might not correctly display the feature image on your post.

One of the most common reasons is having multiple images set in the og:Image tag where your featured image is smaller than the other images.

Facebook uses Open Graph (og) tags, and many WordPress plugins like All in One SEO and Yoast SEO automatically adds them to your site to prevent the missing thumbnail issue.

Among other causes are caching plugins, CDN conflicts, or a missing open graph meta tag for the thumbnail image.

It’s really hard to guess what’s causing the issue because there are no specific error messages displayed when using the debugging tool.

That being said, let’s take a look at some ways to fix the incorrect Facebook thumbnail issue.

Choose Your Facebook Thumbnail with All in One SEO

One way to show the thumbnail you want is to use the All in One SEO. plugin. It is the best WordPress SEO plugin on the market and allows you to easily optimize your content for search engines and social media websites.

First, you need to install and activate All in One SEO. Here’s our full guide on how to install a WordPress plugin.

Next, you’ll need to enable the ability to add Facebook thumbnail images to each post.

Simply go to All in One SEO » Feature Manager and click the ‘Activate’ button in the ‘Social Meta’ box.

Social meta feature manager All In One SEO

After you do this, you’ll now have a new feature unlocked at the bottom of your post editor. Scroll to the bottom, and you’ll see the ‘Social Settings’ tab.

You need to click on that and upload any image you want to display as your Facebook thumbnail.

All In One SEO social settings

Once you add your Facebook thumbnail image there, save your post, and this will fix the issue in most cases.

Here’s what our post looks like:

All In One SEO fixed thumbnail

Pro tip: If this doesn’t work, then make sure you have cleared your WordPress cache and refreshed the post in Facebook debug tool mentioned below in the article.

Choose Your Facebook Thumbnail with Yoast SEO Plugin

The Yoast SEO Plugin also comes with the ability to add a custom Facebook thumbnail to each individual post or page.

Simply install the Yoast SEO Plugin. After you’ve installed and activated, it’s time to set up a Facebook thumbnail into whatever post you want.

When writing a post, scroll down to the Yoast SEO meta box below the post editor and then click on the social tab. There you will see a button to upload a thumbnail image for Facebook.

Yoast Facebook featured image

Here’s what the Facebook thumbnail looks like for our how to start a blog article:

Yoast Facebook thumbnail image

Using Facebook Debug Tool to Clear the Cache

If you have added the right thumbnail, and Facebook is still not showing the right thumbnail, then the issue is related to caching.

First you need to make sure that you clear page cache in WordPress.

After that, you need to reset the cache in Facebook using their debug tool.

The Facebook debug tool is the easiest way to troubleshoot Facebook thumbnail issues.

Simply copy the URL of your WordPress post and paste it in the debugger tool.

Facebook debug tool

After that click on the Scrape Again button, and Facebook will update the thumbnail for your post. Sometimes, you may have to click the Scrape Again button twice.

We hope this article helped you resolve the Facebook incorrect/no thumbnail issue in WordPress. You may also want to see our guide on how to add social share buttons in WordPress and how to increase your blog traffic.

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 Fix Facebook Incorrect Thumbnail Issue in WordPress appeared first on WPBeginner.

How to Create a File Upload Form in WordPress

Category Image 091

Do you want to enable your website visitors to upload files on your contact form?

Maybe you are hiring employees and want to collect resumes, or perhaps you are running a photography contest where you need the applicant to attach files.

In this article, we will show you how to easily create a file upload form in WordPress.

Creating a File Upload form in WordPress

Why Create a File Upload Form in WordPress?

If you want to collect any kind of file from your users on your WordPress website, then a file upload form is a great idea.

You can let users upload images, PDF files, Word documents, or other types of files.

Using a file upload form makes life easy for you and your users. Instead of the email back-and-forth, you can create a form that includes all the fields you need, so you can collect all information at once.

Also, your form should automatically save the form data in your WordPress database. That way, you can easily find the submissions, even if you miss or delete an email.

That being said, let’s take a look at how to create a file upload form in WordPress.

How to Create a File Upload Form in WordPress

For this tutorial, we will be using WPForms, which is the best contact form plugin for WordPress.

First, you will need to install and activate the WPForms plugin. For more detailed instructions, check out our step-by-step guide on how to install a WordPress plugin.

Note: WPForms also offers a free version. However, you will need the Pro version of the plugin to unlock the file upload form template.

Upon activation, head to the WPForms » Add New page from the WordPress admin sidebar.

This will take you to the ‘Search Template’ page, where you can start by naming your form. You need to also look for the file upload form template in the search box on the left.

Next, simply click the ‘Use Template’ button under the ‘File Upload Form’ option.

Choose the File Upload form template

You will now be taken to the WPForms builder, where the File Upload Form will be automatically created for you.

You can use the file upload form template without making any changes, or you can also drag and drop form fields from the ‘Add Fields’ sidebar.

File Upload form will now be automatically created for you

Next, click on the ‘File Upload’ field in the form to open up its settings in the left column.

By default, you can upload different types of files in the form, including:

  • Image files: .png, .gif, .jpg
  • Documents: .doc, .xls, .ppt, .pdf
  • Audio: .wav, .mp3, .mp4
  • Video: .mpg, .mov, .wmv

All you have to do is type the file formats that you want to accept into the ‘Allowed File Extensions’ box.

For this tutorial, we are going to allow the image formats .png, .gif, and .jpg. Make sure to separate each file format with a comma.

Type file extension type

Note: WordPress limits the types of files that can be uploaded to the site for WordPress security reasons. You can add additional file types to WordPress if you want to allow users to upload file types that aren’t normally allowed.

You can also set a maximum file size and a maximum number of files. For our tutorial, we are going to allow people to submit up to 3 photos of up to 50MB each.

If you want to prevent people from submitting the form without attaching their file(s), you can toggle on the ‘Required’ switch. This means the form can’t be submitted unless at least 1 file has been uploaded.

Choose file size and the number of files to be uploaded

Next, simply switch to the ‘Advanced’ tab from the top.

By default, the File Upload Field uses a modern format that lets users drag and drop their files.

However, if you have limited space for your form, or you prefer a classic upload field, you can change this. Simply select the ‘Classic’ option from the ‘Style’ dropdown menu.

Tip: The classic upload field only allows one file to be uploaded. If you want users to be able to submit more than one file, you will need to add multiple File Upload Fields to your form.

Choose the Classic option as the form style from the dropdown menu

You can also choose to store the submitted files in the WordPress Media Library by toggling on the ‘Store file in WordPress Media Library’ switch. This makes it easy for you to add the uploaded files to a post or page.

For instance, if we are running a photography competition, then we may want to include the best photos when we announce the winner.

Note: The uploaded files will still be saved in your WordPress database, even if you don’t check this box. They are just stored in a separate folder in your WordPress hosting account.

Toggle the switch to allow the form to store files in the media library

If you want to edit any of the other fields on your form, you can click on them to open the field’s settings in the left column.

You can also add other fields to your File Upload form.

For example, you may want to add a Website/URL field to the form so that users can give you the link to their website.

Save the form after adding additional fields

Once you are happy with your form, click the ‘Save’ button in the top right corner of the screen to store your settings.

Setting Up Your File Upload Form’s Notifications

To change the notification settings for the form, you need to open the ‘Settings’ tab in the left corner. Once you are there, simply click on the ‘Notifications’ tab.

By default, the form sends an email notification to {admin_email}.

If you created your WordPress site by yourself, then this will be your email address. If not, then you can delete {admin_email} and type your own email address here instead.

Change the email address the receives the notifications

If you are not sure if {admin_email} is your email address, simply visit the Settings » General page from your WordPress admin dashboard.

Once you are there, look for the Administration Email Address. You can now change the admin email address from here.

Check the admin email

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

If you want the submitted files to be sent to more than one person, then you may want to see our tutorial on how to create a contact form with multiple notification recipients.

You can also change the confirmation message that users see after the form is submitted.

To do this, you need to visit the Settings » Confirmations page from the left column. Then, simply type the message into the ‘Confirmation Message’ box. You can also add formatting like bold and italics.

Change the confirmation message

Finally, don’t forget to save your form once you have made the changes.

You can exit the form builder by clicking the ‘X’ in the top right.

Adding the File Upload Form to Your Website

Once you have finished creating your form, you will need to add it to your website.

To do this, you must open an existing or new post or page from the WordPress admin sidebar. For this tutorial, we are going to add the File Upload form to a new page.

Once you are there, click on the Add New Block ‘(+)’ button in the top left corner of the screen and find the WPForms block.

Locate and add the WPForms block

Upon adding the block, you will see a WPForms dropdown menu displayed on the page.

Go ahead and select the File Upload form that you just created.

Choose the File Upload form from the dropdown menu

Finally, click the ‘Publish’ or ‘Update’ button to save your changes.

You can now visit your website to see the File Upload form in action.

File upload form preview

You can also make changes to your form anytime by visiting the WPForms » All Forms page from the admin sidebar.

From here, simply click on the name of the form, or hover your mouse over it and click the ‘Edit’ link to open up the form builder.

Edit form

When you edit your form, it will be automatically updated on your website, so you don’t need to add it to your page again.

Tip: It’s a good idea to test your form to make sure it’s working as expected. If you don’t get an email notification after creating a form entry, then you can read our step-by-step guide on fixing the WordPress not sending email issue.

Viewing or Downloading the Uploaded Files

When someone sends a file using your file upload form, you can see it in your email inbox or your WordPress dashboard.

With each form entry, you will get an email like this:

Preview of the email you'll receive when someone fills the form

Just click the links to view or download the files themselves.

You can also easily find the files in your WordPress dashboard. Simply go to the WPForms » Entries page and then click on the name of your form.

Choose the file upload form on the entries page

You can see the uploaded files in the table of form entries.

Alternatively, you can click the ‘View’ link to see the full details for each form entry.

View form entries

We hope this tutorial helped you learn how to create a file upload form in WordPress. You might also want to check out our expert picks for the best WordPress survey plugins and read our guide on how to create an email newsletter.

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 File Upload Form in WordPress first appeared on WPBeginner.

How to Change the Text Color in WordPress (3 Easy Methods)

Category Image 052

Recently, one of our readers asked if there was an easy way to change the text color in WordPress?

The answer is yes. You can easily change your font color in WordPress across your whole site, or even just for a single word inside your post content.

In this guide, we’ll show you how to easily change the text color in WordPress, step by step.

Easily change text color in WordPress

There are lots of reasons why you might want to change the text color in your posts or pages. Maybe you’d like to emphasize a keyword, or perhaps you want to use colored subheadings on a particular page.

Alternatively, you might want to change the text color across your whole site. Perhaps your theme uses a gray color for text, but you’d rather make it black, or a darker gray, for better readability.

In this tutorial, we’ll be covering the following methods:

Just click one of those links to jump straight to that method.

Method 1. Changing the Text Color Using the Visual Editor

You can use the default WordPress editor to put words, paragraphs, or even subheadings in a different color from your main text.

An example of colored text in a WordPress page

Here’s how you can change your text color using the block editor.

First, you’ll need to edit the post or page that you want to change, or create a new one.

Next, type in your text. You’ll need to create a paragraph block or a heading block as appropriate. For help with this, take a look at our tutorial on how to use the WordPress block editor.

Once your text is in place, you can change the color.

Changing the Text Color of a Block

For this first example, we’re going to change the text color of the whole block.

Simply click on the block and the Block Settings panel should open up on the right hand side of your screen. Next, click on the arrow for ‘Color settings’ to expand that tab. You’ll see the text color settings here.

Picking a text color for the whole block in WordPress

Now, you can pick a new color for the text. The visual editor will show you some options based on your theme. You can simply click on one of these to change your text color.

Alternatively, if you have a specific color in mind, click the ‘Custom Color’ link. This will open up a color picker where you can manually select a color. You can also use this to type in a hex code.

Picking a custom text color for your block

If you change your mind and want to go back to the default text color, just click the ‘Clear’ button below the color options:

Setting your block back to the default text color

Pro Tip: If you want to change the background color for a block, you can do that here too.

Changing the Text Color of a Word or Phrase

What if you only want to change the color of one or two words? That’s easy using the block editor as well.

First, you’ll need to highlight the word(s) that you want to change. Then, click the small downward arrow on the content editor toolbar.

Highlight the words that you want to change the color of

Next, simply click on the ‘Text Color’ link at the bottom of the dropdown list:

Click the 'Text Color' link at the bottom of the dropdown list

You’ll now see the same color options as for the whole block. Again, you can pick from one of the default options or use the ‘Custom color’ link to select any color you want.

Choose the text color for your highlighted word(s)

The color options aren’t limited to paragraph blocks. You can also change the text color of heading blocks. As with paragraph blocks, you can set text color for the whole block in the block settings. Alternatively, you can highlight individual words and change their color.

Changing the text color of a heading block in WordPress

Note: You cannot set a background color for heading blocks.

You can also change the text color in a list block, but only by highlighting the word(s) and using the toolbar. There’s no option in the block settings to change the text color for the whole of a list block.

Changing the Font Color Using the Classic Editor

If you’re still using the classic WordPress editor, then you can change the font color using the toolbar.

In the classic editor, click on the Toolbar Toggle on the far right. You’ll then see a second row of icons:

Click the Toolbar Toggle button to see the second row of icons

Now, you can select your text and change the font color using the font color dropdown.

Use the text color button in the classic editor

Method 2. Changing the Text Color in the Theme Customizer

What if you want to change the text color across your whole website? Many of the best WordPress themes will allow you to do this using the theme customizer.

For this example, we’re using the OceanWP theme. It’s one of the top free themes available for WordPress.

In your WordPress dashboard, go to Appearance » Customize to open up the Theme Customizer.

Go to Appearance then Customize in your WordPress dashboard

Next, you need to look for an option such as ‘Typography’. The available options, and what they’re called, will vary depending on your theme.

Select 'Typography' or a similar option in the theme customizer

Let’s go ahead and click on the Typography tab, or an equivalent option. Next, look for a setting where you can change the text of your posts and pages. In OceanWP, this is called the ‘Body’ text. You need to click on this, so you’ll can customize the font color and more.

Select the Body text to modify in the customizer

When you click on the Font Color selector, you’ll see a color picker. Choose whatever color you want to use for your text. This will change the text color in all your posts and pages.

Picking the color for your body text using the theme customizer

You can also change your heading colors in a similar way, by using the options to change H1, H2, and so on.

Once you’re happy with your changes, click the ‘Publish’ button at the top of the screen.

Publishing your changes to your website

Tip: Choosing black or dark gray text on a white or very light background is usually best for readability.

Method 3. Changing the Text Color Using CSS Code

What if your theme doesn’t have the option to change the text color?

You can still change font color across a whole site by using the theme customizer. Go to Appearance » Customizer in the WordPress dashboard.

At the bottom of the list of options, you’ll see a tab that reads ‘Additional CSS’.

Open up the Additional CSS section of the theme customizer

Next, click on the Additional CSS tab, and you’ll see some instructions plus a box where you can enter CSS code.

For starters, you can copy this code into the box. After that, you can change the 6 numbers to the hex code of your chosen color.

p { color:#990000; }

Enter the CSS for changing the paragraph color into the theme customizer

This will change the font color of the regular text in all your posts and pages to dark red (or whatever color you chose), like this:

Text color customized site-wide using CSS code

If you want to change the color of the headings within your post, you can add this code instead:

h2 { color:#990000; }

Again, change the hex code to whatever color you want.

If you’re not familiar with CSS or want a beginner-friendly CSS editor that lets you easily customize the entire styles of your website, then we recommend looking into CSS Hero. It’s a powerful visual editor that lets you customize the styles of your entire site.

CSS Hero plugin

We hope this tutorial helped you learn how to change the text color in WordPress. You might also like our tutorials on how to change the font size in WordPress, and how to add custom fonts 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 Change the Text Color in WordPress (3 Easy Methods) appeared first on WPBeginner.

Beginner’s Guide on How to Add a Link in WordPress

Category Image 091

Do you want to add a hyperlink in WordPress? Recently, one of our users asked us how to add a link in WordPress.

There are several different ways to add links in WordPress. You can add links in your posts, pages, navigation menu, sidebar widgets, footer area, and more.

In this comprehensive beginner’s guide, we will show you how to add a link in WordPress posts, pages, widgets, navigation menus, and more.

How to easily add a link in WordPress

Since this is a detailed tutorial, please use the navigation below to quickly jump to the section you need:

Why Are Links Important?

Links are the bloodstream of the internet, which makes them really important.

Basically, most websites on the internet are connected via links, which is why the term ‘web’ or ‘World Wide Web’ was introduced in the first place.

These are the hyperlinked text, buttons, and other elements that you click to go from one page to another or from one website to another.

Imagine visiting a web page with no link for you to click on. You’ll have no option but to click on the back button in your browser.

For individual websites, links tell your users where to click to view more information.

Properly placing links on your website allows you to increase the time users spend on your website. It also helps users discover more content, make a purchase on your online store, or subscribe to your email newsletter.

That being said, let’s take a look at how to easily add links in different areas of your WordPress website.

How to Add Links in WordPress Posts and Pages

WordPress makes it really easy to add links in your blog posts and pages using the block editor.

Simply edit your post or page, or create a new one.

Next, highlight the text that you want to attach the link to. This selected text is called the anchor text for the link. Now click on the ‘Link’ button:

You’ll see a box where you can enter a URL. A URL is a web address. For instance, WPBeginner’s guide on how to start a WordPress blog has the URL https://www.wpbeginner.com/start-a-wordpress-blog.

You can simply copy and paste the URL of the post or page you want to link to, like this:

Creating a link by pasting in a URL using the WordPress block editor

Click the Apply (Enter) button to insert the link into your post.

If you’re linking to content on your own site, then it might be quicker to search for it. Type a word or two from your content title, and WordPress will find it:

Searching for a page to link to using the WordPress block editor

Click on the title of the page or post you want to link to, and the URL will be automatically added for you. Again, you’ll need to click the Apply button to put the link into your post.

If you want to set your link to open in a new tab, then click the arrow on the right. You can then click the toggle and set your link to open in a new tab.

Setting your link to open in a new tab using the WordPress block editor

Note: We recommend that you only use this option for links to third-party websites. This way your users don’t leave your website while visiting it.

Adding Link in Old WordPress Editor

If you are using the older classic editor instead of the block editor, then the process for adding a link is quite similar.

Open up the post that you want to edit, or create a new one. Find the text you want to use as the link’s anchor and highlight it. Then, click the ‘Link’ button which should appear in the first row of toolbar buttons.

Creating a link using the WordPress classic editor

You can then copy and paste the URL you want to link to, or search for it, as in the block editor.

Pasting your URL directly onto the anchor text

Another, even quicker, way to add a link in both the block editor and classic editor is to simply paste the URL onto the anchor text.

First, copy the URL you want to link to. Then, highlight your chosen anchor text in your post.

Next, you can either right-click and select ‘Paste’ or simply press Ctrl+V (Windows) or Command+V (Mac) to paste the URL.

Paste your link directly into your content

WordPress will automatically detect that you’re pasting a URL, not text, and will turn the anchor text into a link.

Take a look at our tips for mastering the WordPress content editor to learn more about using the block editor effectively.

How to Add Links in WordPress Text Widgets

WordPress allows you to add widgets to your site’s non-content areas like sidebar, footer, or other widget areas.

Some of these widgets are automated and do not have many options. For example, the Recent Posts widget will automatically show links to your recent posts. You don’t need to do anything extra.

However, if you want to add some custom text with links in your sidebar, then you can use the Text Widget.

Go to the Appearance » Widgets page and then drag ‘Text’ widget into your sidebar or other widget area.

You can then type in your text and add a link just as you would when adding one to a post or page.

Adding a link in a widget

Make sure you click the ‘Save’ button beneath your widget after making changes.

How to Add Links in WordPress Navigation Menus

Do you want to add links to your site’s navigation menu? WordPress comes with a built-in drag and drop menu editor which allows you to create and manage navigation menus on your WordPress site.

Go to the Appearance » Menus page. If you don’t already have a menu set up, then you can create one by entering a menu name.

Next, select the pages you want to add to your menu on the left-hand side, then click the ‘Add to Menu’ button.

WordPress will automatically link to your selected posts and pages. You can move menu items and up and down to rearrange them.

You can also add any link you want to your menu. It doesn’t have to be a page or post on your site. For instance, you could enter the URL of your Twitter profile and add that to your navigation menu.

To enter a link, just click the arrow next to the ‘Custom Links’ section on the left. You can then type in the URL and the text you want to use for the link.

Adding a custom link to your navigation menu

For more help with creating your menu, take a look at our beginner’s guide on how to add navigation menus in WordPress.

How to Add Title and Nofollow in WordPress Links

It’s often useful to give your links a title. This is the text that appears when someone runs their mouse cursor over the link, like this:

A link with a title

Adding a title often makes it clear where the link leads to. It can be helpful or even reassuring for your readers.

However, WordPress does not allow you to add title to the links with the default editor. You can still add it, and we’ll show you how to do that in a bit.

You may also want to add a nofollow tag to external links. This tells search engines not to pass your site’s SEO score to that link because you don’t own or control the content on that website.

WordPress also does not support nofollow by default either.

Method 1. Use AIOSEO plugin in Gutenberg

All in One SEO plugin (AIOSEO) for WordPress automatically adds the title, nofollow, sponsored, and UGC attributes to your links.

All in One SEO Title and Nofollow

Method 2. Use HTML code in Gutenberg

If you’re using the Gutenberg editor, and don’t want to use AIOSEO, then you’ll need to manually edit the HTML to add title and nofollow attributes to your links.

First, add your link within your paragraph block in the usual way. Next, click on the three vertical dots and select ‘Edit as HTML’ as shown here:

Switching to the HTML view of a block in the WordPress block editor

You’ll now see the HTML code for your block.

Viewing the HTML code for a block in the WordPress editor

You can add a title and/or a nofollow attribute to the link like this:

<p>You can find out more about our company on our <a href="https://www.examplecompany.com/about-us/" title="About Us" rel="nofollow">About Us</a> page.</p>

For the title, you can change “About Us” to be whatever you want. With the nofollow attribute, this should always be rel="nofollow". Don’t forget the double quotation marks around the title and the “nofollow” as your link won’t work correctly without them.

Method 3. Use a Plugin with the Classic Editor

If you’re using the Classic Editor, you can install and activate the the Title and Nofollow for Links plugin.

This plugin will add title, nofollow, and sponsored checkbox options to the insert link popup.

Highlight your anchor text and click the ‘Link’ button, then click the cog:

Locating the cog icon for a link in the classic editor

You’ll then see the additional options:

Additional options created by the Title and Nofollow for Links WordPress plugin

For more help, take a look at our guide on how to add title and nofollow to the insert link popup in WordPress for more information on this plugin.

How to Add Link Buttons in WordPress

Do you want to add a button to your WordPress posts or pages? There are many ways you can do this. The easiest is using WordPress’s built-in Button block.

Create a new post or page, or edit an existing one. Then, click the (+) icon to create a new block. Select ‘Button’ from the ‘Layout Elements’ options, or simply search for the Button block.

Adding a 'Button' block to your post or page in WordPress

You can type the text for your button by clicking in the colored area. Enter the URL that the button should go to in the ‘Link’ box.

Adding the text and link for your button

To change the button’s alignment, or to make the text bold or italic, just use the controls at the top of the block itself.

You can make more changes to how the button looks in the block options on the right-hand side of your screen. For instance, you might want to change the color or add a wider border.

You can also change the link settings here. You can set your link to open in a new tab, and if you want, you can also add the ‘nofollow’ attribute to the link by typing it in the ‘Link rel’ box.

The right hand panel where you can edit your button's design and how the link works

What if you’re still using the old WordPress classic editor? You can install the “Forget About Shortcode Buttons” plugin to easily create buttons while you’re editing a post or page.

Simply install and activate the Forget About Shortcode Buttons plugin. Then, create a new post or edit an existing one.

You’ll see the ‘Insert Button’ icon in the toolbar, on the right hand side:

The Insert Button icon on the right hand side of the classic editor's toolbar

Click on the button, and you’ll see a popup. Here, you can customize your button, choose colors, borders, add text, add an icon, and include the link itself while seeing a live preview.

Creating a button for your link and customizing the design

For more information and details take a look at our guide on how to add buttons in WordPress without using shortcodes.

How to Embed Linked Content in WordPress

You can easily embed certain types of content in WordPress by simply inserting its URL in your post. This is sometimes called creating a “content card” in your post.

Just paste the whole URL into its own paragraph block. The whole tweet, including images, likes, timestamp, and more will be embedded like this:

Embedding a tweet by pasting in the link to it in WordPress

The process is the same for YouTube videos. Simply find the video you want to use on YouTube and copy the URL from the top of your browser window:

Get the link to your chosen YouTube video from your browser's address bar

Next, paste the link into your post or page. It’ll automatically embed the video:

Embedding a YouTube video into your post

As well as being great for Twitter posts and YouTube videos, this method also works for many other types of content. You can find out more from WordPress’s support article on ‘Embeds’.

How to Add Affiliate Links in WordPress

Do you want to increase your site’s revenue by using affiliate links? Affiliate marketing provides a steady income to many blogs and websites.

All you need to do is add special referral links to products and services that you recommend. When your visitors purchase these products after clicking your links, you get a commission.

The problem that most beginners face is that each product or website they want to recommend has a different URL. It’s tricky to keep track of these, especially if you’re recommending lots of products.

The best way to add and manage affiliate links is by using an affiliate management plugin. We recommend using either Pretty Links or Thirsty Affiliates.

Both of these plugins work by creating redirect links such as www.yoursite.com/refer/partnersitename that send people to your special affiliate link.

The plugins will add a new option to your WordPress menu where you can add your affiliate links. Here’s how that looks with ThirstyAffiliates. You simply copy and paste your special affiliate link into the ‘Destination URL’ box.

Adding a link in ThirstyAffiliates

You can set specific options for your link on the right hand side, deciding whether to nofollow it, open it in a new window/tab, and more.

Setting the options for your affiliate link with ThirstyAffiliates

Once you’re done, click ‘Save Link’.

After you’ve set up your affiliate links, you can easily add them into your posts and pages. In a paragraph block, click the down arrow then select the ‘Affiliate Link’ option:

Adding an affiliate link to your post

Next, type in the start of whatever you named that affiliate link. In our example, that’s “Our Affiliate Partner”.

Finding your affiliate link by searching for it

You can then click the name and click ‘Apply’ to add the affiliate link to your post.

If you ever need to change an affiliate link (e.g. if the company you’re linking to moves to a different affiliate program) then that’s really easy to do.

You just change it once in your dashboard, under “ThirstyAffiliates” or “Pretty Links”. The redirect link stays the same as before, but it’ll now redirect to the new affiliate link everywhere it’s used.

For more handy affiliate plugins, check out our post on the best affiliate marketing tools and plugins for WordPress.

How to Manually Add a Link in HTML

Occasionally, you might want to add a link to your site using HTML code. This could happen if you need to use a custom HTML block or widget.

You might also need to directly edit a link in your theme file. Just make sure you always use a child theme so you don’t lose your changes when you update the parent theme.

It’s easy to create a link in HTML. To try it, add a custom HTML block to a post or page. You can find this block under ‘Formatting’ or you can search for it using the search bar.

Adding a custom HTML block to your post or page

Next, you’ll see a box where you can write HTML. Copy this code into the box:

<a href="https://www.yourlinkhere.com">Text</a>

It should look like this:

The HTML code to create a link

You can click the ‘Preview’ tab to see how your code will look in your post or page:

Previewing how the HTML will display in the post or page

Now click back to the ‘HTML’ tag. Change the URL to the URL you want to link to. Change the word ‘Text’ to whatever word or words you want to use for your link.

To add a title to your link, you’ll need to include it in the code like this. You can change “This is the title” to anything you want.

<a href="https://www.yourlinkhere.com" title="This is the title">Text</a>

If you want your link to open in a new tab, simply add target="_blank" to the HTML code, like this:

<a href="https://www.yourlinkhere.com" target="_blank">Text</a>

If you want your link to be nofollowed, add rel="nofollow", like this:

<a href="https://www.yourlinkhere.com" rel="nofollow">Text</a>

You can include all of these at once. This is how a link with a title, that opens in a new tab and is nofollowed, would look:

<a href="https://www.yourlinkhere.com" title="This is the title" target="_blank" rel="nofollow">Text</a>

That’s how you create a link in HTML, if you ever need to.

An anchor link is a type of link on the page that brings you to a specific place on that same page. It allows users to jump to the section they’re most interested in.

Take a look at the animated screenshot below:

Anchor link preview

These type of links are really helpful when writing longer tutorials or content, so your users can easily jump to the section they’re most interested in.

We have created a detailed step by step guide on how to easily add anchor links in WordPress.

Want to add social share links or buttons on your site?

These links make it easy for your users to share your content on their favorite social networks. Sometimes social share links or buttons are also accompanied by total share count.

Facebook social share button

We don’t advise users to add these links manually. Instead, you should always use a social share plugin.

We have a step by step guide on how to add social share buttons in WordPress.

We hope this article helped you learn how to add a link in WordPress. You may also want to see our beginner’s guide on how to create a professional business email address, and how to start an email newsletter 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 Beginner’s Guide on How to Add a Link in WordPress appeared first on WPBeginner.

How to Import and Export Navigation Menus in WordPress

Featured Imgs 13

Do you want to export a navigation menu from one WordPress site and import it into another?

The default WordPress import / export feature allows you to transfer menus as part of the full site transfer, but it does not let you import / export menus by themselves.

In this article, we’ll show you how to easily import / export navigation menus in WordPress, so you can save time.

How to import and export navigation menus in WordPress

Understanding WordPress’s Import / Export Features

On every WordPress site, you have built-in import and export features. You can find these under Tools » Import and Tools » Export in your WordPress dashboard.

The Import and Export options under the Tools menu in the WordPress dashboard

If you go to the Export page, you’ll see the WordPress default options. These let you choose between exporting all content, or exporting only your posts, pages, or media.

The built-in Export options in WordPress

All content includes your navigation menus … plus posts, pages, comments, custom fields, terms, and custom post types.

But in many cases, you don’t want to import everything. For instance, you might just want to replicate your navigation menu and the pages included in it, but not your posts or any other pages.

Luckily, there’s an easy plugin that extends this functionality, so you can only import and export navigation menus in WordPress.

That being said, let’s take a look at how to import and export navigation menus without exporting all the content.

Export and Import Navigation Menus in WordPress

Before going further, make sure you’re happy with the menu you’ll be exporting. You can find your site’s menu under Appearance » Menus.

Editing your navigation menu in the WordPress dashboard

If you need help to create or change your menu, take a look at our tutorial on how to add a navigation menu in WordPress.

Next, you need to install and activate the WPS Menu Exporter plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Tools » Export page in your WordPress admin dashboard.

You should now see an additional option to export navigation menu items. This will include your menu itself, plus all the pages that are linked from your menu.

If you have any posts in your menu, those will be included too, along with any comments on them.

The Export Navigation Menu Items option in the Export tool

Simply select the Navigation Menu Items radio button and then click the ‘Download Export File’ button.

This lets you download your navigation menu and its associated pages to your computer. These are stored in an .xml file with the name site.wordpress.yyyy-mm-dd, where “site” is the name of your website and “yyyy-mm-dd” is the date.

The downloaded .xml file containing your navigation menu items and pages

Importing Your WordPress Menu to Your New Site

You can import the .xml file you just downloaded by using WordPress’s standard Import feature. It’s a simple process. You just need to upload your navigation menu file to your new site.

Important: Make sure you don’t have any existing pages with the same name as pages in the menu you’re importing, not even in the trash. Otherwise, the import tool may not be able to import those pages correctly.

First, log in to your WordPress dashboard on the new site where you want to import your menu.

Next, go to Tools » Import. You’ll need to install the WordPress importer. Just click the ‘Install Now’ link beneath ‘WordPress’ at the bottom of the list.

Installing the WordPress import tool

Once you’ve installed the WordPress importer, you should see a ‘Run Importer’ link in place of the ‘Install Now’ link.

Click the link to run the WordPress import tool

After you click on this link, you’ll see the Import WordPress screen. Here, you’ll need to click the ‘Choose file’ button so you can select the .xml file you downloaded earlier.

Once you’ve selected your file, go ahead and click the ‘Upload file and import’ button.

Upload your .xml file and click the button to import it to your new site

On the next screen, you’ll be asked to ‘Assign Authors’. The default option is to import the original author of the menu content.

Choose which user to assign pages to when you import them

In many cases, it’ll make the most sense to set an existing user as the author of the imported content. You can do that by selecting the user’s name from the dropdown menu.

Selecting an author from the dropdown list to assign the pages to

If you plan to re-use the content of the pages themselves, then you’ll also want to check the ‘Download and import file attachments’ box. This means that images will be included in the import.

Once you’re happy with your settings, click the ‘Submit’ button at the bottom of the page.

Upon completion, you should see the following message:

The success message after importing the navigation menu

Viewing Your Imported Menu and Pages

The import has put your menu and the associated pages in place. To take a look at the imported menu, just go to Appearance » Menus. Here, you can make sure that it’s been imported correctly.

You can also click on the Pages tab in your WordPress dashboard to check out the new pages that have been imported along with the menu.

Viewing the list of pages on your website

That’s it, you’ve successfully imported your navigation menu and the associated pages. You can edit the menu and the pages however you like.

We hope this article helped you learn how to import and export navigation menus in WordPress. You might also like to take a look at our tutorials on how to style WordPress navigation menus and how to create a dropdown menu 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 Import and Export Navigation Menus in WordPress appeared first on WPBeginner.

How to Easily Change the Font Size in WordPress

Category Image 052

Do you want to change the font size in your WordPress posts or pages?

Sometimes, you may want to make a line or a paragraph larger, or you might want to increase the font size of your entire page content.

In this article, we’ll show you how to easily change the font size in WordPress. You’ll learn not only how to change font size in your WordPress posts, but also how to do it across your website.

Change font size in WordPress

Method 1: Using Paragraph Headings

It takes your visitors just a couple of seconds to decide whether they want to stay or leave your website. This gives you very little time to convince them to stay on your website.

Using Headings in your content is a great way to grab user attention.

They allow you to break your posts and pages into sections using different headings (often called “subheadings”).

Headings are great for SEO as well. Search engines give proper headings more weight than normal paragraph text.

How to add a heading in the default WordPress block editor

You can add a heading to your posts or pages by simply adding the ‘Heading’ block. You can search for it or find it in the ‘Common Blocks’ section in the WordPress block editor.

Adding a heading block in Gutenberg

The block will default to Heading 2. Normally, it makes sense to stick with Heading 2 for your subheadings. If you want to change this, then you can simply click on the ‘H2’ drop-down to select a different size.

Selecting your Heading size in the block editor

Alternatively, you can change this in the block settings on the right-hand side of the screen. You can also change the heading’s color there as well.

How to add a heading in the older Classic Editor

If you are still using the older classic editor in WordPress, then you can add headings using the ‘Paragraph’ drop-down.

Just highlight the text that you want to turn into a heading, click the ‘Paragraph’ drop-down, and select your heading size.

Creating a heading by clicking on the Paragraph drop-down in the classic editor

The sizes and colors of the different Heading styles are controlled by your theme’s stylesheet (style.css).

If you’re using a premium WordPress theme, then you may have the option to change these settings under Appearance » Customize.

Using subheadings in your articles makes it easier for readers to follow what you’re telling them. At the same time, it also makes your WordPress posts SEO friendly.

Method 2: Changing the Size of the Text in the Block Editor

What if you want to have a paragraph or even your whole post in a larger font? You can do this really easily using the default WordPress block editor.

Just click on any paragraph block, then select the font size under ‘Text Settings’ on the right-hand side.

Changing the text size of a paragraph block

You can select from the drop-down, which covers Small, Normal, Medium, Large, and Huge. If you change your mind, then just click the ‘Reset’ button to set your paragraph back to the default text.

There’s also a ‘Custom’ option where you can simply type in the pixel size that you’d like. If you want, you can also set a large Drop Cap to appear at the start of your paragraph.

These options aren’t available in the older classic editor for WordPress. If you want to use them, then think about making the switch. Our tutorial on how to use the new WordPress block editor will help you.

If you are determined to stick with the classic editor, then this next option is for you.

Method 3: Change Font Size Using The TinyMCE Advanced Plugin

TinyMCE Advanced is a WordPress plugin that gives you more control over font sizes and text formatting, as well as a range of other features.

This is particularly useful with the older classic editor, but it also works with the block editor. It adds a new block called “Classic Paragraph” that has all the TinyMCE controls.

To use it, you’ll first need to install and activate the TinyMCE Advanced plugin. If you’re not sure how to do that, check out our step by step guide on how to install a WordPress plugin.

Next, go to Settings » TinyMCE Advanced to configure the editor settings. This is where you can set up the buttons you want to use in the TinyMCE Advanced toolbar.

If you’re using it with the Classic editor, then you should see that TinyMCE has the ‘Font Size’ drop-down enabled by default in the second row of icons.

You can move it to the first row by dragging it upwards if you want.

The font sizes drop-down button on the TinyMCE Advanced menu for the classic editor

If you’re using the block editor, then you’ll need to scroll down the screen and add the Font Sizes drop-down to the toolbar by dragging and dropping it:

Adding the font sizes button to the TinyMCE Advanced block toolbar

Make sure you click ‘Save Changes’ at the bottom of the screen.

To see the button in action, create a new post or edit an existing one.

In the block editor, you’ll now have the option to add a ‘Classic Paragraph’ block. It will have the TinyMCE Advanced controls, like this:

The Classic Paragraph block in the block editor, added by the TinyMCE Advanced plugin

In the classic editor, you’ll see the TinyMCE Advanced toolbars with a font size drop-down:

Changing the font size using the TinyMCE Advanced editor

You can select any font size from the drop-down.

Note: this doesn’t give you as many options as the WordPress block editor, and you can’t type in your own font size.

Method 4: Change Site-Wide Font Size Using CSS

If you are changing font sizes every time you edit a post, then you may want to make it easier by changing it permanently in your theme.

The good news is that you can change the default paragraph size across your whole site. The best way to do this is by using the Theme Customizer under Appearance » Customize.

Some WordPress themes may come with an option for you to change the font size. If you can find this option, then you can use it without writing CSS code.

However, if your theme does not have that feature, then you can add custom CSS to add your own font size rules.

Simply click on the ‘Additional CSS’ option in the theme customizer. This is where you can store all your custom CSS code.

Using the Customizer to add CSS code to your site

Now under the additional CSS text box, simply add your CSS code. In this example, we are changing the font size to ’16px’, you can choose a different font size.

p { 
font-size:16px; 
} 

You’ll immediately see the changes on the preview on the right-hand side of the screen. If you’re happy with the font size, click the ‘Publish’ button at the top of your screen to make it live.

Note: Your custom CSS will only be applied to the theme you’re using. If you later choose to switch to a different WordPress theme, you’ll need to copy and paste it into the Customizer again.

The above code only applies to paragraph text. What if you wanted to change the font size of all h2 sub-headings?

Simply modify the above code to target the h2 element in your theme like this:

h2 { 
font-size:32px; 
} 

You can do the same thing with other headings as well by simply changing h2 to h3, h4, or h5.

We hope this article helped you learn how to easily change the font size in WordPress. You may also want to see our guide on how to use custom fonts in WordPress or our list of the best drag & drop WordPress page builder plugins.

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 Easily Change the Font Size in WordPress appeared first on WPBeginner.

How to Add Custom Navigation Menus in WordPress Themes

Best Wordpress Themes 1

Do you want to add custom navigation menus in your WordPress theme?

All themes have set locations where you can display a navigation menu. However, by default, you can’t add a menu anywhere else except these pre-defined locations.

In this article, we’ll show you how to add a custom navigation menu to any area of your WordPress theme.

How to add custom navigation menus in WordPress themes

Why Add Custom Navigation Menus in WordPress Themes?

A navigation menu is a list of links pointing to important areas of your website. They make it easy for visitors to find interesting content, which can increase pageviews and reduce bounce rate in WordPress.

The exact location of your menu will vary based on your WordPress theme. Most themes have several options, so you can create different menus and show them in different places.

To see where you can display menus in your current WordPress theme, simply head over to Appearance » Menus and then take a look at the ‘Display location’ section.

The following image shows the locations that are supported by the Astra WordPress Theme.

The menu locations in the popular Astra theme

However, sometimes you may want to show a menu in an area that isn’t listed as a ‘Display location’ in your theme.

With that in mind, let’s take a look at how to create WordPress navigation menus and then add them to your theme. Simply use the quick links below to jump to the method you prefer.

Method 1. Adding a Custom Navigation Menu in Full Site Editing

If you’re using a block theme, then you can add a custom navigation menu using Full Site Editing (FSE) and the block editor. For more details, you can see our article on the best WordPress full-site editing themes.

This method doesn’t work with every theme, and it doesn’t let you customize every part of the menu. If you want to add a completely custom menu to any WordPress theme, then we recommend using a page builder plugin.

If you are using a block-based theme, then head over to Appearance » Editor.

How to launch the FSE

This will launch the full site editor with one of your active theme’s templates already selected.

If you want to add a custom navigation menu to a different template, then click on the arrow in the toolbar and select ‘Browse all templates.’

Changing templates in the Full Site Editor

The site editor will now show all the different templates that are part of your theme.

Simply find the template that you want to edit, and give it a click.

Switching templates in the block-based FSE

The next step is adding a Navigation block to the area where you want to show your menu.

In the top-left corner, click on the blue ‘+’ button.

Adding blocks to your WordPress theme

Now, go ahead and type ‘Navigation’ into the search bar.

When the ‘Navigation’ block appears, simply drag and drop it onto your layout.

The WordPress Navigation block

Next, click to select the Navigation block.

If you’ve already created the menu that you want to display, then click ‘Select Menu’ and make your selection from the dropdown.

Adding a custom navigation menu using FSE

Another option is to click on ‘Create new menu,’ which allows you to build a navigation menu inside the full site editor.

To start with a blank menu, simply click on ‘Start empty.’

Building a menu in the WordPress full site editor

To add items to the new menu, just click on the ‘+’ icon.

This opens a popup where you add any post or page, and decide whether these links should open in a new tab.

How to build a new menu in the block editor

Simply repeat these steps to add more items to the menu.

When you’re happy with how the menu looks, simply click on the ‘Save’ button. Your site will now be using the new template, and visitors can interact with your custom navigation menu.

Method 2. Creating a Custom Navigation Menu in WordPress Using SeedProd (Works With All Themes)

The full site editor is a quick and easy way to add a basic custom menu to block-based themes. However, if you want to add an advanced, fully-customizable menu to any theme, then you’ll need a page builder plugin.

SeedProd is the best WordPress page builder plugin on the market and allows you to customize every part of your navigation menu.

SeedProd comes with over 180 professionally-designed templates that you can use as your starting point. After choosing a template, you can add a custom navigation menu to your site using simple drag and drop.

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

Note: There’s also a free version of SeedProd that allows you to create custom navigation menus without writing code. However, in this guide, we’ll be using SeedProd Pro since it has lots more templates for you to choose from.

After activating the plugin, SeedProd will ask for your license key.

SeedProd license key

You can find this information under your account on the SeedProd website. After entering the key, click on the ‘Verify Key’ button.

Once you’ve done that, go to SeedProd » Landing Pages and click on the ‘Add New Landing Page’ button.

SeedProd's page design templates

You can now choose a template for your custom page.

To help you find the right design, all of SeedProd’s templates are organized into different campaign types such as coming soon and lead squeeze campaigns. You can even use SeedProd’s templates to improve your 404 page.

The SeedProd template library

To take a closer look at any design, simply hover your mouse over that template and then click on the magnifying glass icon.

When you find a design that you want to use, click on ‘Choose This Template.’

Choosing a SeedProd template for your WordPress website

We’re using the ‘Black Friday Sales Page’ template in all our images, but you can use any template you want.

After choosing a template, type in a name for that custom page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.

After entering this information, click on the ‘Save and Start Editing the Page’ button.

Creating a new page using SeedProd

Most templates already contain some blocks, which are the core components of all SeedProd page layouts.

To customize a block, just click to select it in the page editor.

The left-hand toolbar will then show all the settings for that block. For example, in the image below, we’re changing the text inside a ‘Headline’ block.

Editing a headline in SeedProd

You can format the text, change its alignment, add links, and more using the settings in the left-hand menu.

To add new blocks to your design, simply find any block in the left-hand menu and then drag it onto your design. If you want to delete a block, then simply click to select that block and then click on the trash can icon.

Removing blocks from a custom layout

Since we want to create a custom navigation menu, drag a ‘Nav Menu’ block onto the page.

This creates a navigation menu with a single default ‘About’ item.

Adding a custom navigation menu to a WordPress layout

To customize this menu item, click to select it in the left-hand menu.

This opens some controls where you can change the text, as well as add the URL for the menu item to link to.

Adding a custom navigation menu to a landing page

By default, the menu item will be a ‘dofollow’ link and open in the same browser window. To change either of these settings, simply use the checkboxes in the ‘URL Link’ section.

In the following image, we’re creating a “nofollow” link that will open in a new window.

Marking a menu item as no-follow

To add more items to the menu, simply click on the ‘Add New Item’ button.

You can then customize each of these items by following the same process described above.

Adding items to a custom navigation menu

The left-hand menu also has settings that change the font size and text alignment.

You can even create a divider, which will appear between each item in the menu.

Creating a divider for your custom navigation menu

After that, go ahead and switch to the ‘Advanced’ tab. Here, you can change the menu’s colors, spacing, typography, and other advanced options.

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

The SeedProd advanced customization settings

When you’re happy with how the custom menu looks, it’s time to publish it.

Simply click the dropdown arrow next to ‘Save’ and then select ‘Publish.’

How to publish a custom page layout

Your custom navigation menu and the page will now go live on your WordPress blog.

Method 3. Creating a Custom Navigation Menu in WordPress Using Code (Advanced)

If you don’t want to set up a page builder plugin, then you can add a custom navigation menu using code. Normally, you would need to add custom code snippets to your theme’s functions.php file.

However, we don’t recommend this method for anyone but advanced users, and even then, a small mistake in your code could cause a number of common WordPress errors, or break your site completely.

That’s why we recommend using WPCode. It is the easiest and safest way to add custom code in WordPress without having to edit any core WordPress files.

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

Upon activation, go to Code Snippets » Add Snippet in your WordPress dashboard.

Adding a code snippet using the WPCode WordPress plugin

Here, you’ll see all of the different ready-made snippets that you can add to your site.

Since we want to add our own snippet, hover your mouse over ‘Add Your Custom Code,’ and then click ‘Use snippet.’

Adding a custom snippet to your WordPress website

To start, enter a title for the custom code snippet. This can be anything that helps you identify the snippet.

After that, open the ‘Code Type’ dropdown and select ‘PHP Snippet.’

Adding a custom navigation menu using WPCode

Once you’ve done that, simply paste the following snippet into the code editor:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

This will add a new menu location to your theme, called ‘My Custom Menu.’ To use a different name, simply change the above code snippet.

If you want to add more than one new navigation menu to your theme, then simply add an extra line to your code snippet. For example, here we’re adding two new menu locations to our theme, called My Custom Menu and Extra Menu:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Below the code box, you will see insertion options. If it isn’t already selected, then choose the ‘Auto Insert’ method so the snippet will be automatically inserted and executed on your site.

After that, open the ‘Location’ dropdown and click on ‘Run Everywhere.’

Running a custom code snippet

Then, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle so it changes to ‘Active.’

Finally, go ahead and click on ‘Save’ to make this snippet live.

Inserting a custom navigation menu using the WPCode WordPress plugin

After that, go to Appearance » Menus and look at the ‘Display location’ area.

You should now see a new ‘My Custom Menu’ option.

A custom navigation menu created using the WPCode plugin

You’re now ready to add some menu items to the new location. For more information, please see our step-by-step guide on how to add navigation menus for beginners.

When you’re happy with your menu, the next step is adding it to your WordPress theme.

Adding the custom navigation menu to your WordPress theme

Most website owners show their navigation menu directly under the header section just after the site logo or title. This means the navigation menu is the first thing visitors see.

However, you can display your custom navigation menu anywhere you want by adding some code to the theme’s template file.

In your WordPress dashboard, go to Appearance » Theme File Editor.

In the right-hand menu, select the template that you want to edit. For example, if you want to show the custom navigation menu in your website’s header, then you’ll typically want to select the header.php file.

The WordPress theme file editor

For help finding the right template file, please see our guide on how to find which files to edit in your WordPress theme.

After selecting the template file, you need to add a wp_nav_menu function and specify the name of your custom menu. For example, in the following code snippet we’re adding My Custom Menu to the theme’s header:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

After adding the code, click on the ‘Update File’ button to save your changes.

Editing the WordPress theme files

Now if you visit your site, you’ll see the custom menu in action.

By default, your menu will appear as a plain bulleted list.

A custom WordPress menu created using code

You can style the custom navigation menu to better match your WordPress theme or company branding by adding custom CSS code to your site.

To do this, go to Appearance » Customize.

Customizing a WordPress theme

In the WordPress customizer, click on ‘Additional CSS.’

This opens a small code editor where you can type in some CSS.

Adding additional CSS to your WordPress theme

You can now style your menu using the CSS class that you added to your theme template. In our example, this is .custom_menu_class.

In the following code, we’re adding margins and padding, setting the text color to black, and arranging the menu items in a horizontal layout:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a {
    color:#000;
}

The WordPress customizer will update automatically to show how the menu will look with the new style.

Styling a custom navigation menu

If you’re happy with how the menu looks, then click on ‘Publish’ to make your changes live.

For more information, please see our guide on how to style WordPress navigation menus.

Do More With WordPress Navigation Menus

With WordPress, you can do much more than just show links in a menu. Here’s how to get even more out of your navigation menus:

We hope this ultimate guide helped you learn how to add a custom navigation menu in WordPress. You may also want to see the best ways to increase your blog traffic and how to track website visitors to 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 Add Custom Navigation Menus in WordPress Themes first appeared on WPBeginner.

How to Duplicate a WordPress Page or Post with a Single Click

Wp Plugins

Recently one of our readers asked if it was possible to duplicate a WordPress page with a single click?

Creating a duplicate post or page allows you to work on it without affecting the existing version.

In this article, we will show you how to quickly duplicate a WordPress page or post with all the settings.

Easily duplicate a WordPress post or page

Why Clone or Duplicate a Page / Post in WordPress?

When you are running a blog for a while, you may sometimes need to quickly copy a post or page.

For instance, a sales page that already has a lot of content that you can reuse, or an older article that can be extended as a new article.

Now, you could manually copy and paste the contents of the post or page to a new draft. However, this does not copy your featured image, post settings, SEO settings, and other metadata.

Wouldn’t it be nice if there was an easier way to automatically duplicate a post or page with all its settings and content?

With this approach, you can just edit a post and start working on it right away.

Let’s see how to easily and properly clone a WordPress post or page with just a click.

Video Tutorial

If you prefer written instructions, then continue reading.

Duplicate a WordPress Post or Page

First, you need to install and activate the Duplicate Post plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Posts » All Posts page. You will notice two new links to clone or to create a new draft below each post title.

Clone post or create a new draft

Clicking on ‘Clone’ will simply create a duplicate post and will not open the duplicate post in the post editor.

The ‘New Draft’ option will duplicate the post and open the duplicate version in the post editor, so you can start working on it right away.

You will also find the same options for pages as well.

The duplicate post plugin works really well. However, if you want to use it mainly for updating old published posts, then there is a better way to do that.

See our guide on how to properly update live published posts in WordPress for more details.

If you want to use it for other scenarios such as website redesign, copying landing pages, etc, then this is where the plugin really shines.

Customizing Duplicate Post Plugin Settings

The duplicate post plugin works out of the box and supports posts and pages by default.

You can also customize the plugin to enable support for custom post types, restrict to user roles, and choose what to copy when creating a duplicate.

Let’s take a look at all these settings.

Head over to Settings » Duplicate Post page to configure plugin settings.

Duplicate post settings

The settings page is divided into three tabs. First tab allows you to choose what to copy when creating a duplicate.

The default options should work for most websites. However, you can check things you want to copy and uncheck items that you don’t want to be copied.

Next, you need to move on to the permissions tab.

Duplicate Post permissions

By default, the plugin allows administrator and editor user roles to create duplicate posts.

It also enables duplicate post feature for posts and pages post types.

If you are using custom post types on your website, then those post types will appear here. You can choose whether you want to enable duplicate post feature for those post types as well.

Finally, click on the Display tab to choose where you want to display the clone post links. By default, the plugin shows them on post list, edit screen, and admin bar.

Duplicate Post display options

Don’t forget to click on the save changes button to store your settings.

That’s all, we hope this article helped you learn how to easily duplicate a WordPress page or post. You may also want to see our ultimate WordPress SEO guide for beginners and our tips on how to speed up 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 Duplicate a WordPress Page or Post with a Single Click appeared first on WPBeginner.