Tag - Add

How to “Easily” Add Anchor Links in WordPress (Step by Step)


We occasionally use anchor links in our longer WordPress posts to help users quickly jump to the section they want to read.

Anchor links are often used in the table of content sections because they help users move up and down a lengthier article without reloading the page. It can also help with SEO as Google may show them below your search listings for easy navigation (more on this later).

In this step by step guide, we will explain what are anchor links and show you how to easily add anchor links in WordPress.

Adding anchor links in WordPress

Ready? Let’s start with a live example of anchor links.

Below is a list of all the topics we will cover in this guide. Go ahead and click on any of these links, and you’ll be taken to that specific section.

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

As you can see, clicking on the anchor link takes the user to the specific section on the same page.

Anchor links are commonly used in lengthier articles as the table of content which allows users to quickly jump to the sections they want to read.

Why and when you should use anchor links?

An average user spends less than a few seconds before deciding if they want to stay or leave your website. You have just those few seconds to convince users to stay.

The best way to do that is to help them quickly see the information they’re looking for.

Anchor links make this easier by allowing users to skip the rest of the content and jump directly to the part that interests them. This improves user experience and helps you win new customers / readers.

Anchor links are also great for WordPress SEO. Google can display an anchor link in the search results as a “jump to link”.

Jump to link in search results

Sometimes Google can also display several links from that page as jump to links, and this is proven to increase the click-through rate in search results. In other words, you get more traffic to your website.

Multiple jump to links below a search result

Having said that, let’s take a look at how to easily add anchor links in WordPress.

If you just want to add a few anchor links in your article, then you can easily do so manually.

Basically you need to add two things for an anchor text to work as intended.

  1. Create an anchor link with a # sign before the anchor text.
  2. Add the id attribute to the text where you want the user to be taken.

Let’s start with the anchor link part.

Step 1. Creating an anchor link

First you need to select the text that you want to link and then click on the insert link button in the WordPress Gutenberg editor.

Add a link in WordPress

This will bring up the insert link popup where you usually add the URL or look for a post or page to link.

However, for an anchor link, you’ll simply use # as prefix and enter the keywords for the section you want the user to jump to.

Creating anchor link

After that click on the enter button to create the link.

Some helpful tips on choosing what text to use as your anchor # link:

  • Use the keywords related to the section you are linking to.
  • Don’t make your anchor link unnecessarily long or complex.
  • Use hyphens to separate words and make them more readable.
  • You can use capitalization in anchor text to make it more readable. For example: #Best-Coffee-Shops-Manhattan.

Once you add the link, you will be able to see the link you have created in the editor. However, clicking on the link doesn’t do anything.

That’s because the browsers cannot find the anchor link as an ID.

Let’s fix that by pointing browsers to the area, section, or text that you want to show when users click on the anchor link.

Step 2. Add the ID attribute to the linked section

In the content editor, scroll down to the section that you want the user to navigate to when they click on the anchor link. Usually, it is a heading for a new section.

Next, click to select the block and then in the block settings click on the Advanced tab to expand it. You can simply click on the ‘Advanced’ tab under the heading block settings.

HTML Anchor

After that, you need to add the same text that you added as the anchor link under the ‘HTML Anchor’ field. Make sure that you add the text without the # prefix.

You can now save your post and see your anchor link in action by clicking on the preview tab.

What if the section you want to show is not a heading but just a regular paragraph or any other block?

In that case, you need to click on the three-dot menu on the block settings and select ‘Edit as HTML’.

Edit as HTML

This will allow you to edit the HTML code for that particular block. You need to select find the HTML tag for the element you want to point to. For example, <p> if it is a pagraph, or <table> if it is a table block, and so on.

Now, you need to add your anchor as the ID attribute to that tag, like the following code:


<p id="best-coffee-shops-manhattan">

You will now see a notice that this block contains unexpected or invalid content. You need to click on the convert to HTML to preserve the changes you made.

Convert to HTML

How to Manually Add Anchor Link in Classic Editor

If you are still using the older classic editor for WordPress, then here is how you can add the anchor link.

Step 1. Create the anchor link

First, select the text that you want to change into the anchor link and then click on the ‘Insert Link’ button.

Adding an anchor link in Classic Editor

After that, you need to add your anchor link with a # sign prefix followed by the slug you want to use for the link.

Step 2. Add the ID attribute to the linked section

The next step is to point the browsers to the section you want to show when users click on your anchor link.

For that, you’ll need to switch to the ‘Text’ mode in the classic editor. After that scroll down to the section that you want to show.

Adding anchor ID in Classic Editor

Now locate the HTML tag you want to target. For example, <h2>, <h3>, <p>, and so on.

You need to add the ID attribute to it with your anchor link’s slug without the # prefix, like this:


<h2 id="best-coffee-shops-manhattan">

You can now save your changes and click on the preview button to see your anchor link in action.

How to Manually Add Anchor Links in HTML

If you are used to writing in the Text mode of the old Classic Editor in WordPress, then here is how you would manually create an anchor link in HTML.

First, you need to create the anchor link with a # prefix using the usual <a href=""> tag, like this:


<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>

Next, you need to scroll down to the section that you want to show when users click on the link.

Usually, this section is a heading (h2, h3, h4, etc.), but it could be any other HTML element or even a simple paragraph <p> tag.

You need to add the ID attribute to the HTML tag, and then add the anchor link slug without the # prefix.


<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h4>

You can now save your changes and preview your website to test the anchor link.

This method is suitable for users who regularly publish long-form articles and need to create table of contents with anchor links.

The first thing you need to do is install and activate the Easy Table of Contents plugin. For more details, see our step by step guide on how to install a WordPress plugin.

This plugin allows you to automatically generate a table of contents with anchor links. It uses headings to guess the content sections, and you can customize it fully to meet your needs.

Upon activation, simply go to Settings » Table of Contents page to configure plugin settings.

Easy Table of Contents plugin settings

First, you need to enable it for the post types where you want to add table of contents. By default, the plugin is enabled for pages, but you can also enable it for your posts as well.

You can also enable the auto-insert option. This allows the plugin to automatically generate the table of contents for all articles, including the older articles that match the criteria.

If you only want to automatically generate table of contents for specific articles, then you can leave this option unchecked.

Next, scroll down a little to select where you want to display the table of contents and when you want it to be triggered.

Select where and when to display table of contents

You can review other advanced settings on the page and change them as needed.

Don’t forget to click on the ‘Save Changes’ button to store your settings.

If you enabled the auto-insert option, then you can now view an existing article with the specified number of headings.

