Editorial Staff – Page 17

June 15, 2020

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

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).

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.

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.

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.

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:

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

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.

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.

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.

Here’s a finished gallery demo from our sample 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.

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.

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

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.

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.

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

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.

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.

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

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.

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.

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.

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.

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

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.

June 8, 2020September 9, 2024

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

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.

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:

How to Add a Horizontal Line Divider in Block Editor
How to Add a Horizontal Line Divider in Classic Editor
How to Add a Horizontal Line Divider with Manual HTML
How to Add Other Types of Spacers and Page Breaks in WordPress
How to Break a Long WordPress Forms into Multiple Sections

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.

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

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.

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.

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.

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.

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:

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:

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

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:

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

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:

And here’s how the More link appears on your 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:

And here’s how the page break appears on your 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.

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.

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.

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.

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.

Now, select 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.

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.

June 5, 2020

Why Does WordPress Sites Require Regular Database Optimization?

WordPress looks simple to everyone; however, it is a lot more complicated than you think. A lot is going on at its backend to make it seamlessly perform for your needs. Even if you have...

June 4, 2020

How to Fix Facebook Incorrect Thumbnail Issue in WordPress

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.

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.

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.

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:

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.

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

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.

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.

June 3, 2020September 9, 2024

How to Create a File Upload Form in WordPress

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.

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.

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.

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.

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.

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.

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.

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.

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.

May 25, 2020September 9, 2024

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

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.

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:

Changing the text color using the visual editor (great for changing a few words, a paragraph, or a heading when writing content).
Changing the text color in the theme customizer (the best way to change font colors across your whole site, but not supported by all themes).
Changing the text color using CSS code (suitable for changing the font color across your whole site with any themes).

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.

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.

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.

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

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.

Next, simply click on 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.

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.

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:

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

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.

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.

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.

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.

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.

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’.

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; }

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:

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.

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.

May 21, 2020January 14, 2021

20 Most Customizable WordPress Themes of 2021

Looking for the most customizable WordPress theme? Finding the best WordPress theme that functions and looks exactly how you want can be a daunting task – if not impossible. With hundreds of free and premium...

The post 20 Most Customizable WordPress Themes of 2021 appeared first on 85ideas.com.

May 19, 2020

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

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.

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

How to Add a Link in WordPress Posts and Pages
How to Add a Link in WordPress Text Widgets
How to Add a Link in WordPress Navigation Menus
How to Add Title and NoFollow to Links
How to Create a Button Link in WordPress
How to Embed Linked Content in WordPress
How to Add Affiliate Links in WordPress
How to Manually Add a Link in HTML
How to Add Anchor Links in WordPress
How to Add Social Share Links in WordPress

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:

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:

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.

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.

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.

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.

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.

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:

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.

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:

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

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:

You’ll then see the additional options:

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.

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.

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.

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:

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.

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:

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:

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

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.

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.

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:

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

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.

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:

You can click the ‘Preview’ tab to see how your code will look in your 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.

How to Easily Add Anchor Links in WordPress

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:

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.

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.

May 18, 2020

How to Import and Export Navigation Menus in WordPress

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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:

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.

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.

May 12, 2020September 9, 2024

How to Easily Change the Font Size in WordPress

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.

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.

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.

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.

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.

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.

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:

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:

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

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.

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.

May 6, 2020August 31, 2024

How to Add Custom Navigation Menus in WordPress Themes

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
Method 2. Creating a Custom Navigation Menu in WordPress Using SeedProd (Works With All Themes)
Method 3. Creating a Custom Navigation Menu in WordPress Using Code (Advanced)

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.

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.

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

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

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.

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 See d Prod 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.

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.

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.

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.

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.

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.

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.

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.’

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

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.’

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.

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.

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.

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.

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.

April 30, 2020September 8, 2024

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

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.

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.

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.

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.

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.

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.

April 29, 2020

WPMU DEV – The Swiss Army Knife of WordPress

As the most popular and well-used content management systems/web platform, WordPress offers a wealth of customization options so you can build the site you want and need. Out of the box, WordPress packs some pretty simple functionality, in terms of being able to create a basic website without a great deal of time investment. However, […]

The post WPMU DEV – The Swiss Army Knife of WordPress appeared first on WPArena.

April 24, 2020

7 Handy Tips to Increase MacBook Pro Storage Space and Capability

