Tag - Buttons

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 Social Share Buttons in WordPress (Beginner’s Guide)


Do you want to add social share buttons in WordPress? Social media websites are where people spend a lot of their time on internet.

You can use social media to build user engagement and bring new users to your website. The simplest way to do this is by adding social sharing buttons to WordPress posts and pages.

In this article, we’ll show you how to easily add social share buttons and display share counts in WordPress. We will cover couple of different ways to do this, so you can add social buttons above and below post content or make a floating share bar..

How to Add Social Share Buttons in WordPress - Easy Way

Why You Should Add Social Share Buttons in WordPress?

Social networking is one of the most popular online activities today. It is estimated that by the end of 2019, there will be around 2.77 billion social media users around the globe. (Source)

That’s why social media marketing is now a crucial part of any businesses’ growth strategy. If you want to reach more potential customers, then social media platforms are highly effective channels to communicate with them.

The problem is that when you share your content on your own social media profiles, tit only reaches a limited number of your own followers.

The best way to reach people who don’t follow your business on social media is by adding social sharing buttons to your WordPress site.

Social share buttons prompt your website visitors to share your content on their social media timeline. This allows your content to be seen by their friends and followers who can then add comments, like, and re-share it.

Adding social sharing buttons to your website can help you:

  • Get more traffic to your website
  • Increase your social media following
  • Generate more leads and sales
  • Build social proof and brand recognition

Having said that, let’s see how to easily add social share buttons in WordPress.

Adding Social Share Buttons in WordPress

For this tutorial, we’ll be using the Shared Counts plugin. It is the best WordPress social media plugin available on the market.

Using this plugin, you can easily add social share buttons in your WordPress posts and also display the share counts. The best part is that it is optimized for performance and doesn’t slow down your website.

Unlike other social sharing plugins, Shared Counts uses a unique caching method to have minimal impact on your website’s speed and performance.

The first thing you need to do is to install and activate the Shared Counts plugin. For detailed instructions, see our step by step guide on how to install a WordPress plugin.

After you’ve installed the plugin, you need to go to Settings » SharedCounts menu to configure plugin settings.

Shared Counts WordPress menu

Next, you need to scroll down to the ‘Display’ section and choose the share buttons you want to display. By default, three buttons are selected (Facebook, Twitter, and Pinterest).

Shared Counts Plugin - select social share buttons

You can click on the white area in the field to add additional share buttons that you want.

Add social share buttons in Shared Counts

Next, you can choose the share button style from the dropdown menu labeled “Share Button Style”. Shared Counts plugin comes with 8 beautiful button styles.

Shared Counts share button styles

After that, you’ll need to select the theme location where you want to display the social share buttons. You can choose from 3 options: Before Content, After Content, and Before and After Content.

Theme Locations for Social Share Buttons

Lastly, you need to select the supported post types. It has ‘post’ selected by default.

If you want to display share buttons on your pages and other post types, then you can check the box next to page option.

Supported Post types Shared Counts

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

Once done, you can visit any post on your website to see the social sharing buttons in action. Here’s how our demo website looks with the ‘Classic’ button style on default Twenty Nineteen theme.

Social Share Buttons by Shared Counts

How to Display Social Share Counts in WordPress?

As the name suggests, Shared Counts plugin can also show your social share counts without slowing down your website.

To enable social share counts, you’ll need to go to the Shared Counts settings and set up the share count source.

On the Shared Counts settings window, you’ll see the ‘Share Counts’ settings at the top.

By default, you’ll see the None option selected for ‘Count Source’ which means that share counts are not being retrieved and displayed.

Share Counts Source none Shared Counts

To show the social share counts, you can choose from two sources.

Share Counts Source Options

The SharedCount.com is the recommended option for the plugin. If you choose this option, the counts are retrieved from the SharedCount service API. It allows fetching all counts with only 2 API calls which is the best for performance.