You’ll notice that the plugin will automatically display a table of contents before the first heading in the article.

If you wanted to manually generate table of contents for specific articles, then you need to edit the article where you want to display a table of contents with anchor links.

On the post edit screen, scroll down to the ‘Table of Contents’ tab below the editor.

Manually add table of contents with anchor links

From here, you can check the ‘Insert table of contents’ option and select the headings you want to include as anchor links.

You can now save your changes and preview your article. The plugin will automatically display a list of anchor links as your table of contents.

Table of contents preview

For more detailed instructions, see our article on how to add table of contents in WordPress.

We hope this article helped you learn how to easily add anchor links in WordPress. You may also want to see our tips on how to properly optimize your blog posts for SEO and our pick of the best 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.



Source link

How to Easily Add Icon Fonts in Your WordPress Theme


Do you want to add icon fonts on your WordPress site? Recently one of our readers asked what’s the easiest way to add icon fonts in their WordPress theme?

Icon fonts allow you to add vector (resizable) icons without slowing down your website. They are loaded like web fonts and can be styled using CSS.

In this article, we will show you how to easily add icon fonts in your WordPress theme, step by step.

Using icon fonts with any WordPress theme

What are Icon Fonts and Why You Should Use Them?

Icon fonts contain symbols or pictograms instead of letters and numbers. These pictograms can be easily added to website content and resized using CSS. Compared to image based icons, font icons are much faster which helps with your overall WordPress website speed.

Icon fonts preview

Icon fonts can be used to display commonly used icons. For example, you can use them with your shopping cart, download buttons, feature boxes, giveaway contest, and even in WordPress navigation menus.

There are several free and open-source icon fonts available that has hundreds of beautiful icons.

In fact, each WordPress install comes with the free dashicons icon font set. These icons are used in the WordPress admin menu and other areas inside WordPress admin area.

Some other popular icon fonts are:

For the sake of this tutorial, we will be using Font Awesome. It is the most popular free and open-source icon font available. We use FontAwesome on WPBeginner website as well as our WordPress plugins like OptinMonster, WPForms, RafflePress, etc.

In this guide, we’re going to cover three ways of adding icon fonts in WordPress. You can choose the solution that works best for you.

Adding Icon Fonts in WordPress Using Plugins

If you are a beginner level user just trying to add some icons to your posts or pages, then this method is suitable for you. You wouldn’t have to modify theme files, and you would be able to use icon fonts everywhere on your website.

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

Upon activation, the plugin enables Font Awesome support for your theme. You can now edit any WordPress post or page and use icon shortcode like this:

[icon name=”rocket”]

You can use this shortcode along with other text or by itself in a dedicated shortcode block.

Adding icon font shortcode in WordPress

Once added, you can preview your post or page to see how the icon will look on a live site. Here is how it looked on our test site.

Icon preview

You can also add the font icon shortcode inside a paragraph block by itself where you can use the block settings to increase icon size.

Increase icon size

As you increase the text size, this may look odd inside the text editor. That’s because the shortcode does not automatically change into an icon font inside the block editor.

You will need to click the preview button on your post or page to see how the actual icon size would look.

Icon font enlarged

You can also use the icon shortcode inside columns and create feature boxes like this:

Using icon fonts in feature boxes

2. Using Icon Fonts with a WordPress Page Builder

Most popular WordPress page builder plugins come with built-in support for icon fonts. This allows you to easily use icon fonts in your landing pages as well as other areas on your website.

Beaver Builder

Beaver Builder is the best WordPress page builder plugin on the market. It allows you to easily create custom page layouts in WordPress without writing any code.

Beaver Builder comes with beautiful icons and ready to use modules that you can just drag and drop into your post and pages.

Beaver Builder icon modules

You can create icon groups, add a single icon, and move them into well-positioned rows and columns. You can also select your own colors, background, spacing, and margin without writing CSS.

Edit icon fonts in Beaver Builder

You can even create completely custom WordPress themes without writing any code using Beaver Builder’s Themer product.

Elementor Pro

Elementor is another popular WordPress page builder plugin. It also comes with several elements that allow you to use icon fonts, including an Icon element.

Elementor icon

You can just drag and drop an icon anywhere and use it with rows, columns, and tables to create beautiful pages.

Other popular page builders like Divi and Visual Composer also have full support for icon fonts.

3. Adding Icon Fonts in WordPress Manually with Code

As we mentioned earlier that icon fonts are just fonts and can be added to your site like you would add any custom fonts.

Some icon fonts like Font Awesome, are available from CDN servers across the web and can be linked from your WordPress theme directly.

You can also upload the entire font directory to a folder in your WordPress theme and then use those fonts in your stylesheet.

Since we are using Font Awesome for this tutorial, we will show you how you can add it using both methods.

Method 1:

This manual method is quite easy.

First, you need to visit the Font Awesome website and enter your email address to get the embed code.

Get Font Awesome embed code

Now check your inbox for an email from Font Awesome with your embed code. Copy and paste this embed code in your WordPress theme’s header.php file just before the </head> tag.

Your embed code will be a single line that will fetch the Font Awesome library directly from their CDN servers. It will look something like this:


<script src="https://use.fontawesome.com/123456abc.js"></script>

This method is simplest, but it can cause conflicts with other plugins.

A better approach would be to properly load JavaScript in WordPress using the built-in enqueueing mechanism.

Instead of linking to the stylesheet from your theme’s header template, you can add the following code in your theme’s functions.php file or in a site-specific plugin.



function wpb_load_fa() 

wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );



add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );


Method 2:

The second method is not the easiest, but it would allow you to host the Font Awesome icon fonts on your own website.

First, you need to visit the Font Awesome website to download the font package to your computer.

Download icon font to your computer

Simply download the icon fonts and unzip the package.

Now, you will need to connect to your WordPress hosting using a FTP client and go to your WordPress theme’s directory.

You need to create a new folder there and name it fonts. Next, you need to upload the contents of the icon fonts folder to the fonts directory on your web hosting server.

Uploading icon fonts to your WordPress theme

Now you are ready to load icon fonts into your WordPress theme. Simply add this code to your theme’s functions.php file or in a site-specific plugin.



function wpb_load_fa() 

wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );



add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );


You have successfully loaded Font Awesome into your WordPress theme.

Now comes the part where you will be adding actual icons into your WordPress theme, posts, or pages.

Manually Displaying Icon Fonts in WordPress

Go to the Font Awesome’s website to see the full list of icons available. Click on any icon you want to use, and you will be able to see the icon name.

Icon name
Copy the icon name and use it like this in WordPress.