With Apple managing to sell over 5 million Macs per quarter these days, MacBooks have become some of the most popular laptops. Popular for their sleek interface and user-friendly experience, it’s easy to see why some consumers gravitate towards Apple laptops. But like any laptop, they have issues users can run into — and one of […]

The post 7 Handy Tips to Increase MacBook Pro Storage Space and Capability appeared first on WPArena.

April 15, 2020

Advantages of VPS Web Hosting

Wondering why VPS web hosting is becoming increasingly popular? Read on to find the advantages of VPS Web Hosting and Why it’s the best Today!! Image source: https://www.pexels.com/photo/adult-books-business-coffee-374016/ Why Choose VPS Web Hosting Wondering why...

April 14, 2020

How to Add Navigation Menu in WordPress (Beginner’s Guide)

Do you want to add a navigation menu to your WordPress site?

WordPress comes with a drag and drop menu interface that you can use to create header menus, menus with dropdown options, and more.

In this step by step guide, we will show you how to easily add a navigation menu in WordPress.

What is a Navigation Menu?

A navigation menu is a list of a links pointing to important areas of a website. They are usually presented as a horizontal bar of links at the top of every page on a website.

Navigation menus give your site structure and help visitors find what they’re looking for. Here’s how the navigation menu looks on WPBeginner:

WordPress makes it really easy to add menus and sub-menus. You can add links to your most important pages, categories or topics, blog posts, and even custom links such as your social media profile.

The exact location of your menu will depend on your WordPress theme. Most themes will have several options, so you can create different menus that can be displayed in different places.

For instance, most WordPress themes come with a primary menu that appears on the top. Some themes may include a secondary menu, a footer menu, or a mobile navigation menu as well.

Creating Your First Custom Navigation Menu

To create a navigation menu, you need to visit the Appearance » Menus page in your WordPress admin dashboard.

First, you need to provide a name for your menu, like ‘Top Navigation Menu’ and then click the ‘Create Menu’ button. This will expand the menu area, and it will look like this:

Next, you can choose the pages you want to add to the menu. You can either automatically add all new top-level pages, or you can select specific pages from the left column.

First, click the ‘View All’ tab to see all your site’s pages. After that click the box next to each of the pages you want to add to your menu, and then click on the ‘Add to Menu’ button.

Once your pages have been added, you can move them around by dragging and dropping them.

Note: All menus have their items listed in a vertical (top to bottom) list in the menu editor. When you put the menu live on your site, it’ll either display vertically or horizontally (left to right), depending on the location you select.

Most themes have several different locations where you can put menus. In this example, we’re using the default 2020 theme, which has 5 different locations.

After adding pages to the menu, select the location where you want to display the menu and click on the ‘Save Menu’ button.

Tip: If you’re not sure where each location is, try saving the menu in different places, then visiting your site to see how it looks. You probably won’t want to use all the locations, but you might want to use more than one.

Here’s our finished menu on the site:

Creating Drop-Down Menus in WordPress

Drop-down menus, sometimes called nested menus, are navigation menus with parent and child menu items. When you run your cursor over a parent item, all the child items will appear beneath it in a sub-menu.

To create a sub menu, drag an item below the parent item, and then drag it slightly to the right. We’ve done that with 3 sub-items beneath ‘Services’ in our menu:

Here’s the sub-menu live on the site:

You can even add multiple layers of dropdown, so that your sub menu can have a sub menu. This can end up looking at bit cluttered, and many themes do not support multi-layer drop-down menus.

In this example, you can see that ‘Logo Design’ (a child item of ‘Services’) has two child items of its own.

Adding Categories to WordPress Menus

If you’re using WordPress to run a blog, then you may want to add your blog categories as a drop-down in your WordPress menu. We do this on WPBeginner:

You can easily add categories to your menu by clicking the Categories tab on the left side of the Menus screen. You may also need to click the ‘View All’ tab to see all your categories.

Simply select the categories you want to add to the menu, and then click the ‘Add to Menu’ button.

The categories will appear as regular menu items at the bottom of your menu. You can drag and drop them into position. We’re going to put all of these categories under the Blog menu item.

Do you want to have a blog page on your site that’s separate from your homepage? If so, check out our tutorial on how to create a separate page for blog posts in WordPress.

Adding Custom Links to Your WordPress Navigation Menus

Aside from categories and pages, WordPress also makes it super easy to add custom links to your menu. You can use it to link to your social media profiles, your online store, and / or other websites that you own.

You will need to use the ‘Custom Links’ tab on the Menu screen. Simply add the link along with the text you want to use in your menu.

