Wednesday, June 9, 2021

How to Connect Your WordPress Site With ActiveCampaign (5 Methods)

Do you want to connect your WordPress site with ActiveCampain?

ActiveCampain is a popular email marketing service that allows you to easily send marketing emails from your WordPress website.

In this article, we’ll show you multiple methods to easily connect your WordPress site with ActiveCampaign. This will help you collect more emails and boosts your conversions.

Connecting WordPress to ActiveCampaign

Here is a quick overview of the topics we’ll cover in this guide.

Getting Started with ActiveCampaign

Starting an email newsletter is a smart way to bring visitors back to your website and convert them into customers. The first thing you’ll need to get started is an email marketing software.

ActiveCampaign is one of the top email marketing companies out there. They offer email marketing, marketing automation, CRM integrations, customer support tools, and more.

To get started, first you’ll need to sign up for an ActiveCampaign account. They offer a 14-day free trial which allows you to try out their service.

Once you have signed up, you need to visit the Settings » Developer page. From here, you need to copy the URL and Key values under ‘API Access’ and paste them into a plain text editor. You’ll need it later to connect your account with WordPress.

ActiveCampaign API keys

That being said, now let’s take a look at different ways to connect ActiveCampaign to your WordPress website.

We’ll show you different methods, so you can choose one that best suits your needs. The first three methods can also be used to connect ActiveCampaign with WooCommerce as well.

1. Connect ActiveCampaign to WordPress Using WPForms

WPForms is the best WordPress form builder plugin on the market. It allows you to easily create any types of form, including newsletter subscription forms, using a simple drag and drop tool.

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

Note: You’ll need their Elite plan to access the ActiveCampaign addon.

Upon activation, you need to visit WPForms » Settings page to enter your license key. You can find this information under your account on the WPForms website.

Enter WPForms license key

After that, head over to the WPForms » Addons page and install the ActiveCampaign addon.

WPForms ActiveCampaign addon

Now you are ready to create forms and connect them to your ActiveCampaign account.

Simply go to WPForms » Add New page to create your first form.

Provide a form name and choose template

You will be asked to provide a name for your form and choose a template. We’ll be using Newsletter Signup template for the sake of this tutorial.

Choosing the template will launch the WPForms builder interface. You can add new fields to your form from the left column, you can also remove or edit any existing fields by simply clicking on them.

For more detailed instructions on using WPForms, you can use our guide on how to create a contact form.

Once you are satisfied with your form, click on the Marketing » ActiveCampaign tab and then click on the ‘Add New Account’ button.

Add ActiveCampaign account in WPForms

This will bring up a popup where you will need to provide a name for this account. It could be anything you want, since it’s only used in the form builder to easily identify your account.

ActiveCampaign settings WPForms

Below that, you need to enter your account API URL and API Key which you saved earlier and click on the Add button to continue.

You’ll be asked to provide a nickname for the connection. This could be anything and is only used to identify the connection internally.

Provide a connection name

WPForms will now connect to your ActiveCampaign account. After that, you need to select your account from a dropdown list and map your form fields to your contact list.

Map form fields to your email list

Once finished, don’t forget to click on the Save button to store your settings.

You can now exit the form builder by clicking on the close button.

Adding Your ActiveCampaign Signup Form in WordPress

WPForms makes it super easy to add your form anywhere on your WordPress website.

You can add it to a post or page by simply editing it and adding the WPForms block to your post. After that, you can simply select your form from the block settings.

WPForms block

Don’t forget to save your changes and preview your form in action.

Preview form

You can also add your form to any sidebar or widget-ready area. Simply go to the Appearance » Widgets page and add the WPForms widget to your sidebar.

Add signup form to your sidebar widget

After that, you can simply select the form you created earlier in the Widget Settings.

Once finished, don’t forget to click on the Save button to store your widget settings. You can now visit your website to see your ActiveCampaign sign-up form in action on your website.

2. Connect ActiveCampaign to WordPress Using OptinMonster

Static newsletter sign up forms are great for building your email list.

However, some visitors will turn a blind eye to the forms sitting in your blog’s sidebar or the footer area, which results in lower conversion rates.