<i class="fa-arrow-alt-circle-up"></i> 

You can style this icon in your theme’s stylesheet like this:


.fa-arrow-alt-circle-up  
font-size:50px; 
color:#FF6600; 


You can also combine different icons together and style them at once. For example, lets say you want to display a list of links with icons next to them. You can wrap them under a <div> element with a specific class.


<div class="icons-group">
  <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
  <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
  <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a>
  <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

Now you can style them in your theme’s stylesheet like this:


.icons-group-item i  
color: #333; 
font-size: 50px; 
 
.icons-group-item i:hover  
color: #FF6600
 

We hope this article helped you learn how to easily add icon fonts in your WordPress theme. You may also want to take a look at our tutorial on how to add image icons with navigation menus 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.



Source link

How to Add Call to Action Buttons in WordPress (without Code)


Do you want to add call to action buttons in your WordPress posts or pages?

Buttons are a great way to boost conversions. They are highly noticeable which makes them excellent at redirecting user’s attention to a desired interaction.

For example, you can use a call to action button to navigate users to a transactional page like pricing page, product page, services page, and others on your website.

You can also use call to action buttons to promote special offers, new products, or affiliate links that point to partner websites.

In this article, we will show you how to easily add beautiful call to action buttons in WordPress without writing any code.

Adding Buttons in WordPress Step by Step

Note: This article is for adding custom call to action buttons in WordPress. If you want to add social share buttons, then please see our guide on how to add social share buttons in WordPress.

Adding Buttons in WordPress Posts and Pages (Step by Step)

WordPress makes it super easy to add buttons with a built-in ‘Button’ block.

It is a new feature introduced in WordPress 5.0, along with the new Gutenberg WordPress block editor.

In this article, we will show you three different ways to add call to action buttons in WordPress blog posts and pages. You can pick the solution that best suits your needs.

Feel free to use the table of content below to navigate through this article easily.

Table of Contents:

  1. Adding Buttons in WordPress Posts / Pages Using Default Editor
  2. Creating a WordPress Button in Classic Editor
  3. Adding a Click-to-Call Button in WordPress

Adding Buttons in WordPress Posts / Pages Using Default Editor

This method is easier and recommended for most users. It uses the built-in Button block in the new WordPress editor. If you are still using the older classic editor, then you can skip to the next section.

First, you need to create a new post or edit an existing one where you want to add a button.

On your post edit screen, click on the ‘+’ icon to add a New Block and select the Button block under the Layout Elements section.

Add Button Block in WordPress Block Editor

Next, you should be able to see the button block added to the content editor

Button Block Added to WordPress Post Editor

Simply click on the ‘Add text…’ area and enter your button text.

After that, you need to paste the URL of the page you want to link in the ‘Paste URL or type to search’ field below the button.

Once done, click on the Apply icon.

Enter Button Text and Link in WordPress

If you want to display the button in the center, then you can click on the Align Center icon in your block toolbar above.

Align Center Your Button in WordPress Block Editor

Next, you can customize your button style, change background color, and change text color from the block settings panel on the right side.

Choose Button Style in WordPress Block Settings

There are three button styles you can choose from: default, outline, and squared. You can try each one by clicking on them and choose the one that looks best.

The Color Settings section includes five color variations for both button background and button text. Not only that, but you can also use a custom color of your choice by clicking on the Custom Color option.

Choose Custom Color of your WordPress Button

Once you are happy with the button design, you can save your post or publish to see a live preview.

Here is how it looked on our demo website.

WordPress Button Preview

Bonus: If you want to see how well your buttons are performing, then you should use MonsterInsights. It has built-in event tracking for affiliate links, outbound links, and custom events, so you can see how well your buttons are performing. For more details, see important marketing metrics that you must track in WordPress.

Creating a WordPress Button in Classic Editor

Although Gutenberg block editor is faster and easier, many users still prefer the old Classic WordPress editor. If you are one of them, then you need to find an alternative solution to add buttons on your WordPress site.

There are mainly three options available for adding buttons in WordPress Classic Editor.

  1. Add button in WordPress with HTML / CSS code.
  2. Add button in WordPress with WordPress button shortcode plugin.
  3. Add button in WordPress without using shortcodes.

Of the three options, the first one is the coding method. You will need to write HTML / CSS code and add to your website wherever you need a button. It is not beginner-friendly.

The second option is the most commonly used method. That’s because most of the WordPress button plugins provide shortcodes for adding buttons.

The third option is the best because it allows you to easily add buttons to your posts and pages without having to remember shortcode.

Let’s take a look at how to add buttons in WordPress without using shortcodes.

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

Once you have activated the plugin, create a new post, or edit an existing one. In the editor, you will see a new button in the Visual Editor labeled Insert Button.

Insert Button Icon in Classic WordPress Editor

To insert a new button in your post, you need to click on the Insert Button. This will bring up a popup window where you can design your new button.

Enter Button Text and URL in Classic Editor

First, you need to add your button text and URL. As you add your button text, you can see a live preview in the box below.

Next, you can add nofollow tag to your link and open the link in a new tab by clicking on the checkbox options below.

After that, you can select an icon for your button. If you click on the Icons tab, then you will be able to see the icons that you can add before or after the text in your buttons.

Add Icon to your Button in Classic Editor

These icons are actually icon fonts (learn how to use icon fonts in WordPress post editor).

Next, you can choose text color and background color for your button by clicking on the Color box icon.

Change Button Background Color in WordPress Classic Editor

After that, click on the drop-down menu to choose the button style. There are eight different button styles ready for use.

Choose a Button Style in Classic WordPress Editor

Similarly, you can also choose the button size from extra small to extra large.

Once you are satisfied with the look, simply click on the Update button.

You will be able to see your button as it would appear in your post, right inside the post editor.

You can also set button alignment by simply selecting the button text and using the toolbar buttons in the classic editor.

Center Align Your Button in Classic Editor

Double-clicking on the button will bring up the Insert Button popup, and you can re-edit your button if you like.

Once you are happy with its design, you can publish or update your post and see it in action. This is how the fancy button appeared on our demo WordPress website.

Button Preview - Built in Classic Editor

Adding a Click-to-Call Button in WordPress

In addition to the usual call to action buttons, you can also add click-to-call buttons on your website to boost leads and conversions.

A click-to-call button is a specific type of call to action button which allows your users to make a phone call to your team with just a tap.

Using the tap-to-call buttons, your site visitors can instantly talk to your team in person and get the information they need. Whether discussing a quote request, pre-sale information, or support issue, phone calls are quick.