You can even get creative and add social media icons in your menu.

Editing or Removing a Menu Item in WordPress Navigation Menus

When you add pages or categories to your custom navigation menu, WordPress uses the page title or category name as the link text. You can change this if you want.

Any menu item can be edited by clicking on the downward arrow next to it.

You can change the name of the menu item here. This is also where you can click ‘Remove’ to take the link off your menu altogether.

If you’re struggling with the drag and drop interface, then you can also move the menu item around by clicking the appropriate ‘Move’ link.

Adding WordPress Menus in Sidebars and Footers

You don’t have to just stick to the display locations for your theme. You can add navigation menus in any area that uses widgets, like your sidebar or footer.

Simply go to Appearance » Widgets and add the ‘Navigation Menu’ widget to your sidebar. Next, add a title for the widget and choose the correct menu from the ‘Select Menu’ drop down list.

Here’s an example of a custom WordPress footer menu built on Syed Balkhi website.

Going Further with Navigation Menus

If you want to create a truly epic menu with loads of links, we’ve got a tutorial on how to create a mega menu in WordPress. This lets you create a drop-down with lots of items including images.

Mega menus are a great option if you have a large site, like an online store or news site. This type of menu is used by sites like Reuters, Buzzfeed, Starbucks, etc.

We hope this article helped you learn how to add a navigation menu in WordPress. You may also want to check out our guides on how to style navigation menus in WordPress and how to create a sticky floating navigation 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 Add Navigation Menu in WordPress (Beginner’s Guide) appeared first on WPBeginner.

April 9, 2020

How to Fix Common Image Issues in WordPress

WordPress comes with some pretty neat tools to manage and edit images. You can easily upload images, align them, and even edit them inside WordPress.

Most beginners are not aware of these WordPress image editing features. It takes users a while to discover out some of them while other features go completely unnoticed.

If you ever had a question about WordPress images, then you’re in luck. In this article, we will cover the most common image issues in WordPress and how to fix them.

Since this is a detailed article, here is the list of image related issues that we will cover this article.

How to Upload Images in WordPress?
How to Align Image to the Left or Right in WordPress?
How to Add Caption below Images?
How to Display Photos in Columns and Rows?
Create Beautiful Responsive Image Galleries in WordPress
How to Fix Missing Post Thumbnails / Featured Image?
How to Add Cover Images in WordPress Posts and Pages
How to Fix Featured Image Appearing Twice Issue?
Image too Big? How to Crop Images in WordPress?
How to Add a Header Image in WordPress?
How to Add a Background Image in WordPress?
How to Find Free Images for Your WordPress Blog Posts?
How to Tag Images in WordPress?
How to Import External Images in WordPress?
How to Require Featured Image for Posts in WordPress?
How to Set a Default Featured Image in WordPress?
How to Remove the Default Image Link in WordPress?

Let’s start with the most obvious one.

1. How to Upload images in WordPress?

WordPress makes it super easy to upload images to your posts, pages, and non-content areas like sidebars.

To upload images in WordPress posts and pages, you simply need to add the image block to the content editor.

You can also add the image block by simply typing /image in a paragraph block. The editor will start showing blocks you can insert as soon as you start typing.

WordPress will now add the image block to the editor. You need to click on the ‘Upload’ button to select and upload the image from your computer.

You can also select a previously uploaded image from your media library.

After uploading the image, you’ll see a live preview of the image in the content editor.

You’ll see a bunch of image settings on the right panel. From there you can provide image alt text, select image size, and image style.

2. How to Align Image to the Left or Right in WordPress?

WordPress makes it easier to align images to the left, right, or center. Simply select the image by clicking on it, and then click on alignment button from the block toolbar.

You may have noticed how some popular blogs use images with text wrapped around them. This is done by using the align feature.

Alternatively, you can also use the ‘Media & Text’ block instead of the image block. This block is made specifically for adding images next to the text.

You can then upload an image and text side by side. You can also use the block toolbar to change the image or text side.

3. How to Add Caption below Images?

WordPress allows you to easily add caption for images. After you upload an image, you’ll see the option to add caption right below the image preview.

Similarly, you can also add captions to image galleries in WordPress. For more details, see our guide on how to add captions to images in WordPress.

4. How to Display Photos in Columns and Rows?

Often users ask us how to neatly display photos in columns and rows.

Let’s say you want to share photos of a birthday party or vacation photos. You can add them one by one into a post, but this will look like a lengthy list of images.

The better way to group your photos is by creating image galleries.

