Tuesday, 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.

How to easily add a link in WordPress

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

Why Are Links Important?

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

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

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

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

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

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

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

How to Add Links in WordPress Posts and Pages

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

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

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

You’ll see a box where you can enter a URL. A URL is a web address. For instance, WPBeginner’s guide on how to start a WordPress blog has the URL https://ift.tt/2X91Wdb.

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

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

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

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

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

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

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

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

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

Adding Link in Old WordPress Editor

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

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

Creating a link using the WordPress classic editor

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

Pasting your URL directly onto the anchor text

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

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

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

Paste your link directly into your content

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

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

How to Add Links in WordPress Text Widgets

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

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

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

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

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

Adding a link in a widget

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

How to Add Links in WordPress Navigation Menus

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

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

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

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

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

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

Adding a custom link to your navigation menu

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

How to Add Title and Nofollow in WordPress Links

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

A link with a title

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

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

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

WordPress also does not support nofollow by default either.

Method 1. Use AIOSEO plugin in Gutenberg

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

All in One SEO Title and Nofollow

Method 2. Use HTML code in Gutenberg

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

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

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

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

Viewing the HTML code for a block in the WordPress editor

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

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

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

Method 3. Use a Plugin with the Classic Editor

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

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

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

Locating the cog icon for a link in the classic editor

You’ll then see the additional options:

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

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

How to Add Link Buttons in WordPress

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

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

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

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

Adding the text and link for your button

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

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

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

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

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

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

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

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

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

Creating a button for your link and customizing the design

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

How to Embed Linked Content in WordPress

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

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

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

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

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

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

Embedding a YouTube video into your post

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

How to Add Affiliate Links in WordPress

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

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

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

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

Both of these plugins work by creating redirect links such as https://ift.tt/2z1PdRF that send people to your special affiliate link.

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

Adding a link in ThirstyAffiliates

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

Setting the options for your affiliate link with ThirstyAffiliates

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

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

Adding an affiliate link to your post

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

Finding your affiliate link by searching for it

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

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

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

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

How to Manually Add a Link in HTML

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

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

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

Adding a custom HTML block to your post or page

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

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

It should look like this:

The HTML code to create a link

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

Previewing how the HTML will display in the post or page

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

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

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

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

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

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

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

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

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

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

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

Take a look at the animated screenshot below:

Anchor link preview

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

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

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

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

Facebook social share button

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

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

We hope this article helped you learn how to add a link in WordPress. You may also want to see our beginner’s guide on how to create a professional business email address, and how to start an email newsletter to grow your audience.

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

The post Beginner’s Guide on How to Add a Link in WordPress appeared first on WPBeginner.


May 19, 2020 at 04:00PM

Monday, 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.

How to import and export navigation menus in WordPress

Understanding WordPress’s Import / Export Features

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

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

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

The built-in Export options in WordPress

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

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

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

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

Export and Import Navigation Menus in WordPress

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

Editing your navigation menu in the WordPress dashboard

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

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

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

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

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

The Export Navigation Menu Items option in the Export tool

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

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

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

Importing Your WordPress Menu to Your New Site

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

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

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

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

Installing the WordPress import tool

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

Click the link to run the WordPress import tool

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

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

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

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

Choose which user to assign pages to when you import them

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

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

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

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

Upon completion, you should see the following message:

The success message after importing the navigation menu

Viewing Your Imported Menu and Pages

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

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

Viewing the list of pages on your website

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

We hope this article helped you learn how to import and export navigation menus in WordPress. You might also like to take a look at our tutorials on how to style WordPress navigation menus and how to create a dropdown menu in WordPress.

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

The post How to Import and Export Navigation Menus in WordPress appeared first on WPBeginner.


May 18, 2020 at 05:00PM

Saturday, May 16, 2020

How to Create a Contact Form in WordPress (Step by Step)

Are you looking to add a contact form on your WordPress site?

Every website needs a contact form, so visitors can easily contact you about your products and services. By default, WordPress does not come with a built-in contact form, but there is an easy way to add contact forms to your site.

In this WordPress tutorial, we’ll show you how to easily create a contact form in WordPress (step by step) without touching a single line of code.

Easily add a contact form in WordPress

Why Do You Need a Contact form?

You might be wondering why do I need a contact form? Can’t I just add my email address on my website, so people can email me?

That’s a very common question from beginners because they are afraid that adding a contact form requires code knowledge.

The truth is you don’t need to know any code. This step by step guide to adding a contact form is written for absolute beginners.

Below are the top 3 reasons why a contact form is better than pasting your email address on a page.

  • Spam Protection – Spam bots regularly scrape websites for the mailto: email address tag. When you post your email address on the website, you will start to receive a lot of spam emails. On the other hand, when you use a contact form, you can get rid of almost all spam emails.
  • Consistent Information – When emailing, people don’t always send you all the information that you need. With a contact form, you can tell the user exactly what information you’re looking for (such as their phone number, budget, etc).
  • Saves Time – Contact forms help you save time in more ways than you can imagine. Aside from consistent information that we mentioned above, you can also use form confirmations to tell the user what are the next steps. Such as watch a video or wait up to 24 hours to get a response, so they don’t send you multiple inquires.