As the number of smartphone users is growing, adding call now buttons are even more relevant nowadays.

If you don’t have a business phone, then you may want to look into getting a virtual business phone number.

With that said, let’s take a look at how to add click-to-call buttons in WordPress step by step.

First thing you need to do is install and activate the WP Call Button plugin. For detailed instructions, you can see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » WP Call Button page to configure the plugin settings and design your click-to-call button.

Sticky Call Button Settings in WordPress

At first, you will see the Sticky Call Button settings. The sticky call button is a conversion optimized feature which moves the call button along with users as they browse your site.

You can start by activating the Call Now Button Status. Simply click on the switch toggle to activate that.

After that, you need to enter your phone number. WP Call Button has a smart phone number field with your country code. Simply select your country and enter your business phone number.

If you don’t have a business number, then you can get one from Nextiva. It is a trusted business VoIP provider.

Next, you can edit your call button text, choose the call button position, and color.

Also, you can select where to show the sticky call button on your website. By default, it shows the call button on all pages and on all devices. You can choose to show or hide the button on certain pages, and show only on mobile devices.

Once you review all the options, you can click on the Save Changes button at the bottom. After that, you can visit your website and see the sticky call now button in action.

WordPress Click to Call Button

Aside from the sticky call buttons, you can also add static call buttons on your WordPress pages, posts, and sidebars using this plugin.

If you are using the new WordPress block editor, then you can easily add the call now button on your pages using the WP Call Button block.

Create a new page or edit an existing page and add the WP Call Button block on your page editor.

Adding WP Call Button Block in WordPress

After that, you can customize the button text, button color, text color, font size, and show or hide the phone icon.

Customizing Call Button in WordPress Page Editor

Once you are happy with its design, you can publish or update your page.

If you are using Classic WordPress editor, then you need to use the Static Call Button generator to get a shortcode. Go to Settings » WP Call Button and click on the Static Call Button menu on the top.

Static Call Buttons in WordPress Settings

Simply customize the button options and then copy the shortcode. After that, you can use the shortcode in any post or page on your website.

WP Call Button plugin also allows you to add the call button on your WordPress sidebar and other widget-ready areas.

Simply go to Appearance » Widegts and drag the WP Call Button widget to a widget ready area where you want to show the call button.

WordPress Call Button Sidebar Widget

Now you can add a title, description, and customize the call button from the Advanced Settings section. Once done, save your widget.

That’s it! If you want to see a more detailed tutorial, then you can check our step by step guide on how to add a click-to-call button in WordPress.

Bonus Tip for Adding Custom Buttons in WordPress

If you want to add completely custom call to action buttons in WordPress, then you’re likely looking for a solution that also allows you to add custom sections as well as custom buttons in your website header, menus, and other areas.

In that case, we recommend using a drag and drop WordPress page builder plugin like Beaver Builder or Divi.

These page builders will help you create custom landing pages with fancy call to action buttons exactly how you want it.

Whatever you do, its important that you track how your buttons are performing because guessing isn’t the best business growth strategy.

We recommend using MonsterInsights. It has built-in event tracking for affiliate links, outbound links, and custom events, so you can see how well your buttons are performing. For more details, see important marketing metrics that you must track in WordPress.

We hope this article helped you to learn how to add buttons in WordPress easily. You may also want to see our list of the best WordPress plugins and best email marketing services for small businesses.

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.



Source link

How to Add a Shortcode in WordPress? (Beginner’s Guide)


Shortcodes are an easy way to add dynamic content into your WordPress posts, pages, and sidebars.

Many WordPress plugins and themes use shortcodes to add specialized content like contact forms, image galleries, sliders, and more.

In this article, we will show you how to easily add a shortcode in WordPress. We will also show you how to create your own custom shortcodes in WordPress.

Adding a shortcode in WordPress

What are Shortcodes?

Shortcodes in WordPress are code shortcuts that help you add dynamic content in WordPress posts, pages, and sidebar widgets. They are displayed inside square brackets like this:

[myshortcode]

To better understand shortcodes, lets take a look at the background of why they were added in the first place.

WordPress filters all content to make sure that no one uses posts and page content to insert malicious code in the database. This means that you can write basic HTML in your posts, but you cannot write PHP code.

But what if you wanted to run some custom code inside your posts to display related posts, banner ads, contact forms, galleries, etc?

This is where Shortcode API comes in.

Basically, it allows developers to add their code inside a function and then register that function with WordPress as a shortcode, so users can easily use it without having any coding knowledge.

When WordPress finds the shortcode it will automatically run the code associated with it.

Let’s see how to easily add shortcodes in your WordPress posts and pages.

Adding a Shortcode in WordPress Posts and Pages

First, you need to edit the post and page where you want to add the shortcode. After that, you need to click on the add block button to insert a shortcode block.

Adding shortcode block in WordPress

After adding the shortcode block, you can simply enter your shortcode in the block settings. The shortcode will be provided by various WordPress plugins that you might be using such as WPForms for contact forms, OptinMonster for email marketing forms, WP Call button for inserting a click to call button, etc.

Insert shortcode in the block editor

To learn more about using blocks, see our Gutenberg tutorial for more details.

You can now save your post or page and preview your changes to see the shortcode in action.

Adding a Shortcode in WordPress Sidebar Widgets

You can also use shortcodes in WordPress sidebar widgets. Simply visit the Appearance » Widgets page and add the ‘Text’ widget to a sidebar.

Now you can paste your shortcode inside the text area of the widget.

Adding shortcode in sidebar widget

Don’t forget to click on the ‘Save’ button to store your widget settings.

After that, you can visit your WordPress website to see the live preview of the shortcode in the sidebar widget.

Adding a Shortcode in Old WordPress Classic Editor

If you are still using the old classic editor in WordPress, then here is how you can add shortcodes to your WordPress posts and pages.

Simply edit the post and page where you want to add the shortcode. You can paste the shortcode anywhere inside the content editor where you want it to be displayed. Just make sure the shortcode is in its own line.

Shortcode classic editor

Don’t forget to save your changes. After that you can preview your post and page to see the shortcode in action.

How to Add a Shortcode in WordPress Theme Files

Shortcodes are meant to be used inside WordPress posts, pages, and widgets. However, sometimes you may want to use a shortcode inside a WordPress theme file.

WordPress makes it easy to do that, but you will need to edit your WordPress theme files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.

Basically, you can add a shortcode to any WordPress theme template by simply adding the following code.

<?php echo do_shortcode("[your_shortcode]"); ?>

WordPress will now look for the shortcode and display its output in your theme template.