WordPress comes with a built-in gallery block that allows you to easily add images in rows and columns with thumbnail previews.

Simply add the gallery block to the post editor and select the images you want to upload.

For more detailed instructions see our guide on how to create an image gallery in WordPress.

5. Create Beautiful Responsive Image Galleries in WordPress

You will notice that the default WordPress image galleries lack several features. For instance, they are also not very easy to browse.

If you often upload images and photographs to your WordPress site, then you will need a proper WordPress photo gallery plugin.

We recommend using Envira Gallery. It allows you to easily create beautiful and fully mobile-friendly image galleries on your WordPress site.

The best part is that it adds additional functionality like albums, gallery templates, social sharing, slideshows, watermarking, pagination, password protection, tagging, fullscreen view, and much more.

6. How to Fix Missing Post Thumbnails / Featured Image?

Most WordPress themes allow you to prominently display a featured image with your articles. Here is how to set a featured image in WordPress to avoid missing thumbnails.

Now, you can click on ‘Set Featured Image’ to upload your post thumbnail. After uploading the image, you’ll be able to see your post thumbnail in the featured image meta box like this:

For more details, see our guide on how to add featured image or post thumbnail in WordPress.

7. How to Add Cover Images in WordPress Posts and Pages

Cover images are the wide or full-width images that can be used as a separator between different sections of an article or a lengthy sales page.

They are highly engaging and help users easily scan a page without feeling overwhelmed by too much text.

To add a cover image, you simply need to add the ‘Cover’ block to the content editor.

Next, you need to upload the image you want to use from your computer or select one from the media library. If you don’t want to use an image, then you can also select a color background as the cover.

Tip: It is best to use a large image for a better result.

You’ll now see a liver preview of your cover image in the editor. You can change the cover image display options from the block toolbar or using the settings on the right.

To learn more see our guide on the difference between cover image vs featured image in WordPress and how to use them effectively.

8. How to Fix Featured Image Appearing Twice Issue?

Inserting the featured image inside content is a common mistake made by beginners.

Once you set a featured image, you don’t need to insert it into the post editor along with your post content.

Doing so, will make your featured image appear twice. Once as the featured image, and once as an image inside the post.

You can add other images in your post, but your featured image goes in the featured image box.

For more details, see our guide on how to fix featured image appearing twice in WordPress posts.

9. Image too Big? How to Crop Images in WordPress?

When you are uploading images from your phone or camera they are usually too big.

WordPress automatically creates small, medium, and large image sizes for your original upload. But sometimes you may need to crop the image in a different size.

WordPress is no Photoshop, but it comes with some basic image editing features like scale, crop, flip and rotate images.

Go to Media » Add New and upload your image. After uploading the image, you will see an Edit link next to the uploaded image.

Clicking on it will open the Edit Media screen where you will see an Edit Image button right below the image. This will open the WordPress image editor.

From here you can click on the ‘Edit Image’ button below the image preview. This will open the image editing screen.

On the image editor screen, you will see buttons to perform some basic image editing tasks such as cropping, rotating, resizing, etc.

For more detailed instructions see our guide on how to crop, rotate, scale, and flip images in WordPress.

10. How to Add a Header Image in WordPress?

A header image in WordPress is a theme feature. Many WordPress free and premium themes comes with support for header image.

You can upload your own custom header image from the Appearance » Customize page.

Since it is a theme feature, many WordPress themes come with their own header options. Some allow you to set a site-wide header image, while others allow you to only set a header image for the homepage.

11. How to Add a Background Image in WordPress?

Just like the custom header image, custom background image is also a WordPress theme feature. Many WordPress themes come with support for custom background images.

Visit Appearance » Customize to launch the theme customizer. If you can see the Background Image option, then your theme has support for custom backgrounds.

It is a theme feature which is why it varies from one theme to another. Depending on your theme you’ll see different options for styling your background image.

If your theme does not support background image, then you can still use a plugin to add full-screen background images to your website.

12. How to Find Free Images for Your WordPress Blog Posts?

Images can make your articles stand out. However, you must respect copyrights of other people and try to find images that you are legally allowed to use.

We are often asked by our readers about how to find best royalty free images to use in their posts?

There are many websites where you can find free images to use. However, you will soon notice that images on those sites look overused and generic.

See our list of the best sources for free public domain and CC0-licensed images on the internet.

13. How to Tag Images in WordPress?

If you run a photography blog, then you will notice that WordPress does not allow you to sort photos and images.