If you choose the ‘Native’ option, share counts are retrieved from the respective social service, like Facebook API for Facebook counts, Pinterest API for Pin counts. This method can slow down your site because it will require multiple API calls.

We recommend choosing SharedCount.com as your count source. Next, you’ll see a field for SharedCount API key.

Shared Counts API field

You can get the SharedCount API by signing up to for a free account on SharedCount.com website.

Register for SharedCounts com

Enter your email address and a password. Then click Create Account.

Create SharedCounts.com account

The website will now send a confirmation link to your email address. You need to click the link to verify.

SharedCounts.com account verified

Once your email is verified, you need to log into your SharedCount account and navigate to your account at the top right side of the screen. There, you’ll see your email address and a dropdown icon next to it.

SharedCounts.com account

Next, you need to click the drop-down menu and select ‘Settings’. From here you’ll find your SharedCount API key.

SharedCounts.com API key

You need to copy the API key and go back to your plugin’s settings page on your WordPress site. Now, go ahead and paste the API key in the ‘SharedCount API Key’ field.

Insert SharedCounts API key

Below that, you’ll see some other settings related to social share counts. You can review and change them if you like.

If you want to show the total counts, then you can check the box next to ‘Count Total Only’ option.

We also recommend checking the box to hide empty counts instead of displaying a zero (0).

Share count options

Next, you will see a new ‘Total Counts’ field in the Display section. This allows you to show total share counts alongside your share buttons.

Add Total Counts button Shared Counts Plugin

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

You can now visit your website to see the social sharing buttons with share count for each blog post.

Adding Social Share Buttons on Selected Pages

Typpically social share buttons aren’t usually added to WordPress pages however sometimes you may want to enable them on some specific pages.

If so then, you can use the Shared Counts shortcode: [[shared_counts]].

You can add this shortcode anywhere on your website to display the share buttons.

To add shortcodes in WordPress, there is a shortcode block in the WordPress block editor.

Shortcode Block in Gutenberg Editor

You can simply add the block to your content area and then paste the Shared Counts shortcode.

Insert Shared Counts Shortcode

Using the shortcode, you can add social share buttons really anywhere on your site.

Adding Floating Social Share Bar in WordPress

The Shared Counts plugin allows you to add social share buttons above content, below content, or both above and below content. These share buttons are static and not visible all the time.

Another popular way to display social sharing buttons is by adding a floating social sharing bar. It is a social sharing menu that sticks on users’ screens as they scroll down.

Unlike the standard sharing buttons, the floating social share bar will be seen the whole time a user reads your article. Making them more noticeable and helping you boost social sharing.

Some user experience experts argue that it makes your website look bad as it fills out the white space. However, if you can keep it clean, then it can be quite useful.

For the floating social share buttons, you need to install and activate the Sassy Social Share plugin.

Upon activation, the plugin will add a new menu item labeled ‘Sassy Social Share’ to your WordPress admin sidebar. Clicking on it will take you to the plugin’s settings page.

Select your button style

First, you need to choose an icon style. The plugin comes with square, rounded, and rectangle buttons. You can choose styles for both the floating social share bar and the standard share bar.

Next, you need to switch to the ‘Standard Interface’ tab. From here you can enable or disable the standard static social sharing buttons.

Standard sharing buttons

We recommend using either floating or static social buttons. Using both of them will be an overkill and may create a bad user experience.

Next, you need to switch to the ‘Floating Interface’ tab and check the box next to ‘Enable Floating sharing interface’ option.

Floating social share plugin settings

After that, you need to choose the social media websites you want to display. You can add or remove buttons and rearrange them by simple drag and drop.

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

You can now visit your website to see floating social share buttons in action. Here’s how it looked on our demo website.

Floating social share buttons

We hope this article helped you learn how to add social share buttons in WordPress. You may also want to learn how to add social media icons to WordPress menus and how to add the social icons to the sidebar.

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