How to Create Your Own Custom Shortcode in WordPress

Shortcodes can be really useful when you want to add dynamic content or custom code inside the WordPress post and pages. However, if you want to create a custom shortcode, then it requires some coding experience.

If you are comfortable with writing PHP code, then here is a sample code that you can use as a template.

// function that runs when shortcode is called
function wpb_demo_shortcode()  

// Things that you want to do. 
$message = 'Hello world!'; 

// Output needs to be return
return $message;
 
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode'); 

In this code, we first created a function that runs some code and returns the output. After that, we created a new shortcode called ‘greeting’ and told WordPress to run the function we created.

You can now use add this shortcode to your posts, pages, and widgets using the following code:

[greeting]

It will run the function you created and show the desired output.

Now let’s take a look at a more practical usage of a shortcode. In this example, we will display a Google AdSense banner inside a shortcode.


// The shortcode function
function wpb_demo_shortcode_2()  

// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     
</script>';

// Ad code returned
return $string; 


// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

Don’t forget to replace the ad code with your own advertisement code.

You can now use the [my_ad_code] shortcode inside your WordPress posts, pages, and sidebar widgets. WordPress will automatically run the function associated with the shortcode and display the advertisement code.

Shortcodes vs Gutenberg Blocks

We’re often asked by users about the differences between shortcode vs the new Gutenberg blocks.

Basically if you find shortcodes useful, then you’ll love WordPress editor blocks. Blocks allow you to do the same thing but in a more user-friendly way.

Instead of requiring users to add a shortcode for displaying dynamic content, blocks allow users to add dynamic content inside posts / pages with a more intuitive user interface. A lot of popular WordPress plugins are switching to using Gutenberg blocks instead of shortcodes because they’re more beginner friendly.

We have put together a list of the most useful Gutenberg block plugins for WordPress that you may want to try.

If you want to create your own custom Gutenberg blocks, you can follow our step by step tutorial on how to create custom Gutenberg blocks in WordPress.

We hope this article helped you learn how to add a shortcode in WordPress. You may also want to see our guide on the best drag & drop WordPress page builder plugins, and how to create a custom WordPress theme without writing any code.

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

The post How to Add a Shortcode in WordPress? (Beginner’s Guide) appeared first on WPBeginner.



Source link

How to Add a Search Bar to WordPress Menu (Step by Step)


Do you want to add a search bar to your WordPress navigation menu?

By default, WordPress lets you add a search section on your website sidebar, footer, and other widget-ready areas. However, many users prefer to have the WordPress search box in the navigation menu because it is easily noticeable on the top.

In this article, we will show you how to easily add a search bar to your WordPress menu without having any coding knowledge.

Adding a Search Bar to WordPress Menu

Why You Should Add a Search Bar in Menu?

A site search makes it easy for your users to find what they’re looking for without leaving your website. It helps improve user experience on your website and boosts engagement.

This is why most usability experts recommend adding a search option in the navigation menu, so users can easily find it.

However, the default WordPress search widget is limited to only widget-ready areas.

Luckily, there are many different WordPress search plugins which let you add the search bar to different locations on your site including menus.

For this tutorial, we have chosen the Ivory Search free plugin. It allows you to create new custom search forms and enhance the default WordPress search.

With that said, let’s take a look at how to add a search bar to your WordPress menu.

Adding a Search Bar to WordPress Menu

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

Upon activation, you need to visit Ivory Search » Search Forms page to create a new search form.

Ivory Search Include Options

The plugin automatically adds the default search form, so you can quickly review its settings and add it to your WordPress menu.

Search settings allow you to select which content on your website should be included in the site search.

The ‘Includes’ section lets you choose which post types, posts, pages, category, custom fields, etc. should be included in the search query. You need to review the options and click the Save Form button.

Next, there is the ‘Excludes’ section, which lets you define the content that you don’t want to show in search results. Once done, click the Save Form button again to store your settings.

Ivory Search Exclude Options

The ‘AJAX’ section lets you enable AJAX functionality for your search form.

Ivory WordPress Search Bar AJAX Settings

The ‘Options’ section lets you define how many results to show per search page along with other advanced settings.

Define Search Results Per Page in Ivory Search Plugin

Now your custom WordPress search form is ready. Once again, don’t forget to save your settings.

After that, the next step is to add the search form to your navigation menu. Simply go to Ivory Search » Settings page to configure the search bar to your WordPress menu.

On this page, you will see the ‘Select Menu’ tab. From here, you can simply toggle the menu where you would like to add the search bar.

Select WordPress Menu to Show Search Bar

This list of menus (Primary Menu and Footer Menu) belongs to your WordPress template. If you change the template of your site, then the list will be automatically updated with the available menus from your template.

After that, you can choose the search style from the Form Style accordion below.

The plugin allows you to display the search form in five different styles: Default, dropdown, sliding, full width, and popup.

Ivory Search Form Styles

If you like, you can further customize the options by going to the ‘Settings’ section below ‘Menu Search’.

From there, you can add your search form to the header, footer, manage mobile display for search, and more. These settings will also help in controlling the search results for your users.

Ivory Search More Settings

Once you are satisfied, make sure to save your settings. After that, you can head over to your website to see the search bar in the WordPress navigation menu.

Search Bar in WordPress Menu Preview

We hope this article helped you learn how to add a search bar to a WordPress menu. You may also want to see our list of most useful tips to speed up WordPress and boost performance.

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 Search Bar to WordPress Menu (Step by Step) appeared first on WPBeginner.



Source link

How to Add Infinite Scroll to your WordPress Site (Step by Step)


Do you want to add infinite scroll to your WordPress blog?

Infinite scroll is a web design technique which automatically loads your next page content when users reach the bottom of a page. It allows users to see more content on your blog without clicking on the pagination or ‘Load More’ button.

In this article, we will show you how to easily add infinite scroll on your WordPress blog (step by step).

Adding Infinite Scroll to Your WordPress Blog Easily

What is Infinite Scroll?

Infinite scroll is a web design trend which uses AJAX page load instead of numeric page navigation to automatically load your next page content and display it at the end of current page. Infinite scrolling makes it easier to browse more content by simply scrolling down. It loads content continuously and infinitely as users keep scrolling.

Traditionally, users would have to click on ‘next,’ ‘previous’ buttons or page numbers to see older blog articles.

When using AJAX short for Asynchronous Javascript and XML, webpages can communicate with the server without reloading the entire page. It enables web apps to process user requests and deliver data without refresh.