Below is an example of a WordPress contact form that we will create in this tutorial.

Contact page preview

After creating the form above, we will also show you how you can easily add it on your contact page, or in your site’s sidebar using a WordPress contact form widget.

Sounds good? Ok so let’s get started.

Video Tutorial

If you prefer written instructions, then please continue reading.

Step 1. Choosing the Best Contact Form Plugin

The first thing you need to do is choose a WordPress contact form plugin.

While there are several free and paid WordPress contact form plugins you can choose from, we use WPForms on our site and believe it’s the best option in the market.

Below are the three reasons why we think WPForms is the best:

  1. It is the most beginner friendly contact form plugin available. You can use the drag & drop builder to easily create a contact form in just a few clicks.
  2. WPForms Lite is 100% free, and you can use it to create a simple contact form (over 3 million sites use it).
  3. When you are ready for more powerful features, then you can upgrade to WPForms Pro.

Now that we have decided on the contact form plugin, let’s go ahead and install it on your site.

Step 2. Install a Contact Form Plugin in WordPress

For this contact form tutorial, we will use WPForms Lite because it’s free and easy to use.

You can install this plugin on your site by logging into your WordPress dashboard and going to Plugins » Add New.

In the search field, type WPForms and then click on the Install Now button.

Install WPForms

After the plugin is installed, make sure you activate the plugin.

Activate WPForms

If you don’t see the plugins menu or want more detailed instructions, then please refer to our step by step guide on how to install a WordPress plugin.

Step 3. Create a Contact Form in WordPress

Now that you have activated WPForms, you are ready to create a contact form in WordPress.

In your WordPress dashboard, click on the WPForms menu and go to Add New.

Add new form

This will open the WPForms drag and drop form builder. Start by giving your contact form a name and then select your contact form template.

WPForms Lite only comes pre-built form templates such as Blank, Simple Contact Form, etc. You can use these to create just about any type of contact form you like.

For the sake of this example, we will go ahead and select Simple Contact Form. It will add the Name, Email, and Message fields.

Creating a new form in WordPress with WPForms

You can click on the fields to edit them. You can also use your mouse to drag and drop the field order.

If you want to add a new field, simply select from the available fields on the left sidebar.

Adding new field to your contact form

When you’re done click on the Save button.

Step 4. Configuring Form Notification and Confirmations

Now that you have created your WordPress form, it’s important that you properly configure the form notification and form confirmation.

Form confirmation is what your website visitor sees after they submit the form. It could be a thank you message, or you can redirect them to a special page.

Form notification is the email you get after someone submits the contact form on your WordPress site.

You can customize both of those by going to the Settings tab inside the WPForms form builder.

We usually leave the form confirmation as default Thank You message. However, you can change it to redirect to a specific page if you like.

Setting up form confirmation

The best part about WPForms is that the default settings are ideal for beginners. When you go to the notification settings, all fields will be pre-filled dynamically.

Setting up form notifications

The notifications by default are sent to the Admin Email that you have set up on your site.

If you want to send it to a custom email address, then you can change that. If you want to send the notification to multiple emails, then just separate each email address by a comma.

The email subject is pre-filled with your form name. The from name field is automatically populated with your user’s name. When you reply to the inquiry, it will go to the email that your user filled in the contact form.

We have a detailed guide on how to setup custom form notifications, so you can send forms to multiple recipients or different departments.

Step 5. Adding WordPress Contact Form in a Page

Now that you are done configuring your WordPress contact form, it’s time to add it to a page.

The first thing you need to do is either create a new page in WordPress or edit an existing page where you want to add the contact form.

We will be using the WPForms block to add the form in a page. Simply click on the add new block button to look for WPForm and then click to add it to your page.

Add WPForms contact form block to your page

WPForm block will now appear in the content area of your page. You need to click on the drop down menu to select the form you created earlier.

Select your contact form in WPForms block

WPForms will load your contact form preview inside the editor. You can now save or publish your page and visit your website to see it in action.

Here’s what the form would look like on a sample WordPress page:

Contact page preview

If you only wanted to add the contact form on page, then you’re done here. Congratulations.

WPForms also comes with a WordPress contact form shortcode. You can copy the contact form shortcode by visiting WPForms » All Forms page and then paste it in any WordPress post or page.

WordPress contact form shortcode to use in post and pages

If you want to add a contact form on a sidebar or another widget ready area, then go to step 6.

Step 6. Adding WordPress Contact Form in a Sidebar

WPForms come with a WordPress contact form widget that you can use to add your contact form in a sidebar or basically any other widget-ready area in your theme.

In your WordPress admin area, go to Appearance » Widgets. You will see a WPForms widget that you can easily drag into any widget-ready areas of your theme.

Add form using a sidebar widget

Next, add the title for your widget and select the form you want to display. Save the settings, and visit your website for the preview.

Sidebar contact form

We hope this article helped you create a simple contact form in WordPress. You may also want to check out our comparison of the best WordPress backup plugins and our guide on how to fix WordPress not sending email issue.

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 Contact Form in WordPress (Step by Step) appeared first on WPBeginner.


May 16, 2020 at 12:00PM