This is where OptinMonster comes in. It is the best email capture plugin and conversion optimization tool on the market and allows you to easily convert website visitors into subscribers and paying customers.

It includes beautiful popups, sticky header and footer bars, fullscreen popups, slide-in forms, countdown timers, and more. Plus, you can show personalized messages to different users with powerful targeting rules.

All these tools help you create engaging customer experiences that bring in more sales and conversions for your business.

First, you’ll need to sign up for an OptinMonster account.

OptinMonster website

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

This plugin acts as a connector between your WordPress website and your OptinMonster account.

Upon activation, go to OptinMonster » Settings in your WordPress admin area and then click on the ‘Connect an Existing Account’ button.

Connect your website to your OptinMonster account

This will bring up a popup where you will be asked to give permission to connect your account to your WordPress website.

After that, you need to head over to the OptinMonster » Campaigns page and click on the Add New button to create your first campaign.

Create your first OM campaign

Next, you’ll be asked to choose a campaign type and template. We are going to create a lightbox popup, but you can pick any other type of campaign or template if you like.

Choose campaign type and template

This will bring up a popup where you need to enter a name for your campaign and then click on the Start Building button.

Enter campaign name

OptinMonster will now launch the campaign builder. It is a drag and drop campaign designer with a live preview of your campaign to the right. You can simply point and click on any item to edit it or add new blocks from the left column.

OptinMonster Campaign designer

Once you are satisfied with your form, you need to click on the Integrations tab on the top and then click on the ‘Add New Integration’ button.

Connect ActiveCampaign to your OptinMonster account

After that, you need to select ActiveCampaign under the Email Provider and fill in the required API URL and Keys. Click on the ‘Connect ActiveCampaign’ button to continue.

OptinMonster will now connect to your ActiveCampaign account. After that, you need to select your email list from the drop down menu.

Select your email list

Next, you need to switch to the Publish tab and change your campaign status to Published. Don’t forget to click on the Save button to store your settings.

You can now click on the close button to exit the campaign builder.

This will bring you to the campaign settings page. From here, you can choose where you want to display your campaign. You can target your campaign to a specific page, geographic location of your visitors, traffic referral source, and more.

Campaign output

Change the campaign status to published and it will go live on your website.

You can now visit your site to see your ActiveCampaign signup form appear in your OptinMonster campaign.

OptinMonster campaign preview

Bonus: OptinMonster also works with all other website builder platforms including Shopify, BigCommerce, and more, so you can use it to connect ActiveCampaign with any other website builder of choice.

3. Connect ActiveCampaign to WordPress Using Formidable Forms

Formidable Forms is the most popular advanced WordPress form builder that allows you to create complex forms with out writing a single line of code.

For instance, you can use Formidable Forms to create directory forms, listing forms, calculators, and more. It also comes with the ActiveCampaign addon which allows you to easily connect forms to your ActiveCampaign account.

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

Upon activation, you need to visit Formidable » Global Settings to enter your license key or connect WordPress to your Formidable Forms account.

Connect Formidable Forms account to WordPress

After that, visit the Formidable » Addons page and install the ActiveCampaign addon.

ActiveCampaign addon

Now let’s connect Formidable Forms to your ActiveCampaign account.

Go to the Formidable » Global Settings page and switch to the ActiveCampaign tab. Here, you need to enter your ActiveCampaign API URL and key.

Enter ActiveCampaign API keys

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

You are now ready to create a form to capture emails for your ActiveCampaign list.

Next, head over to Formidable » Forms page and click on the Add New button. This will bring up a popup where you can select a template for your form. For the sake of this tutorial we will be using the newsletter sign up form template.

Formidable new form

After that, enter a name for your form and then click on the Create button.

This will load the Formidable Forms builder where you can edit your form, add or remove form fields, rearrange them and more.

Edit your form in Formidable Forms

Once you are satisfied with your form, switch to the Settings tab and click on the Actions & Notifications menu. After that, look for the ActiveCampaign in the available actions and click to select it.

Formidable form actions

After that, you need to select your email list and map your form fields to ActiveCampaign contact fields.

Map form fields to your email list

Once you are finished, don’t forget to click on the Update button to save your form.

Formidable Forms make it super easy to add your form anywhere on your WordPress blog. For posts and pages, you can use the Formidable Forms block to insert the form.