The best examples of infinite scroll design are the popular social media sites such as Facebook, Twitter, Instagram, Pinterest, and more. If you are using any of them, then you know how content loads endlessly on your social media timeline.

Is Infinite Scrolling Suitable for Every Website?

Many content websites on the internet are using infinite scroll technique to improve the browsing experience and increase engagement. This leads many beginners to ask the questions like is it suitable for every website, or is it good for my site?

Infinite scrolling is excellent for sites that present content in a timeline or feed, like the social media apps. It offers a fantastic browsing experience to the users looking for time-based content.

Next, infinite scroll design is perfect for mobile and touch devices. For mobile users, scrolling is more user-friendly than taping on tiny page links.

Touchscreen Web Interaction

The most significant advantage of infinite scroll technique is a smooth browsing experience. Users don’t need to click on the pagination links manually. Content loads quickly with scrolling and keeps users engaged.

But on the other side, it can also make your site navigation harder. With continuous loading, it is hard to figure out where (on which page) a blog article is. Some users even find it overwhelming to see many articles all at once.

Another disadvantage of infinite scroll design is that you cannot have a footer. Even if you have it, it will be hidden under endless articles continuously loading. Many sites add essential links on the footer, so not having it can disappoint some users.

Perhaps the most concerning issue with infinite scrolling is that it can slow down your website or even crash the server. When we added infinite scroll to one of our smaller blogs, we experienced server crash after users scrolled unnecessarily causing memory exhaustion on a small WordPress hosting account. We recommend that you use managed WordPress hosting if you’re looking to try infinite scrolling.

Now that you know the pros and cons of infinite scroll design, you can decide whether you need to add it to your blog or not.

If you have decided to add infinite scrolling to your WordPress blog, then you can do it easily. We will be showing you multiple plugins that you can use, so you can choose the one that best suits your needs.

Adding Infinite Scroll to Your WordPress Blog with Catch Infinite Scroll

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

Upon activation, WordPress will add a new menu item labeled ‘Catch Infinite Scroll’ to your WordPress admin panel. You need to click on it to configure the plugin settings.

Catch Infinite Scroll Settings

First, you can choose a trigger option for loading articles. The plugin lets you load content automatically as users scroll down the page or add a ‘Load More’ button.

Load on Scroll or Click - Catch Infinite Scroll Plugin Settings

You should select the ‘Scroll’ option to trigger autoload with scrolling. Alternatively, you can select the ‘Click’ option if you want to add a load more button.

Next, you can see the navigation selector, next selector, content selector, and item selector. You don’t need to change anything on these options because default options work quite well.

After that, there is an Image option where you can add content loader icon. By default, it has a loader GIF image. If you have a better picture, then you can change it.

Upload a New Loading Image for WordPress Infinite Scroll

‘Finish Text’ option includes the message which will be shown once a user completes viewing your articles. By default, the text says ‘No more items to display.’ You can easily edit this text as needed.

Articles Loading Finished - Finish Text Option Catch Infinite Scroll

Once done, click on the Save Changes button.

That’s it! The infinite scrolling is now active on your blog. You can visit your blog and see the infinite scrolling in action.

WordPress Infinite Scroll Preview

Alternative WordPress Plugins to Add Infinite Scroll in WordPress

Catch Infinite Scroll works well with most of the WordPress themes; however, it can fail with some themes. In such a scenario, you can use any of the following infinite scroll WordPress plugins.

1. Ajax Load More

Ajax Load More settings

Similar to Catch infinite Scroll, Ajax Load More plugin also lets you add endless scroll and clickable Load More buttons to your WordPress site.

The plugin offers more customization options, including many page loading icon styles, button styles, etc. For a detailed guide, you can see our tutorial on creating a load more posts button in WordPress using Ajax Load More plugin.

However, the plugin has some learning curve for beginners. It has an advanced interface with many options, including repeater template, shortcode builder, WordPress queries, and more.

It will require some coding skills to apply infinite scrolling with this plugin.

2. YITH Infinite Scrolling

YITH Infinite Scrolling is a simple alternative to Ajax Load More or Catch Infinite Scroll plugin.

Similar to Catch Infinite Scroll plugin, it has minimal options to set up scroll-based web interaction on your site. You just need to install and activate the plugin and enable infinite scrolling.

YITH Infinite Scrolling Plugin Settings

Anyone, including beginners, can easily set up infinite scrolling using this plugin. However, it doesn’t have a ‘Load More’ button option, which is included in the other two plugins mentioned above.

We hope this article helped you to learn how to add infinite scroll design to your WordPress blog. You may also want to see our guide on how to add scroll-depth tracking 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 Infinite Scroll to your WordPress Site (Step by Step) appeared first on WPBeginner.



Source link

How to Add a Mortgage Calculator in WordPress (Step by Step)


Recently one of our readers asked about adding a mortgage calculator in WordPress.

A mortgage calculator is a useful tool for real estate websites because it allows visitors to see if they can afford the property they’re looking at.

In this article, we will show you how to easily add a mortgage calculator in WordPress.

Adding a Mortgage Calculator in WordPress

What is a Mortgage Calculator? Who Needs It on Their Website?

A mortgage calculator is a tool that allows users to get estimates for their mortgage payment, with interest rate and amortization period.

With a mortgage calculator, your website visitors can select a monthly payment or period, and the mortgage calculator form will calculate the costs based on a given interest rate.

If you are making a real website with IDX property listings, then a mortgage calculator will help you get more leads and increase user engagement on your website.

That being said, let’s take a look at how to easily create a mortgage calculator in WordPress.

Creating a WordPress Mortgage Calculator – (Step by Step)

Adding a mortgage calculator in WordPress used to be quite difficult. Either you had to add a piece of code to your site or install a third-party mortgage calculator service.

Now, with Formidable Forms, you can easily create a mortgage calculator with a drag and drop interface.

Formidable Forms Advanced WordPress form plugin

Formidable Forms is the most advanced WordPress form builder plugin on the market. It allows you to create advanced forms like an online quiz, web directory, job listings, calculators and more.

Formidable makes it easy to build advanced forms without writing code. You can use features like conditional logic, advanced calculations, file uploads, repeater fields, dynamic pre-filled fields, and more.

It comes with super useful pre-made templates for more than 20 types of forms. We will be using their mortgage calculator template as a starting point for this tutorial.

Let’s get started.

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

You’ll need at least their Business plan to use the mortgage calculator feature.

Upon activation, you need to click on the ‘Add your license key now’ option to enter your license details.

Add Your Formidable Forms Pro License Key

This will take you to the Global Settings page where you’ll need to enter your Formidable Forms license key.