Wouldn’t it be great if you could add tags to your images, so that you and your users can easily browse them?

Luckily, there are some great plugins that allow you to do just that.

For a photography related blog, the best option is to use Envira Gallery which comes with an add-on to add tags.

Envira Gallery allows you to create beautiful, mobile-ready, photo galleries in WordPress. Using tags, your users can easily filter and sort photos without even reloading a page.

For more details, see our article on how to add categories and tags to WordPress media library.

14. How to Import External Images in WordPress?

This question often comes up when you are migrating your site to WordPress. Some images on your website may still be pointing to older location.

Specially users importing blogs from Blogger, Squarespace, or WordPress.com may face this problem.

While the images on your site may appear correctly, they are still loading from external source. To solve this issue, all you need to do is install and activate Auto Upload Images plugin.

The plugin will check for external images once you update or save any post or page. You can manually do that for each post or page or you can bulk edit all posts and simply click the update button.

For detailed instructions, see our guide on how to import external images in WordPress.

15. How to Require Featured Image for Posts in WordPress?

When running a multi-author site in WordPress, some of your authors may not be familiar with the featured image functionality.

In this case, you may want to remind yourself or your users to upload a featured image whenever they are submitting a post in WordPress.

You can do this by installing and activating the Require Featured Image plugin.

Once activated, the plugin will display a notification box in the post edit area, informing users that this post requires a featured image.

You and your users will be able to save posts as drafts, but you cannot publish the post until you add a featured image.

See our article on how to require featured images for posts in WordPress for more instructions.

16. How to Set a Default Featured Image in WordPress?

Finding the perfect featured image for every post or article is a tough task. Sometimes you may not want to add a featured image to a post, but your theme may look awkward without a featured image.

This is where a default featured image can come in handy. A default featured image is used when an article does not have a featured image of its own.

You can set a default featured image by using the default featured image plugin.

We hope this article helped you fix some of the most common image issues in WordPress. You may also want to see our list of the most common WordPress errors and how to fix them.

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 Common Image Issues in WordPress appeared first on WPBeginner.

April 1, 2020September 9, 2024

How to Disable Fullscreen Editor in WordPress

Do you want to disable the fullscreen editor in WordPress?

After the update, WordPress 5.4 now opens the post and page editor in fullscreen mode by default. While this distraction-free mode offers a clean and easy to use experience, some users may want to go back to the regular compact view.

In this article, we’ll show you how to easily disable the fullscreen editor in WordPress.

Why WordPress Switched to Fullscreen Mode for The Editor?

WordPress introduced a new editor called The Block Editor (aka Gutenberg) in WordPress 5.0. This new editor allow users to use blocks for common elements and create beautiful content layouts.

It also mimics how your article or pages will look by using the same fonts and colors as your WordPress theme.

However, an admin menu on the left and one on top made it look a bit cluttered. There were just too many options on the screen, which you don’t need if you are focusing on writing content.

To deal with this, the WordPress core team decided to make the editor fullscreen by default, so users can have a distraction-free writing experience.

Now, it’s important to note that this fullscreen mode is nothing new. It was already there, and users were able to turn it on / off.

What’s changed now is that the fullscreen mode will now be the default view when writing posts in WordPress.

How to Disable The Fullscreen Mode for WordPress Editor (Easy Way)

It is super easy to turn off the fullscreen mode for block editor in WordPress.

Simply edit a post or page and click on the three-dot menu on the top-right corner of the screen. This will display the settings menu for the post editor.

From here, you simply need to click on the ‘Fullscreen Mode’ to turn it off.

Post editor will instantly exit the fullscreen mode, and it will start showing the admin sidebar and the top toolbar.

WordPress will store your fullscreen mode preference in your browser’s temporary storage.

However if you switched to a different browser, used incognito mode, or accessed the admin area from a different device, then you’ll again see the fullscreen editor.

If you use multiple devices, user accounts, or browsers to access your WordPress admin area, then this may be a little annoying to switch it back every time.

This next method helps you fix that, permanently.

Permanently Disable Fullscreen Mode in WordPress (Snippet)

This method requires you to manually add code to your WordPress site. If you have not done this before, then see our guide on how to easily add code snippets in WordPress.

You’ll need to simply enter the following code in your WordPress theme’s functions.php file, or in a site-specific plugin. You can also use the custom code snippets plugin to add this code to your site without conflicts.