Formidable Forms block

For sidebars and widget-ready areas, you can use the Formidable Forms widget to display the form.

Formidable Forms widget

4. Connect ActiveCampaign to WordPress Using MemberPress

MemberPress is the most popular WordPress membership plugin. It allows you to easily sell subscriptions, online courses, and build online communities.

MemberPress also comes with an ActiveCampaign Addon that allows you to easily send emails to customers and segment members into groups and more.

First, you need to install and activate the MemberPress plugin. For more details, see our guide on how to build a membership website in WordPress.

Once you have set up MemberPress, go to MemberPress » Addons page. From here, you’ll notice two ActiveCampaign Lists and ActiveCampaign Tags addons.

They both work similarly, but the Tags version allows you to segment membership groups and create more effective email funnels.

Once you have installed the addon, go to the MemberPress » Settings page and switch to the Marketing tab.

Connect ActiveCampaign to MemberPress

From here, you need to check the box next to ‘Enable ActiveCampaign’. After that, you need to enter the first part of your API URL into the account ID field and API key below it.

MemberPress will then attempt to connect to your ActiveCampaign account, and you will be able to select your email list in the options below.

Finally, click on the ‘Update Options’ button to store your settings.

That’s all, your MemberPress users will now be subscribed to your ActiveCampaign email list.

5. Connect ActiveCampaign to WordPress Using Plugin

For this method, we will be using ActiveCampaign’s own free plugin. This method is easier, but doesn’t give you the flexibility of other methods on this list.

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

Upon activation, you need to visit Settings » ActiveCampaign and enter your API URL and key.

ActiveCampaign connect account

Click on the ‘Connect’ button to continue.

The plugin will then connect your WordPress website to your ActiveCampaign account. After that, you can click on the ActiveCampaign Forms link on the settings page which will take you to ActiveCampaign website.

From here you can create forms that you want to use on your WordPress website.

Create ActiveCampaign form

ActiveCampaign allows you to design your form by choosing different styles, colors, and more.

Once you have created your form, you can return to the plugin’s settings page on your WordPress website and click on the Update Settings button.

The plugin allows you to embed forms in posts and pages using the AC Forms block.

ActiveCampaign Forms block

You can also add the form to your sidebars or widget-ready areas using the form shortcode that you can copy from plugin’s settings page.

We hope this article helped you connect your WordPress site with ActiveCampaign. You may also want to see our guide on how to quickly grow your email list with practical tips, and our expert comparison of the best business phone 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.

The post How to Connect Your WordPress Site With ActiveCampaign (5 Methods) appeared first on WPBeginner.


June 09, 2021 at 04:22PM

Tuesday, June 8, 2021

How to Display Most Commented Posts in WordPress (2 Ways)

Do you want to display your most commented posts in WordPress?

Highlighting your most commented posts helps your visitors find your best content, increase pageviews, and boost website engagement.

In this article, we’ll show you how to display the most commented posts in WordPress, step by step.

How to display most commented posts in WordPress (2 ways)

Why Display the Most Commented Posts in WordPress?

Your most commented posts have very high levels of user engagement. By displaying your popular posts, you encourage new readers to join the discussion and spend more time on your WordPress website, while boosting your social proof.

When your visitors stay on your site longer, this gives you a chance to convince them to read another post, join your email list, or make a purchase.

Plus, when new visitors leave a comment, they become part of the community. This can help you build trust with your readers over the long term.

That being said, let’s take a look at how to simply display your most commented posts in WordPress using 2 methods.

Method 1: Display Most Commented Posts With a Plugin in WordPress

There are many different WordPress popular posts plugins that you can use to display your popular articles, but the simplest to use is MonsterInsights.

It’s the best analytics solution for WordPress used by over 3 million websites. With this plugin, you can easily display your most commented posts anywhere on your website.

First thing you need to do is install, activate, and set up the plugin. For more details, see our beginner’s guide on how to install Google Analytics in WordPress.

Note: there is a free version of MonsterInsights, but we’re using the pro version for this tutorial since it includes the popular posts feature.

Upon activation, navigate to Insights » Popular Posts and then click the ‘Popular Posts Widget’ menu item.