Save Your Formidable Forms License key

You can find the license key in your account area on the Formidable Forms website.

Once done, you will see the license activation success message. Now you can simply refresh your page to load the premium features.

After that, go to Formidable » Forms to add a new form. There, you will see a Contact Us form already added by default. Go ahead and click on the ‘Add New’ button to create a new mortgage calculator form.

Add New Formidable Form

On the next page, you will see many pre-made templates which help you quick get started. You need to locate the mortgage calculator template under the Premium Templates section.

You will notice that there are two mortgage calculator templates available: Simple Mortgage Calculator and Advanced Mortgage Calculator.

Let’s start with the Simple Mortgage Calculator first.

Place your mouse pointer over the template, and then it will show you two buttons: Create Form and Preview.

Choose Simple Mortgage Calculator Template

You need to click on the ‘Create Form’ button. This will bring up up a popup window where you need to add a name and description, and then click on the ‘Create’ button.

Create New Simple Mortgage Calculator Form

The plugin will now load the Formidable Forms editor interface with your selected simple mortgage form calculator template.

WordPress Simple Mortgage Calculator Form Builder

From here you can simply point and click to customize each form field as needed.

For example, you can change the field label and default value for the Mortgage Amount field.

Customizing Simple Mortgage Calculator Field Options

However, you need to be careful about the last field ‘Monthly Payment’ because it includes the calculation formula as the default value.

If you are not a calculation expert, you need to leave it unchanged.

Customizing Monthly Payment Field Options Formidable Mortgage Calculator

After reviewing all your form fields, click on the Update button at the top right corner of the screen. After that you can click on the Close icon to exit the form editor.

Simple Mortgage Calculator Successfully Created

Your simple mortgage calculator is now ready. The next step is to add it to a page or post where you want to show the calculator.

Simply create a new page/post or open an existing one to add the mortgage calculator. On your page editor, click on the ‘Add New Block’ icon, and then select Formidable Forms Gutenberg block.

Add Formidable Forms Block in WordPress Page Editor

After that, you can see the Formidable Forms block added to your page editor.

Next, you need to select the Simple Mortgage Calculator form in the dropdown option, and WordPress will load the form automatically.

Adding Simple WordPress Mortgage Calculator to Page Editor

After that, you can publish or update your page, and then preview it to see how the simple mortgage calculator works.

For example, here is how it looks on our demo website.

Simple WordPress Mortgage Calculator Preview

Creating an Advanced Mortgage Calculator in WordPress

The simple mortgage calculator shown above is good for basic mortgage calculation. However, if you want to calculate taxes, insurance payments, PMI, loan to value ratio, etc, then you will need an advanced mortgage calculator for your real estate website.

With Formidable Forms, making an advanced mortgage calculator is also a quick and straightforward job.

First, you need to visit Formidable » Forms page and click on the Create New button to add a new form.

Add New Formidable Form

After that, take your mouse over the Advanced Mortgage Calculator template and click on the Create Form button.

Select Advanced Mortgage Calculator Template Formidable Forms

Next, WordPress will open a popup window where you can enter a name and description for your form and then click on the ‘Create’ button.

Advanced Mortgage Calculator Editor in Formidable Forms

Now you can customize each form field by clicking on it.

When you click a field, the Field Options will appear in the left column. From there, you can change the field label, default value, etc.

Customizing Field Options in Advanced Mortgage Calculator Form

You can review and edit the Advanced Options of Financial Analysis fields. However, if you don’t know the calculation formulas then its best to leave them untouched.

Calculation Fields in Advanced Mortgage Calculator Formidable Forms

Once you are done, click on the Update button at the top right corner, and then click the Close icon.

Your advanced mortgage calculator form is ready; you can now add it your WordPress posts, pages, sidebars, or property listing pages

On your page editor, click on the ‘Add New Block’ icon and then select Formidable Forms block.

Add Formidable Forms Block in WordPress Page Editor

Simply edit a post, page, or listing and add the Formidable Forms block to your content editor.

From the block settings, select the Advanced Mortgage Calculator form that you created earlier. After that, WordPress will automatically load the mortgage calculator on the page editor.

Add Advanced WordPress Mortgage Calculator to Page Editor

Now you can publish or update your page and preview it to see how your mortgage calculator looks. Here is how the Formidable Forms advanced mortgage calculator looks on our demo website.

Advanced WordPress Mortgage Calculator Preview

As shown in the screenshot above, the Advanced Mortgage Calculator lets your users enter the home value, loan information including amount, interest rate, amortization schedule, annual taxes, insurance, and PMI.

The plugin will then calculate the data and display monthly payments, duration, and other information.

We hope this article helped you learn how to add a mortgage calculator in WordPress. You may also want to see our list of the best email marketing services and best business phone services for small business.

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

The post How to Add a Mortgage Calculator in WordPress (Step by Step) appeared first on WPBeginner.



Source link

How to Add a Privacy Policy in WordPress


Do you want to add a privacy policy on your WordPress site?

A privacy policy page is a document required by law that discloses the information you collect about visitors on your website.

It is recommended to add a privacy policy page to your website whether you are a blogger, freelancer, or a business owner.

Now, the problem is most beginners don’t know how to create a legitimate privacy policy, and then display it on their website.

In this article, we will show you how to easily add a privacy policy in WordPress. We will also explain the various elements you must include in your privacy policy page.

How to add a privacy policy page in WordPress

What is Privacy Policy and Do You Need it on Your Website?

All websites collect information about their visitors in different ways.

In many countries (including the United States), websites are required by law to disclose the information they collect about their visitors, and how this information is used.

Here are some of the ways in which a typical WordPress site collects user information.

All websites on the internet should have a privacy policy page. It protects your business from legal issues and also helps build consumer trust.

You also need to add a privacy policy page to comply with the General Data Protection Regulation (GDPR).

For those who don’t know, GDPR is a European Union (EU) law that gives its citizens control over their personal data.

This law applies to every business (including WordPress blogs) around the world, even if you are not from the EU countries.

For more details, you may read our ultimate guide on GDPR and understand its impact on your WordPress site.

What should you include in a Privacy Policy?

The basic requirements for a privacy policy are quite simple. You need to list all the ways you collect or intend to collect user information on your website.

A simple privacy policy page should contain the following information:

  • Information you collect about users visiting your website.
  • Methods used to collect information, e.g. cookies and web beacons, sign up, registration, comment forms, etc.
  • Mention all third-party advertisers collecting user information on your website like Google Adsense.
  • Include links to the privacy policy of each advertising program you participate in.
  • How users can block cookies and opt-out of third party advertisements.
  • Your contact information so that users can reach out if they have questions.