if (is_admin()) { 
	function jba_disable_editor_fullscreen_by_default() {
	$script = "jQuery( window ).load(function() { const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' ); if ( isFullscreenMode ) { wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' ); } });";
	wp_add_inline_script( 'wp-blocks', $script );
}
add_action( 'enqueue_block_editor_assets', 'jba_disable_editor_fullscreen_by_default' );
}

This code first checks if a user is viewing an admin area page. If they are, then it checks the status of the fullscreen editor.

If the fullscreen editor is enabled, then it simply turns it off.

You can still manually turn-on the fullscreen mode from the post edit screen, and your post editor would work just fine.

However, if you return back, then it will automatically turn it off. This behavior applies to all users who can access the post editor on your website.

We hope this article helped you learn how to disable the fullscreen mode in WordPress post editor. For more productivity tips, see our tips for mastering the WordPress content editor.

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.

Code credit: Jean-Baptiste Audras

The post How to Disable Fullscreen Editor in WordPress appeared first on WPBeginner.

Using the Block Editor to Put Images Side by Side

Using a Plugin to Put Images Side by Side in WordPress

Adding a Horizontal Line in the WordPress Block Editor

Adding a Horizontal Line in the WordPress Classic Editor

Manually adding a Horizontal Line divider using HTML

Other Separators You Can Use in Your Posts and Pages

Adding a Page Break in WordPress Forms Using WPForms

Why Facebook is Not Picking up The Thumbnail Image

Choose Your Facebook Thumbnail with All in One SEO

Choose Your Facebook Thumbnail with Yoast SEO Plugin

Using Facebook Debug Tool to Clear the Cache

Why Create a File Upload Form in WordPress?

How to Create a File Upload Form in WordPress

Setting Up Your File Upload Form’s Notifications

Adding the File Upload Form to Your Website

Viewing or Downloading the Uploaded Files

Method 1. Changing the Text Color Using the Visual Editor

Method 2. Changing the Text Color in the Theme Customizer

Method 3. Changing the Text Color Using CSS Code

Why Are Links Important?

How to Add Links in WordPress Posts and Pages

How to Add Links in WordPress Text Widgets

How to Add Links in WordPress Navigation Menus

How to Add Title and Nofollow in WordPress Links

How to Add Link Buttons in WordPress

How to Embed Linked Content in WordPress

How to Add Affiliate Links in WordPress

How to Manually Add a Link in HTML

How to Easily Add Anchor Links in WordPress

How to Easily Add Social Share Links in WordPress

Understanding WordPress’s Import / Export Features

Export and Import Navigation Menus in WordPress

Importing Your WordPress Menu to Your New Site

Viewing Your Imported Menu and Pages

Method 1: Using Paragraph Headings

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

Method 3: Change Font Size Using The TinyMCE Advanced Plugin

Method 4: Change Site-Wide Font Size Using CSS

Why Add Custom Navigation Menus in WordPress Themes?

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

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

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

Do More With WordPress Navigation Menus

Why Clone or Duplicate a Page / Post in WordPress?

Video Tutorial

Duplicate a WordPress Post or Page

Customizing Duplicate Post Plugin Settings

What is a Navigation Menu?

Creating Your First Custom Navigation Menu

Creating Drop-Down Menus in WordPress

Adding Categories to WordPress Menus

Adding Custom Links to Your WordPress Navigation Menus

Editing or Removing a Menu Item in WordPress Navigation Menus

Adding WordPress Menus in Sidebars and Footers

Going Further with Navigation Menus

1. How to Upload images in WordPress?

2. How to Align Image to the Left or Right in WordPress?

3. How to Add Caption below Images?

4. How to Display Photos in Columns and Rows?

5. Create Beautiful Responsive Image Galleries in WordPress

6. How to Fix Missing Post Thumbnails / Featured Image?

7. How to Add Cover Images in WordPress Posts and Pages

8. How to Fix Featured Image Appearing Twice Issue?

9. Image too Big? How to Crop Images in WordPress?

10. How to Add a Header Image in WordPress?

11. How to Add a Background Image in WordPress?

12. How to Find Free Images for Your WordPress Blog Posts?

13. How to Tag Images in WordPress?

14. How to Import External Images in WordPress?

15. How to Require Featured Image for Posts in WordPress?

16. How to Set a Default Featured Image in WordPress?

Why WordPress Switched to Fullscreen Mode for The Editor?

How to Disable The Fullscreen Mode for WordPress Editor (Easy Way)

Permanently Disable Fullscreen Mode in WordPress (Snippet)