MonsterInsights popular posts

On this screen, you will control the appearance of your most commented posts.

Simply select the ‘Theme’ you want to use for your most commented posts. The theme operates similar to your WordPress theme and will control the overall design of the most commented posts widget.

There are a ton of other customization options on this screen as well.

For example, in the ‘Theme Preview’ meta box, you can display your most commented posts in a ‘Wide’ format below your content, or ‘Narrow’ format to the right of your content.

MonsterInsights display options

After that, you have more options for customizing the design.

For example, you can change the size and color of the title, icon, and background.

Customize how most commented posts display

MonsterInsights will automatically save any changes you make to your most commented posts display settings.

Once you’re finished customizing the appearance of your commented posts, it’s time to display your popular posts by comments.

In the ‘Sort By’ meta box, simply select the ‘Comments’ button.

Sort by most commented

MonsterInsights will automatically display your most commented posts.

You have a few different options for adding your popular posts to WordPress. You can choose manual or automatic placement.

If you choose ‘Automatic’ placement, then the plugin will add your most commented WordPress posts directly after the last paragraph of your blog posts.

Automatic popular posts placement option

The other option is to display your most commented posts manually. If you select the ‘Manual’ option, then you can add the popular posts widget with a Gutenberg block or a shortcode.

To do this, open up a page or post where you want to display your most commented posts.

Then, click the ‘+’ icon and select the ‘Popular Posts’ block.

Select MonsterInsights popular posts block

This will automatically add your most commented posts to your page.

Make sure you click ‘Update’ or ‘Publish’ to make your changes live. Now when your users visit the page, they will see your most commented posts displayed.

Update or publish page changes

Display Most Commented Posts in Your WordPress Sidebar

If you want to display your most commented posts in your WordPress sidebar, then go to Appearance » Widgets.

After that, find the ‘Popular Posts — MonsterInsights’ widget and drag it to your sidebar widget area.

MonsterInsights popular posts widget to sidebar

Next, you can give your widget a title, choose the number of posts to display, select the theme, change colors, and more.

The customization options are similar to the widget customization settings above.

Once you’re done making changes click ’Save’, and your popular posts with the most comments will be live on your WordPress blog.

Most commented posts sidebar example

Method 2: Display Most Commented Posts Without a Plugin in WordPress

The second method involves adding code to your WordPress files. If you haven’t done this before, then check out our beginner’s guide to pasting snippets from the web into WordPress.

However, there are some downsides to using this method. First, it involves adding code to WordPress, so it’s not very beginner friendly.

Second, the code isn’t as optimized for performance as the MonterInsights plugin, so it will increase the server load, and it can slow down your website.

That being said, let’s take a look at how you can display most commented posts in WordPress without a plugin.

You’ll want to add the following code to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.

function wpb_most_commented_posts() { 
// start output buffering
ob_start();
?>
<ul class="most-commented">
<?php 
// Run WP_Query
// change posts_per_page value to limit the number of posts
$query = new WP_Query('orderby=comment_count&posts_per_page=10'); 
 
//begin loop
while ($query->have_posts()) : $query->the_post(); ?>
 
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <span class="wpb-comment-count"><?php comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?></span></li>
<?php endwhile; 
// end loop
?>
</ul>
<?php
 
// Turn off output buffering
 $output = ob_get_clean(); 
 
//Return output 
return $output; 
}
// Create shortcode
add_shortcode('wpb_most_commented', 'wpb_most_commented_posts'); 
 
//Enable shortcode execution in text widgets
add_filter('widget_text', 'do_shortcode');

The code above will run a database query and fetch 10 posts ordered by the highest comment count. Then, it uses output buffering to create a shortcode you can use to display the posts.

The last line of the code creates a shortcode that you can use in your posts, pages, and widget areas.

To display your popular posts, all you need to do is add the following shortcode to your WordPress site.

[wpb_most_commented]

For more details, see our beginner’s guide on how to add a shortcode in WordPress.

If you want to add thumbnails next to your post titles, then add the following line of code right after <li> tag in the code above.

<?php the_post_thumbnail(array(40,40)); ?>

This code will define the custom size for the post thumbnail images. You can adjust the size to meet your needs.