There are many websites on the internet that allow you to automatically generate text for your privacy policy or terms of service pages.

WordPress itself comes with a basic privacy policy generator that you can use.

You can also take a look at WPBeginner’s privacy policy page as an starting point. Simply replace all references to WPBeginner and our parent company with the name of your website or business.

Adding a Privacy Policy Page in WordPress

WordPress makes it super easy to generate a privacy policy page for your website. It also gives you a generic privacy policy template to use with instructions on how to add content to it.

First, you need to visit Settings » Privacy page. You’ll notice that WordPress has already created a Privacy Policy page draft for you.

Privacy policy generator in WordPress

You can click on the ‘Use this draft’ button to save this page as your privacy policy.

You can also click on the create new page button to generate a new Privacy Policy page. WordPress will automatically create a new page and open it for you to make changes.

If you are using the default draft, then you need to click on the Edit link to make changes and publish it.

Edit privacy policy page

Once you open the privacy policy page for editing, you will see a notification on top with a link to the default WordPress privacy policy page guide.

View WordPress privacy policy guide for tips

The content of the privacy policy also contains instructions on how to edit and change each sections.

You will notice that it has sections for different ways a WordPress website may collect personal information. For example, comments, login cookies, embeds, and more.

Edit privacy policy sections

It will also have sections with no information below them. For example, contact form and analytics.

As for contact forms, you can mention the information you collect and what it used for.

If you are using WPForms plugin to create contact form, then you can already create GDPR compliant contact forms.

For Google Analytics, you can follow this complete Google Analytics and GDPR compliance guide.

After reviewing the privacy policy page thoroughly, you can click on the Publish button to save your changes.

Adding Link to Privacy Policy Page in WordPress

Most websites display a link to their privacy policy page in the footer area of their website. This way the link appears on every page but does not take space in your main navigation menu.

There are multiple ways to do this.

Let’s start with the easiest one.

Many WordPress themes come with widget-ready areas in the footer also called Footer sidebar. You can go to Appearance » Widgets page to confirm if your theme has a footer widget area.

Footer widget area

If your theme has one, then you can use the navigation menu widget to display a list of links to your informational pages including the privacy policy.

First, you will need to create a new custom navigation menu.

Simply visit Appearance » Menus page to create a new custom menu. You will need to click on the ‘Create new menu’ link on the top.

Creating a new menu in WordPress

Next, you need to provide a name for your navigation menu. After that, select pages from the left column and then click on the Add to menu button.

Add to menu

You would notice your selected pages appear under your newly created menu. You can now arrange menu items by simply moving them up or down.

Once you are done, don’t forget to click on the Save menu button to store your changes.

Now go to Appearance » Widgets page and add the ‘Navigation Menu’ widget to your footer widget area.

Navigation menu widget

Now select the custom menu you created earlier in the widget settings and click on the save button to store your changes.

You can now visit your website to see the privacy policy links in footer area of your website.

Privacy policy link

Manually Add a Link to Privacy Policy Page in WordPress

If your theme does not come with a footer widget area or a footer navigation menu, then you can manually add link to your privacy policy page using HTML code.

You’ll need to edit the footer.php file for your theme. If you haven’t done this before, then take a look at our guide on how to copy / paste code in WordPress..

In your footer.php file add the following HTML to an appropriate location just before the </body> tag.

<a href="http://example.com/privacy-policy">Privacy Policy</a>

Don’t forget to replace the href value with the URL of your privacy policy page. You can now save your changes and preview your site to see the link in action.

That’s all! You have successfully added a privacy policy page to your WordPress site.

We hope this article helped you learn how to add a privacy policy in WordPress. You may also want to see our step by step WordPress SEO guide for beginners.

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.



Source link

How to Add a Custom Scrollbar in WordPress


Do you want to add a custom scrollbar in WordPress? Changing the appearance of scrollbar can help you stand out specially when making a custom theme for your website.

In this article, we will show you how to easily add a custom scrollbar in WordPress. We will show you two solutions and you can choose one that works best for you.

Adding a custom scrollbar in WordPress

Issues with Custom Scrollbar Colors

By default, CSS does not come with a ruleset that would let you change scrollbar properties. There are some proposals to add this, but they are not supported by most browsers at the moment.

To overcome this, designers and developers use browser-specific pseduo elements or JavaScript to override default scrollbar appearance.

We will show you both techniques. However, keep in mind that you must test your site with different browsers and devices to ensure it works properly on all browsers.

That being said, let’s take a look at how to add custom scrollbar colors in WordPress.

Method 1. Add a Custom Scrollbar in WordPress with a Plugin

This method is easier and recommended for most users. However, it does not support mobile browsers.

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

Upon activation, you need to head over to Settings » Custom Color Scrollbar Settings page to configure plugin.

Scrollbar color and background settings

From here, you can change the scrollbar color and the scrollbar rail background colors. You can then select the mouse scroll step, which is the scrolling speed of the mouse wheel.

You can also select whether you want to auto-hide the scrollbar or always display it.

You have the option choose ‘Cursor only’ option which would display the scrollbar rail but not the button.

Scroll options

Below that, you will find options to set the scroll speed, change rail alignment (left or right), and enable touch behavior.

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

You can now visit your website to see your custom scrollbar colors in action.

Custom scrollbar colors preview

Method 2. Add Custom Scrollbar Colors in WordPress using CSS

This method uses CSS to style your scrollbar, which is faster than using jQuery.

However, it only works on desktop browsers using WebKit rendering engine like Google Chrome, Safari, Opera, and more.

It will not have any effect on mobile browsers or Firefox and Edge on desktop computers.

You will need to add the following custom CSS to your WordPress theme.


::-webkit-scrollbar 
    -webkit-appearance: none;

::-webkit-scrollbar 
  width: 10px;


::-webkit-scrollbar-track 
  background: #ffb400; 
	border:1px solid #ccc;


::-webkit-scrollbar-thumb 
  background: #cc00ff; 
	border:1px solid #eee;
	height:100px;
	border-radius:5px;


::-webkit-scrollbar-thumb:hover 
  background: blue; 


Feel free to change colors and other CSS properties.

Once you are satisfied, don’t forget to save your changes. After that, you can preview it in a supported browser.

This is how it looked on our demo website while viewing on Google Chrome on a Mac computer.

Scrollbar custom colors preview

We hope this article helped you learn how to add a custom scrollbar in WordPress. You may also want to see our guide on how to easily create a custom WordPress theme without writing any code.

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



Source link