Once you’ve done that, you can style how your most commented posts will display.

To do this you can modify the .most-commented and .wpb-comment-count CSS classes in your WordPress theme’s stylesheet.

For more details, see our guide on how to easily add custom CSS to your WordPress site.

You can use the following CSS to get started:

.most-commented li { 
border-bottom:1px solid #eee; 
padding-bottom:3px; 
} 
.most-commented li :after { 
clear:both;
} 
.most-commented img { 
padding:3px;
margin:3px;
float:left;
}
.wpb_comment_count a, .wpb_comment_count a:active, .wpb_comment_count a:visited, .wpb_comment_count a:hover { 
color:#FFF;
}

We hoped this article helped you display the most commented posts in WordPress. You may also want to see our ultimate WordPress SEO guide to get more traffic, and our list of the best WordPress plugins for 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.

The post How to Display Most Commented Posts in WordPress (2 Ways) appeared first on WPBeginner.


June 08, 2021 at 05:00PM

Monday, June 7, 2021

How to Add a Button in Your WordPress Header Menu

Do you want to add a button in your WordPress header menu?

Adding a button in the header navigation menu lets you create a more noticeable call to action. It can get more clicks to your most important pages and create a better user experience by helping your visitors take action.

In this article, we’ll show you how to easily add a button to your WordPress header menu.

Adding buttons in WordPress navigation menu

Why Add a Button in WordPress Header Menu?

WordPress navigation menus are usually plain text links that all look the same. In terms of design, all the links are given the same importance and weight.

Header navigation menu with plain links

What if you wanted to add a link to an online order form, a login or sign up page link, or a buy now link? These important calls to action will look just like the rest of the links in the header menu.

Changing important links in your WordPress navigation menu into buttons will make them more noticeable. This helps users easily find them, improving their engagement and experience on your website.

Navigation menu with a button

By default, WordPress has options to add buttons in WordPress posts and pages using the Buttons block. However, it does not have a built-in option to add buttons in navigation menus.

Luckily, there is an easy hack to convert any link in your WordPress navigation menu into a button.

That being said, let’s take a look at how to add a button in your WordPress header menu without installing a plugin.

Adding a Button in Your WordPress Header Menu

First, you need to add the link that you want to convert into a button into your WordPress navigation menu.

Simply go to the Appearance » Menus page in your WordPress dashboard and add the link to your navigation menu.

Add a link to WordPress menu

After that, you need to click on the Screen Options button at the top. This will reveal a fly down menu with a bunch of options. You need to check the box next to the ‘CSS Classes’ option.

Show CSS classes in Screen Options

Now, scroll down to your menu and click to expand the menu item that you want to convert into a button.

Add custom CSS class to a link

You’ll notice a new CSS class option in the menu item settings. Here, you need to enter a class name. You can call this CSS class any unique name you want, but for the sake of this tutorial we’ll call it menu-button.

After entering a name, click on the ‘Save Menu’ button to store your changes.

Now that we have added our own custom CSS class to the menu item, we can design it by adding our own custom CSS code.

Simply go to Appearance » Customize to launch the WordPress theme customizer.

You’ll now see a live preview of your website on the right and a bunch of theme settings in the left column.

Additional CSS option in WordPress theme customizer

Now you need to click on the Additional CSS tab to expand it. This will show you a box where you can add your custom CSS code.

Here, you can copy and paste the following CSS code as a starting point.

.menu-button { 
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active { 
color:#fff !important;
}

As soon as you add the CSS code, the theme customizer will automatically apply it to your website preview, and you will be able to see the changes take affect.

Don’t worry, the changes won’t be live on your website until you click the Publish button.

Menu button preview

Feel free to play around with the CSS as much as you like. You can change background color, link text color, add border, and more.

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

Wasn’t this easy?

You can use this trick to not just add buttons to your header menu, but you can also use it to highlight any link in your WordPress navigation menu.

We hope this article helped you learn how to add a button in your WordPress header menu. Want to see how users interact with your buttons? See our guide on how to track conversion rate in WordPress. Next, check out our list of the best live chat software 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 Button in Your WordPress Header Menu appeared first on WPBeginner.


June 07, 2021 at 03:47PM