Tag - Create

How to Create a Shopping Cart in WordPress with BigCommerce


There are several WordPress eCommerce plugins that allow you to add a shopping cart to your website. However, if you want to keep your eCommerce store separate for better speed and security, then your options are quite limited.

BigCommerce is an all-in-one eCommerce platform that allows you to create a powerful online store without dealing with the technical hassle.

In this article, we will show you how to easily create a shopping cart in WordPress with BigCommerce, step by step.

Adding a shopping cart in WordPress with BigCommerce

Understanding BigCommerce for WordPress

BigCommerce is a highly scalable and fully-hosted eCommerce platform.

It is an all-in-one solution which provides you with everything you will need to create and run an online store, including hosting, design, content, payment solutions, and marketing tools.

WordPress on the other hand is the most popular content management system (CMS) used by over 34% of all websites online. You can use it to create a content-focused blog, a business website, or even an online store.

You can now integrate these two powerful platforms together and enjoy the best of both worlds.

Using BigCommerce as your eCommerce plugin in WordPress gives you the following advantages:

  • Smooth content-and-commerce integration: BigCommerce for WordPress lets you enjoy the industry-leading eCommerce capabilities without compromising the powerful content management features of WordPress.
  • Minimum usage of server resources: You can use BigCommerce as your eCommerce backend for things like catalog management, processing payments, and managing fulfillment logistics, and more. This means that your eCommerce store will have minimal impact on your WordPress hosting server resources.
  • High scalability: BigCommerce lets you scale your online business without losing speed or uptime.
  • Enhanced eCommerce security: BigCommerce takes care of all your eCommerce security needs. It gives you a secure PCI compliant checkout experience.
  • Built-in payment options: You can use popular payment options like PayPal powered by Braintree at the lowest credit-card processing rates.
  • Sell across multiple channels: Each website works as a ‘channel’ in BigCommerce. You can connect a BigCommerce account with multiple WordPress sites (channels), multi-site network, or social accounts and sell your products.

Wondering how BigCommerce stacks up against WooCommerce? Take a look at our article on BigCommerce vs WooCommerce for a side by side comparison.

With that said, let’s go ahead and see how to create a shopping cart in WordPress with BigCommerce.

Getting Started with BigCommerce

First, you need to visit the BigCommerce website and click on the ‘Get Started’ button.

Sign up for BigCommerce

This will bring up a signup form. Follow the on-screen instructions to complete the process.

Sign up for BigCommerce account

Once you have signed up, you’ll reach the BigCommerce dashboard where you will be asked to connect your WordPress website.

BigCommerce dashboard

Your BigCommerce store is now ready, let’s connect it to your WordPress website.

Creating a Shopping Cart in WordPress Using BigCommerce

First thing you need to do is install and activate the BigCommerce for WordPress plugin. For detailed instructions, see our guide on how to install a WordPress plugin.

Once the plugin is installed and activated, a new navigation menu labeled BigCommerce will be added to your admin panel, and the setup wizard will open. First, it will ask you to connect your account or create a new account.

Connect with BigCommerce Account or Create New Account

Click on the ‘Connect My Account’ button to continue.

This will bring up a popup where you’ll be required to login to your BigCommerce account. After that, you will be asked to confirm that you want the plugin to connect with your BigCommerce account.

Confirm BigCommerce connect

Click on the ‘Confirm’ button to continue.

This will close the popup, and you will see a new BigCommerce screen on your WordPress site. From here you need to set up BigCommerce for WordPress.

Set Up a Channel for WordPress Site in BIgCommerce

Enter a channel name, select an automatic listing option, and click on the Continue button. If you choose ‘Yes, automatically list new BigCommerce products on this channel’, all new products will automatically sync and appear on your WordPress site.

On the next screen, you can choose how you want to use BigCommerce for WordPress. You can select ‘Full Featured Store’ if you’re going to transform your WordPress site into a full-fledged store. Alternatively you can choose ‘Simple Blogging’ if you only want to add a shopping cart page in your blog. The Simple Blogging mode also allows you to add individual products into posts and pages.

Choose How You Want to BigCommerce for WordPress

Next, you will see the BigCommerce Settings page on your screen. It includes all the settings you can configure from your WordPress dashboard.

BIgCommerce for WordPress Settings

First, it will sync your BigCommerce products automatically depending on the option you chose in the earlier step. In the screenshot above, the plugin is syncing all of our sample products.

The first option in your WordPress BigCommerce is Product Sync. You can click on it to choose the sync frequency, automatic listing, and import batch size.

BigCommerce for WordPress Product Sync Options

Next, you can configure Cart and Checkout options. Simply check the Enable Cart option to allow your users to add products to the cart. You can also enable embedded checkout if you want to show checkout form in WordPress.

BIgCommerce for WordPress Cart and Checkout Options

As shown in the screenshot above, the cart page is selected by default. It is because the plugin automatically creates required pages, including the cart page during the setup process.

You can view the default pages by going to Pages » All Pages from your dashboard.

BigCommerce for WordPress Default Pages

Next, you can see Gift Certificate Settings. You can enable gift certificates if you want to let your users purchase gift certificates for store credit.

BigCommerce for WordPress Gift Certificates Settings

The Currency Settings let you see the default currency, and price display option, including or excluding tax.

BigCommerce for WordPress Currency Settings

Next, you will see Account and Registration settings. Login page, account profile page, an order history page, and other important pages are selected by default. You can add a support email as well.

BigCommerce for WordPress Account and Registration Settings

There are more options for Analytics settings, product reviews, API credentials, channel, and diagnostics. You can configure them now or skip them to set up later.

BIgCommerce for WordPress Analytics and Other Settings

After that, don’t forget to click on the ‘Save Changes’ button at the top right corner.

Save Settings BigCommerce for WordPress

Now you can go to BigCommerce » Products to view the sample products added to your website by default.

BigCommerce Sample Products in WordPress dashboard

You can also preview your Products page in the frontend by clicking on the ‘View Products’ link at the top.

View BigCommerce Products in WordPress

Here’s how your BigCommerce shopping cart would look in WordPress with the default Twenty Nineteen theme.

Shopping Cart in WordPress with BigCommerce

Managing Your Products in BigCommerce

The account that we created above is a free trial account with sample products. So the next step is to configure your store settings and add real products in BigCommerce.

1. Adding Products to Your BigCommerce Store

You can add and manage your BigCommerce products from the Products menu. There you will see the sample products added to your store by default.

BigCommerce Products Page

You can delete or replace these products with your actual product details. To add new products, click on the ‘Add’ button at the top.

Add New Products to BigCommerce Store

Add the name of your product, price, tax details, choose product categories, product type, and more information. You can also add the product description, shipping details, and availability options from the sections below.

Once done, save your product. After that, you can add your product images and videos by clicking on the Images & Videos link.

Add Product Images to BigCommerce Store

Similarly, you can review more options like Inventory, Options & SKUs, Custom Fields, etc. from the options on the top. Once done, don’t forget to save your product.

The Products menu also lets you import or export products, manage product categories, product filtering, brands, Product SKUs, etc.

Once you add new products, categories, brands, etc. in your BigCommerce store, they will be automatically synced to your WordPress site.

2. Setting Up Payment Options

BigCommerce has built-in payment options. Visit Store Setup » Payments to configure your payment settings.

BigCommerce Payment Settings

You can quickly set up PayPal, credit cards, offline payment methods like bank deposit, other online payment methods like 2Checkout, Amazon Pay, and also set up digital wallets.

3. Select a Plan and Upgrade Your BigCommerce Account

BigCommerce is primarily a paid platform for building online stores. The free trial version expires in 15 days, so you should upgrade your account before it expires.

Go to the ‘Select a Plan’ button at the top right corner and click on that.

Select a BigCommerce Plan

After that, you will see the available pricing options.

BigCommerce Pricing

The BigCommerce Standard plan is available for $29.95 per month.

Displaying Your BigCommerce Products in Your WordPress Site

Now that you have added products and set up the store options in BigCommerce, you can display products in your WordPress site and start selling.

There are multiple ways you can add your BigCommerce products to your WordPress site. We will show you two of the easiest methods below.

1. Add Your Products Page to Menu

The easiest way to show your BigCommerce products page in WordPress is by adding the page to your WordPress menu. Visit Appearance » Menus and create a new menu.

Create a New Menu in WordPress

For detailed instructions, see our beginner’s guide on how to add a navigation menu to WordPress.

After that, you can click on the Custom Links option and enter your Products listing page URL.

You can find this page by going to BigCommerce » Products » View Products from your dashboard. The page URL usually is your domain name with /products/ at the end. For example, http://example.com/products/.

Add a Custom Link to WordPress Menu

Next, enter a link text, and click ‘Add to Menu’ button. You can also add the Cart page to the menu.

After that, select Display location for your menu and save the menu.

Save Your WordPress Menu

Once done, visit your website to see new menu items in action.

WordPress Primary Menu Demo

2. Embed Your Products to Your Posts in WordPress

Another simple way to add your BigCommerce products to your WordPress blog is to embed individual products in posts and pages.

This approach is more suitable when you only have a couple of products, and you want to add them to your landing pages or blog posts.

Open your WordPress post editor and click on the Add New Block icon. After that, you can select the BigCommerce Products block.

Add BIgCommerce Products Block to Your Post

Once done, your BigCommerce store products will appear in your post editing area.

BigCommerce Products List in WordPress Post

You can customize your block, add content, and publish your post.

Final Thoughts

BigCommerce is an excellent eCommerce platform for WordPress, and a powerful alternative for WooCommerce.

Often users ask us to compare BigCommerce with Shopify, and in our eyes BigCommerce is a better platform because it provides a robust integration with WordPress whereas Shopify does not.

However for full WordPress integration, WooCommerce is our go-to pick. You can see our step by step tutorial on how to start an online store in WordPress for more details.

We hope this article helped you learn how to create a shopping cart in WordPress with BigCommerce. You may also want to see our guide on the best email marketing services and the best WordPress plugins for business websites.

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 Create an Auto Loan / Car Payment Calculator in WordPress


Do you want to create an auto loan or car payment calculator in WordPress?

If you are in the car dealership business, then adding an auto loan payment calculator on your website can help increase sales.

It helps your website visitors get an estimate for the monthly loan payment, compare the loan offers, and find the best deal on their car purchase.

In this article, we will show you how to easily create an auto loan car payment calculator in WordPress step by step.

Creating Auto Loan Car Payment Calculator in WordPress

What is a Car / Auto Loan Payment Calculator?

A car/auto loan payment calculator is an automated tool that allows users to get estimates for a monthly loan payment, check amortization schedule, and calculate the total loan amount.

It enables the users to perform a complete auto loan calculation with an account of sales tax, dealer fees, trade-in value, interest rate, length of the loan, and more.

An auto loan payment calculator is especially useful for car dealership websites and auto loan financing businesses.

Adding a loan calculator on your site helps both you and your website visitors.

The users can see different financing plans available to buy a car and choose the best plan that suits their budget.

On your end, it increases user engagement and sales because users can calculate automobile loan right on your website without having to open another calculator app.

Creating an Auto Loan and Car Payment Calculator in WordPress

In the past, creating an auto loan car payment calculator would require deep coding knowledge because you had to program mathematical calculations on your website. This meant hiring a WordPress developer.

Luckily now you can build an auto loan calculator without any coding knowledge with Formidable Forms, the most advanced WordPress form plugin.

Often many developers use Formidable Forms to save time when building websites for clients.

Formidable Forms Advanced WordPress form plugin

Formidable Forms plugin offers a powerful car payment calculator template which lets you build an auto loan calculator with just a few clicks. You just need to choose the template, customize it to your needs, and then it is ready to use.

The car payment calculator template has the loan calculation formula already set up, so you don’t need to worry about that. It enables anyone, including an absolute beginner to create a fully functional loan calculator in WordPress.

Similarly, you can create other useful calculator forms like a mortgage calculator, sample WooCommerce product configurator, and net promoter score (NPS) survey form. Also, you can use it to create simple contact forms, user registration forms, online quiz, web directory, etc.

Formidable is a complete form solution. You don’t need a separate loan calculator plugin, user registration form plugin, or contact form plugin.

With that said, let’s take a look at how to create an auto loan calculator on your WordPress site.

Step 1: Install Formidable Forms on Your WordPress Site

First thing you need to do is to install and activate the Formidable Forms plugin. You need to get at least the Formidable Pro Business plan to use the car payment calculator feature.

For detailed instructions, see our step by step guide on how to install a WordPress plugin.

Once the plugin is installed and activated, you will see a notification at the top asking you to add your license key.

Add Your Formidable Forms Pro License Key

Clicking on the link will take you to the Global Settings page with the License Key field. You will need to enter your Formidable Forms license key there, and then click on the ‘Save License’ button. You can find the license key in your Formidable Forms account.

Save Your Formidable Forms License key

Once done, it will show the license activation success message. You can refresh your page to load the premium features.

Step 2: Build an Auto Loan and Car Payment Calculator in WordPress

Now that you have successfully set up Formidable Pro plugin on your site, you are ready to build a car payment calculator form.

Visit Formidable » Forms page from your dashboard to add a new form. On this screen, you will see a Contact Us form added by default. You need to click on the ‘Add New’ button to create a new auto loan calculator form.

Add New Formidable Form

On the next screen, you will see many pre-made form templates. You want to look for the Car Payment Calculator template under the Premium Templates section.

Choosing Car Payment Calculator Form Template in WordPress

If you want to see how the auto loan calculator form looks, you can click on the Preview button. It will open the form preview in a popup window.

Car Payment Calculator Form Preview WordPress

To build a car payment calculator form, you need to click on the Create Form button. After that, it will show a popup where you need to add your form name, form description, and then click on the Create button.

Name and Create Car Payment Calculator in WordPress

Next, it will open the Car Payment Calculator form builder for you.

Car Payment Calculator Form Builder in WordPress

As shown in the above screenshot, you will find a ready-made auto loan calculator. You can use the form as it is, or customize it to match your needs.

You can customize the form field label, default value, placeholder text, etc. for the form fields at the top.

Customize Your Car Payment Calculator

But you must be very careful when changing the Advanced options for the Loan Calculation and Monthly Payment fields below. That is because they include the mathematical calculation formula.

Auto Loan Calculator Form Advanced Fields

Once you have configured all the fields in the builder, you can review your form settings by clicking on the Settings option next to the Build tab.

Car Payment Calculator Form General Settings

First, you will see the General Form Settings. You can modify form title, description, and configure what to show when a user submits the form.

Next, you can configure form actions and notifications to be triggered when an entry is created, updated, or imported. By default, you will see the email notification enabled. You can add other actions from the list as needed.

Car Payment Calculator Form Notification Settings

Similarly, you can review all the other settings on the left column. Once you are done with the form configuration, click on the ‘Update’ button at the top right corner.

Update Your Car Payment Calculator Form in WordPress

After that, you will see the settings/form successfully updated message. Now you can close the form builder by clicking on the ‘Close’ button at the top right corner of the screen.

Car Payment Calculator Form Updated

Step 3: Adding the Car Payment Calculator on Your WordPress Site

Now that you have a car payment calculator form ready for use, you can add it to your website.

Simply create a new page or edit an existing one to add the car payment calculator. On your page editor, you need to click on the ‘Add New Block’ icon and then select Formidable Forms block.

Add Formidable Forms Block to Car Payment Calculator Page

After that, you need to select the auto loan/car payment calculator form that you created earlier from the dropdown option. Once done, WordPress will automatically load the form.

Adding Car Payment Calculator in WordPress Page

Once added, you can publish page and then preview it to see how it works. For example, here is how it looks on our demo website.

Auto Loan Car Payment Calculator in WordPress Site preview

We hope this article helped you learn how to create an auto loan car payment calculator in WordPress. You may also want to see our guide on the must have WordPress plugins and best email marketing 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.



Source link

How to Create a Custom Home Page in WordPress


Often users ask us if it’s possible to create a custom homepage in WordPress.

By default, WordPress shows your blog posts on the homepage. However as a business website, you may want to create a more engaging homepage that helps users find what they need and boost your sales conversion.

In this article, we will show you how to easily create a custom homepage in WordPress. We will show multiple methods, and you can choose the one that’s easier for you.

Creating a custom homepage in WordPress

What is a homepage?

A homepage is a default introductory page or the frontpage of a website. It is the page that appears when someone enters your website’s domain name in their browser’s address bar.

Homepage example

The main purpose of the homepage is to introduce users to your website or business. Ideally, it should provide users essential information about your business, so they can continue exploring other pages on your site.

By default, WordPress displays your recent blog posts on the homepage. This is not good as it only shows a few of your current articles.

If you run a business website, then the default homepage does not tell users about your business, products or services. It also doesn’t provide users a way to contact you.

The good news is that WordPress already comes with a built-in functionality to create custom home page.

Selecting a Custom Page to be Used as Homepage in WordPress

WordPress allows you to easily use any page on your website as your homepage. You can simply go to Pages » Add New page inside WordPress admin area to create a new page.

Let’s give this page a title ‘Home’ and publish it. You will use this page as your custom homepage.

Don’t worry about layout or design at the moment. We will show you how to design your homepage later in this article.

Now, if you want to run a blog on your site, then you need to create a separate blog page to display your posts.

Once again, go to Pages » Add New page and create a page titled ‘Blog’. Go ahead and publish the blank page.

After creating the pages, you need to visit Settings » Reading page in your WordPress admin. From here select ‘A static page’ option under ‘Your homepage displays’ section.

Select home and blog pages

Next, you need to select the homepage and the blog pages you created earlier.

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

Now that you have set up a page to be used as your custom homepage, let’s start designing the custom home page for your WordPress site.

Method 1. Create a Custom Homepage in WordPress using Gutenberg

WordPress introduced a new block-based eidtor called Gutenberg in December 2018. This new editor allows users to not just write content but create beautiful layouts as well.

It uses blocks for each content element which enables you to organize content blocks to create a page structure that you like.

WordPress includes blocks that can be used for design purposes like cover images, columns, tables, text and media, galleries, and more.

Editing your custom homepage layout using Gutenberg

Each block comes with its own settings, which allows you to customize its appearance to meet your design requirements.

You can extend available blocks with Gutenberg block plugins to add more blocks to your arsenal. These plugins allow you to use advanced elements like testimonials, sliders, services, and other common design features.

Using advanced block library plugins to make homepage layout

You can also use Gutenberg ready WordPress themes which give you more flexibility to work with blocks.

We recommend using Astra, it comes with Gutenberg website templates that you can install using their Astra Starter Sites plugin.

Once you import a template, you can edit it using the default WordPress editor and create a highly professional looking homepage for your website.

Method 2. Create a Custom Homepage in WordPress using Page Builders

This method is very easy and does not require any coding or design skills. For this method, you will be using a WordPress page builder plugin.

A page builder plugin allows you to easily create custom page layouts by using a simple drag and drop interface.

We recommend using Beaver Builder because it is the most beginner-friendly page builder plugin on the market. It comes with dozens of custom homepage templates that you can install with a single click.

Once installed, you can edit the template using point and click tools. You can replace content and images with your own content, and even extend the template by adding more modules, widgets, and sections.

Creating a custom homepage using Beaver Builder

Beaver Builder also gives you access to Beaver Themer, which allows you to make your own custom WordPress theme without writing any code.

For more details, see our guide on how to easily create custom WordPress layouts using Beaver Builder.

As an alternative, you can also try Elementor. It is also an immensely popular WordPress page builder plugin. It also comes with drag and drop templates and an easy to use interface.

Creating a homepage layout using Elementor

For details, see our tutorial on creating custom page layouts with Elementor.

Method 3. Manually Create a Custom Homepage in WordPress (Coding Required)

This method is not recommended for beginners as it requires coding. You need to be familiar with the WordPress coding practices, PHP, HTML, and CSS to use this method.

Let’s see how this works.

Your WordPress theme is made up of different files. Some of these files are called templates and control the display of certain areas of your website. See our WordPress template hierarchy cheat sheet for more details.

One of these templates is called front-page.php. If your theme has this template, then WordPress will automatically use it to display your custom homepage.

front-page.php template

However, if your theme does not have it, then you can create one for yourself/

Simply create a blank file and save it as front-page.php. After that you need to upload it to your current theme’s folder on your WordPress hosting account using FTP.

As soon as you upload this file, WordPress will start using it to display your homepage. However, since this file is completely empty, you will see a blank white page.

To fix this, you can start adding your HTML code to display contents of your custom homepage. An easier approach is to use the existing code and templates in your WordPress theme.

For example, you can use the same header and footer. WordPress makes it super easy to include those templates.

Here is a sample code where we removed the content and sidebars while preserving the header and navigation templates from the theme.

<?php /* 
This page is used to display the static frontpage. 
*/ 

// Fetch theme header template
get_header(); ?>
	<div id="primary" <?php astra_primary_class(); ?>>

	<div class="custom-homepage-container"> 

	You custom homepage code goes here

	</div> 

	</div><!-- #primary -->
//Fetch the theme footer template 
<?php get_footer(); ?>

Tips on Making an Effective Custom Homepage in WordPress

Your website’s homepage is the most important page on your website. Users look at it to learn more about your business, products, and services.

We recommend keeping your homepage design as simple as possible. On our own websites, we have learned that our users find simpler layouts more helpful.

Try to avoid clutter, but don’t hide important information that your users would want to see on the homepage. You also need to prioritize which content appears first in your layout.

Write down the goals you want to achieve before making a custom homepage for your website. This exercise will help you come up with a clear design goal.

For most businesses and blogs, the number one goal is to convert website visitors into customers. To achieve this, you’ll need OptinMonster.

It is the best WordPress popup plugin and lead generation software. It helps you convert website visitors into subscribers and paying customers.

Next, you would want to track how your custom homepage is performing. For this, you need to install Google Analytics on your website. It helps you see where your users are coming from and what they do on your website.

You would also want to make it easier for your users to contact you. For this, you will need the WPForms plugin which is the best WordPress form plugin on the market.

You can also add a click to call button your website, so people can easily call your business phone.

Lastly, we recommend you to look around at your competitors and other popular sites in your industry/niche. We are not asking you to copy their design, but to learn from their best practices and then apply it on your own homepage layout.

We hope this article helped you easily create a custom homepage in WordPress. You may also want to see our proven tips to increase your blog traffic.

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

The post How to Create a Custom Home Page in WordPress appeared first on WPBeginner.



Source link

How to Create Compact Archives in WordPress (Step by Step)


By default, WordPress comes with a widget called Archives, which allows you to display monthly blog post archive links.

Now, if you started a blog few years ago, then this list becomes too long to fit in your WordPress sidebar.

You can choose to show archives as a drop-down menu, but that makes them less noticeable.

In this article, we will show you how to create compact archives that fit in anywhere you want and look much better.

Creating compact archives in WordPress

Why and When You Need Compact Archives in WordPress?

As we mentioned earlier, the default WordPress archives widget is limited in options. You can either display archives as a long list or a dropdown menu.

Due to this issue, many popular blogs don’t display archives on their website at all.

By creating compact archives, you can display them in your WordPress sidebar without taking much space. You can also display them on your about page or a dedicated Archives section.

That being said, let’s take a look at how to easily add compact archives in WordPress.

Adding Compact Archives in WordPress

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

Compact Archives plugin is developed and maintained by the WPBeginner team. We use it on our own website and recently updated it to add Gutenberg block support.

The plugin offers three styles to display compact archives on your website.

Style 1. Relaxed three-letter month initials

Three letter monthly archives

Style 2. Compact Monthly Initials

Compact archives with initials only

Style 3. Numeric Block

Numeric archives

There are multiple ways to easily display them anywhere on your website.

Let’s start with the easiest one.

Adding Compact Archives in WordPress Posts or Pages

Compact Archives plugin comes with an easy to use Gutenberg block called WPBeginner’s Compact Archives.

If you’re using the new Gutenberg editor in WordPress, then simply edit the post or page where you want to display the archives and add the WPBeginner’s Compact Archives block to your post or page.

Compact Archives block

The block will now appear in the content area of your page. You can click to add a title for your compact archives block and select a style from the block settings on the right.

Compact Archives block settings

Adding Compact Archives to WordPress Sidebar

Another common place to display archive links is your blog’s sidebar. Compact Archives makes it easy to display archive links in your WordPress website without taking too much space in the sidebar.

Simply head over to Appearance » Widgets page and add ‘Compact Archives’ widget to your sidebar.

Contact Archives widget

After that, you can provide a widget title and select a style. Don’t forget to click on the save button to store your settings.

You can now visit your website to see compact archives displayed in your blog’s sidebar.

Display Compact Archives Using a Shortcode

If you are using the older Classic WordPress editor, then you will not be able to use the block to add compact archives in WordPress posts or pages.

Don’t worry, you can still add it by using a handy shortcode.

Simply edit the post or page where you want to display the archives and add the following shortcode.

[compact_archive]

This shortcode will simply show your compact archives. The shortcode accepts the style, before, and after parameters.

To display your compact archives in the block format, you will use this shortcode:

[compact_archive style="block"]

You can also add your own HTML before or after the archives.

In the following shortcode, we have displayed the compact archive in numeric format and wrapped it around paragraph tags.

[compact_archive style="numeric" before="<p>" after="</p>"]

Displaying Compact Archives in Template Files

If you are making a custom WordPress theme or want to display archives in a theme template file, then Compact Archives comes with handy template tags that you can use.

Simply add the following template tag in your code.

<ul> <?php compact_archive(); ?> </ul>

There are also several parameters that you can adjust:


<ul>
<?php compact_archive($style='initial', $before='<li>', $after='</li>'); ?> 
</ul>

These are the same parameters that you can use with the shortcode.

For example, $style == 'initial' will display only month name initials and should fit right inside a sidebar. Using $style == 'block', will fit the main column of a page. Using $style == 'numeric', will display numeric months.

We hope this article helped you easily create compact archives in WordPress. You may also want to see our guide on how to easily create an email newsletter in WordPress to promote your website.

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 Create AMP Forms in WordPress (The Easy Way)


Do you want to create AMP-friendly forms on your WordPress site?

Accelerated Mobile Pages or AMP is a Google project that makes websites load faster on mobile devices.

While AMP offers a great mobile browsing experience by making your webpages load faster, it disables many useful features on your website.

One of them is contact forms. Since AMP uses a limited set of HTML and JavaScript, it cannot load your WordPress forms properly on AMP pages.

But thankfully, now there is an easy solution available. WPForms, the most beginner-friendly WordPress form plugin now helps you create AMP-ready WordPress forms. Their team recently worked with Google to make AMP forms easy for WordPress.

In this article, we will show you how to create AMP forms in WordPress using WPForms (the easy way).

Creating AMP Forms in WordPress (The Easy Way)

Creating AMP Forms in WordPress (Step by Step)

In order to use AMP with WordPress, you need to install and activate the official AMP plugin for WordPress. For more details, see our step by step guide on how to install a WordPress plugin.

Once activated, the plugin will automatically add Google AMP support for your WordPress site.

However, you can change AMP settings for your website by going to AMP » General from your dashboard.

AMP for WordPress Settings

From the AMP settings page, you can enable or disable AMP on your website, choose a website mode for AMP, and choose supported templates.

Once you have configured AMP, the next step is to create an AMP compatible contact form on your WordPress site.

Step 1. Create a WordPress Form with WPForms

To get started, install and activate the WPForms Lite plugin on your site. It is the lite version of the WPForms Pro plugin.

Both the lite and pro version of WPForms allows you to create a basic AMP ready contact form. In our article, we will be using the free version for screenshots.

Once the plugin is installed and activated, you need to head over to WPForms » Add New page to create a new WordPress form.

On the form setup screen, you can choose a form template to get started quickly. You can select the Blank Form if you want to start from scratch.

Form Templates WPForms

Next, it will open the form builder page.

Drag and Drop Form Builder WPForms

From here, you can add or remove form fields. To add a new field to your form, you can simply click on a form field from the left panel, and it will appear in the form builder panel on the right.

After that, you can configure the field options. Simply click on a field, and then Field Options will appear.

Configuring Field Options in WPForms Plugin

Similarly, you can customize all the other fields.

After that, you can click on the Settings tab to configure your form settings.

WPForms General Settings

The General Settings allow you to change your form name, submit button text, submit button processing text, enable anti-spam Honeypot, and more.

Next, you can click on the Notifications tab to set up email notifications to notify you when a user completes the form.

WPForms Notification Settings

Next, you can click on the Confirmation tab to set up a confirmation message to be shown when a user submits the form.

WPForms Confirmation Message Settings

After the configuration is complete, you can save your form.

Step 2. Add Your AMP Form to a Page

Now that your WordPress form is ready, you can add it to a page.

First, you need to create a new page or open an existing one where you want to add the form.

On your page edit screen, click on the Add New Block icon and select the WPForms block.

Add WPForms Block to WordPress Page Editor

After that, you can see the WPForms widget added to your page edit screen. You just need to select the form you created earlier, and the widget will instantly load it in the page editor.

Add Contact Form to WordPress Page with WPForms

Next, you can publish or update your page.

That’s all! You don’t need to configure anything else. The WPForms Lite plugin will add full AMP support to your form now.

If you want to see how it looks, then you can open the page on your mobile phone.

Or you can open the page on your desktop browser by adding /amp/ or /?amp at the end of your page URL. For example, https://www.example.com/contact/?amp.

Adding Google reCAPTCHA to Your AMP Form

By default, WPForms includes anti-spam honeypot to catch and block spam. Additionally, you can use Google reCAPTCHA to reduce spam submissions.

To use Google reCAPTCHA with your AMP forms, you need to register your site for Google reCAPTCHA v3 and get the Google API keys.

Go to the Google reCAPTCHA website and click on the ‘Admin Console’ button at the top right corner of the page.

Visit Google reCAPTCHA website

After that, you need to sign in with your Google account. Once done, you will see the ‘Register a new site’ page.

Register a New Site for Google reCAPTCHA

First, you need to enter your website name in the Label field. Google AMP only supports reCAPTCHA v3, so you need to choose it from the reCAPTCHA type options.

After that, enter your domain name under the Domains section.

Add Domain Name and Owner for Google reCAPTCHA

The Owners section shows your email address by default. You can also add another email if you want.

Next, you need to accept the reCAPTCHA Terms of Service to continue. Also, select the ‘Send alerts to owners’ checkbox, which will allow Google to notify you about problems like misconfiguration and suspicious traffic on your site.

Accept Google reCAPTCHA Terms of Service

Once done, click on the Submit button.

Next, you will see a success message along with the site key and the secret key to add reCAPTCHA on your site.

reCAPTCHA Keys

Now you have the Google API keys to add reCAPTCHA to your forms. However, there is one more adjustment required to ensure AMP compatibility with the reCATCHA. Click on the ‘Go to Settings’ link there.

Next, you will see the reCAPTCHA settings again with ‘Allow this key to work with AMP pages’ checkbox. Simply check the box and click on the Save button below.

Allow reCAPTCHA to work on AMP Pages

Now that you have Google API keys to add reCAPTCHA on AMP forms, you need to open WPForms » Settings » reCAPTCHA page in your WordPress dashboard.

WPForms reCAPTCHA Settings WordPress

On this screen, you need to choose reCAPTCHA v3 option and paste the site key and secret key. After that, click on the Save Settings button.

Now that Google reCAPTCHA is added to WPForms, you can enable it in your forms where needed. Go to WPForms » All Forms and select the form where you want to enable the reCAPTCHA.

Edit a Form Created with WPForms

Once the form setup screen appears, click on the Settings tab and select the General Settings section. At the bottom, you can see ‘Enable Google v3 reCAPTCHA’ checkbox.

Enable Google v3 reCAPTCHA in WPForms

Check the box and then save your form by clicking on the Save button at the top right corner.

After that, you can revisit your contact page and see the AMP form with reCAPTCHA in action.

We hope this article helped you to learn how to create AMP forms in WordPress easily. You may also want to see our guide on how to create GDPR compliant forms 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 Create an Online Course with WordPress (the RIGHT WAY)


Did you know that you can create a successful online course with WordPress?

Selling online courses is a popular online business idea that you can start with a very small investment and no technical knowledge.

WordPress plugins make it easy for you to create an online course without writing any code!

Whether you’re looking to create an online course to sell or simply add an online course for your existing students, this article is for you!

In this guide, we will show you how to easily create an online course in WordPress. We will also show you how to make money from it and make your online course a success.

Easily creating an online course in WordPress

Here are the steps we will cover to help you create an online course with WordPress:

  • What do you need to create an online course
  • Setting up WordPress
  • Install and setup LearnDash (LMS addon for WordPress)
  • Creating your first online course
  • Adding lessons to your online course
  • Adding quizzes and assignments for your course
  • Creating and issuing certificates on completion of the course
  • Selling your online course
  • Promoting your online course

Ready? Let’s get started.

What Do You Need to Create / Sell an Online Course?

You will need the following things to create an online course.

  • A domain name. This will be your website’s address (Example, wpbeginner.com).
  • A WordPress hosting account. This is where your website’s files are stored.
  • A learning management add-on (also known as LMS plugin) to create and manage courses.
  • Your undivided attention for the next 45 minutes.

You can build an online course with WordPress in less than an hour, and we’ll walk you through every step of the process.

Let’s get started.

Step 1. Setting up Your WordPress Website

There are plenty of website builders that you can use to build your website. However, we always recommend WordPress because it offers you the flexibility and freedom to take your website in any direction you want.

There are two types of WordPress, and often beginners end up confusing them.

First, there is WordPress.com which is a hosting service, and then you have the original WordPress.org also known as self-hosted WordPress. See our guide on the difference between WordPress.com vs WordPress.org.

We recommend using WordPress.org because it gives you access to all the WordPress features that you’ll need.

To start a self-hosted WordPress.org website, you’ll need a domain name ($14.99 / year), WordPress hosting ($7.99 / month), and SSL certificate to accept online payments ($69.99 / year).

This is quite a lot of startup money.

Luckily, Bluehost, an officially recommended WordPress hosting provider, has agreed to offer our users a free domain name, free SSL certificate, and a 60% discount on web hosting. Basically, you can get started for $2.75 per month.

→ Click Here to Claim This Exclusive Bluehost Offer ←

After purchasing hosting, head over to our guide on how to create a WordPress website for step by step set up instructions.

Step 2. Install and Setup LearnDash LMS Plugin

Now that your WordPress website is ready, the next step is to install and setup a Learning Management System add-on. This will allow you to create your online course and add it to your website.

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

LearnDash is the best LMS plugin for WordPress. It is an all-in-one solution with complete course management, lesson plans, quizzes, assignments, course progression, and more.

Upon activation, you need to visit LearnDash LMS » Settings page and click on the LMS License tab to enter your email address and the license key.

LearnDash license

Once you have entered the information, click on the ‘Update License’ button to store your settings.

Next, you need to switch to the ‘PayPal Settings’ tab. This is where you will enter your PayPal information to receive online payments and sell your course.

PayPal settings

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

LearnDash also has Stripe and 2Checkout payment gateways available as Addons. You can install those if you don’t want to use PayPal.

We will cover more powerful options for selling your online course with WordPress later in this article.

Once you have configured the basic settings, your LearnDash LMS plugin is ready to go, and you can start creating courses.

Step 3. Creating Your First Course

LearnDash makes it super easy to create and manage online courses.

First, you need to visit LearnDash LMS » Courses page and then click on the ‘Add New’ button.

Add new course

This will bring you to the ‘Add New Course’ screen. You will need to start by providing a title for your course and then adding a detailed description.

Adding new course page

You can use the post editor blocks to create a beautiful course page. You can also add course categories / tags, and a featured image also known as course thumbnail.

Next, you need to switch to the ‘Settings’ tab on the course editor. This is where you can set different options for the course including price, status, etc.

Course settings

Scroll down to the course access settings and from there you can set the course status. You can make a course open and publicly available, free, buy now, recurring, or closed.

Control course access

Selecting ‘Buy now’ will allow you to set a one-time price for your course. The recurring option will allow you to charge enrollees on a recurring basis. You’d be able to set a price and duration for the recurring payment.

Below that, you can select course pre-requisites, points, access expiration, and alter access list options.

Control course options

Once you are satisfied with your course options, you can click on the save or publish button to make your course publicly available.

You can click on the preview button to see your course in action.

Step 4. Adding Lessons to Your Course

Now that you have created your first course. It’s time to add lessons to the course. LearnDash allows you to create highly interactive lessons and then add them to your online course.

There are two ways that you can add lessons and other course content with LearnDash.

The first one is by switching to the ‘Builder’ tab in the course editor. From here you can add lessons, topics, and quizzes to your course.

The course builder in LearnDash

Simply click on the ‘Add Lesson’ button to add a new lesson to your course. This allows you to quickly create a course outline.

The other method is to simply head over to LearnDash LMS » Lessons page and click on the Add New button.

Add new lesson

This will bring you to the lesson editor. First, you need to provide a title for your lesson and then you can start adding lesson content.

Creating a lesson in LearnDash

You can utilize all the usual post editing features. You can add images, galleries, embed videos, and create beautiful content layouts using cover images, columns, and other features.

Once you are satisfied with the lesson content, switch to the ‘Settings’ tab.

Lesson settings

First, you will see the options to control lesson support material, progression, assignment uploads, and lesson timer. Each option has a support icon next to it explaining what it does.

Scroll down to the ‘Lesson Access Settings’ section. From here, you can associate the lesson to your course and control when users can access it.

Lesson access

Using Drip Content Functionality

LearnDash LMS comes with powerful drip content functionality. This means instead of giving away all course materials at once, you can gradually release them.

In the lesson access control settings, you can choose the ‘Enrollment-Based’ option and select the number of days.

Drip control course content and lessons

Once you are satisfied with the lesson, you can click on the publish button to save your lesson.

Your lesson will now automatically appear on the course page below course details. You can repeat the process to add more lessons to your course.

You can also break down an individual lesson into topics. Simply go to LearnDash LMS » Topics page and click on the ‘Add New’ button to add a topic.

Creating a topic is similar to creating a lesson. Instead of associating it to a course, you will just need to associate it to a lesson.

Adding topics to the lesson

Step 5. Adding Quizzes and Assignments to Your Online Course

Quizzes and assignments allow you to offer an interactive learning experience. LearnDash comes fully equipped with dynamic quizzes and assignments that you can add to your course and lessons.

You can make the quizzes and assignments required for your users before they can progress to the next lesson or course. You can also review assignments and give feedback to students.

Let’s start with quizzes first.

Creating Quizzes in LearnDash

To add a quiz, you need to visit LearnDash LMS » Quizzes page and click on the Add New button.

Add quizzes

First, you will need to provide a title and description for your quiz.

Creating the quiz page

After that, you need to switch to the settings tab and associate your quiz to a course, lesson, or topic.

Quiz settings

Below that you will find options to set quiz pre-requisites, marks, certificates, and display settings.

Quiz display settings

Once you are done, click on the save or publish button to save your quiz.

Your quiz is empty at the moment. Let’s change that by adding some questions to it. Head over to LearnDash LMS » Questions page and click on the Add New button.

Add new question

This will bring you to the question editor. First, you need to provide a title which could also be the question itself. Below that, you can provide a little description of the question.

Question title and description

From the right column, you need to choose the answer type for your question. Depending on the answer type, the options for your question will change.

Select an answer type

After that, you can enter answer choices. You will also be able to select what message to show on the correct answer.

Once you are done, switch to the Settings tab and associate your question to the quiz you created earlier.

Add question to the quiz

Don’t forget to click on the save button before you move onto add another question.

Feel free to add as many questions as you need for your quiz.

Enable Assignments in LearnDash

You can easily add assignments by editing a lesson and going to the lesson options area. You need to check the box next to upload assignment option.

Assignment uploads

After that, you can provide the assignment instructions in your lesson. At the end of the lesson, users will see an option to upload their assignment.

Upload your assignment

Once users have uploaded their assignments, you can view them by visiting LearnDash LMS » Assignments page.

Manage Assignments

From this page, you can edit assignments, approve them, or give comments on submitted assignments.

Step 6. Giving Certificates on Course Completion

LearnDash allows you to automatically give certificates upon completion of a course. However, creating a certificate in LearnDash requires some basic knowledge of HTML.

First, you will need a certificate image file. This is basically the background image you want to use for your certificates.

You can find certificate templates on free image creating websites like Canva. Once you find a template that you like, simply delete all text from it and download it to your computer.

Select certificate image

Next, you need to visit LearnDash LMS » Certificates page and click on the ‘Add New’ button.

Add new certificate

This will bring you to the certificate edit screen. From here you need to set the background image you downloaded earlier as the featured image.

After that, you need to use the Visual editor and click on the shortcodes button to add LearnDash metadata into the certificate. Using the shortcodes, you can add the course title, user name, and other data.

Editing certificate in LearnDash

Once you are satisfied with the certificate, you need to publish it.

Next, you need to associate the certificate to a course, lesson, or quiz. For example, you can issue the certificate on completion of a course, submitting a quiz, or finishing a lesson.

To add the certificate, simply edit the course, quiz, or lesson and switch to the settings tab. From here you can select the certificate you just created.

Associate certificate to your course

Step 7. Selling Your Online Course with More Powerful Features

Both LearnDash and WordPress are super flexible. This allows you to use them with any other tools to grow your business and reach more users.

For example, if you want to create a powerful membership site / community that offers other features and perks along with courses, then you can use LearnDash with MemberPress.

MemberPress is the best WordPress membership plugin because it offers more granular permission / subscription control.

It comes with a powerful payment system that will allow you to grow your business more efficiently.

Alternatively, if you want to sell other items like physical goods related to your course, swags, etc, then you can use WooCommerce to manage payments and orders. This will let you build a proper online store for your website.

Step 8. Promoting Your Online Course

WordPress and LearnDash make it super easy to build and manage your online course.

The other advantage of WordPress is that it also makes it easier for you to promote your online course and make money online.

Let’s take a look at few ways to promote your online course and make it successful.

1. Choose a LearnDash ready WordPress Theme

Themes control the appearance of your WordPress site, and there are thousands of free WordPress themes on the market. However, not all of them are made for selling an online course.

For that, you will need a WordPress theme optimized for making more sales and increase conversions. You would also be looking for a mobile responsive theme that works well with LearnDash.

Our first recommendation would be the Astra theme. This incredibly powerful WordPress theme is tested to work well with LearnDash, and it is highly optimized for conversions / sales.

Astra LearnDash

Choosing the Astra Pro version will also give you access to their LearnDash module. This gives you additional features to promote your online course and encourage more sign-ups.

We would also recommend you to check out the following themes (all of them work with LearnDash).

  • OceanWP – A highly versatile WordPress theme with easy customization options.
  • Academy Pro – Made by StudioPress and powered by Genesis theme framework, this theme is made specifically for selling online courses.
  • Divi – Divi comes with powerful drag and drop page builder and dozens of ready made designs to easily get started.

2. Create Landing Pages for Your Online Courses

Your WordPress theme would be able to help you create a highly engaging website. However, you may need to quickly create landing pages to describe course details, showcase instructors, highlight special offers, etc.

For that, you’ll need Beaver Builder. It is the best WordPress page builder and allows you to create professional landing page layouts without writing any code.

Beaver Builder

For detailed instructions, see our guide on how to create custom page layouts in WordPress.

3. Learn The SEO Basics

Search engines are the #1 traffic source for most websites on the internet. This is why you’ll need to learn how to make your online course website rank higher in search engines.

With the help of WordPress plugins and some basic SEO best practices, you’d be easily able to compete with the big guys.

To learn more, see our complete WordPress SEO guide for beginners with step by step instructions.

4. Track Marketing Data

A lot of beginners develop their marketing strategy based on guesswork. You don’t have to do that when you can get actual data to make informed decisions.

For that, you’ll need MonsterInsights. It helps you install Google Analytics and see human-readable reports inside your WordPress dashboard.

You can see where your visitors are coming from, what they do on your website, your most popular pages, and more. You can then improve your website to improve your conversions and boost sales.

5. Start Building an Email List

After a while, you would notice that most visitors who come to your website don’t sign up for your online course. The problem is that you would not be able to reach out to those users once they leave your website.

To address this, you need to start an email newsletter. This way you would be able to collect email addresses and reach out to those users and bring them back to your website.

We recommend using Constant Contact or ConvertKit.

6. Convert Website Visitors into Subscribers and Customers

Most visitors who come to your website will leave without enrolling into your online course. This is why it’s important to convert those abandoning visitors into subscribers or paying customers.

This is called conversion optimization.

The best tool for the job is OptinMonster. It is the best conversion optimization software on the market and helps you grow your business with more leads and sales.

For more details, see our guide on how to convert website visitors into customers.

Need even more tools? See our complete list of the best tools to grow your WordPress website like a total pro.

We hope this article helped you easily create a successful online course in WordPress. You may also want to see our tips on grow your business online without a lot of money.

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

The post How to Create an Online Course with WordPress (the RIGHT WAY) appeared first on WPBeginner.



Source link

How to Create an Email Newsletter the RIGHT WAY (Step by Step)


Do you want to create an email newsletter for your website, blog, or eCommerce business?

An email newsletter helps you stay in touch with your users, bring them back to your website, and convert them into customers.

The challenge is that many beginners find it difficult to start an email newsletter. Mainly because they feel that it would be too technical or time-consuming.

That used to be the case 10 years ago, but now creating an email newsletter is so easy that even a non-techy can do it!

Having built an email newsletter with over 1 million subscribers, we have decided to create an ultimate guide on how to start an email newsletter with step by step instructions.

Our goal is to help you walk through the process and set up your email newsletter the RIGHT way.

How to easily create a newsletter

Since this is a comprehensive guide, we have included a table of content for easier navigation.

  • What is an email newsletter
  • Why start an email newsletter
  • Who should start an email newsletter
  • How to start an email newsletter
  • Creating an email list
  • Setting up your email list settings
  • Adding newsletter signup forms to get more subscribers
  • Sending your first newsletter email
  • Tips to get more email subscribers
  • How to make money from your email newsletter
  • Keeping your newsletter emails out of spam

What is an Email Newsletter?

An email newsletter is a form of online communication that allows you to send news, tips, and updates about your product, business, or non-profit.

In order to receive these updates, people need to join your email list by providing their email address. These users are referred to as subscribers, leads, or contacts.

Organizations and individuals use email newsletters in many different ways. For example, businesses use email newsletters to send users product information, new arrivals, and latest updates.

Websites and blogs use email newsletters to send content updates, increase traffic, and building a loyal following.

Why Start an Email Newsletter?

Did you know, that more than 75% of people visiting your website today will never find it again?

It is not your fault, it’s just that the internet is so huge and there is a lot of content out there.

Starting an email newsletter will allow you to convert those website visitors into subscribers. Once they join your email newsletter, you will be able to stay in touch and bring them back to your website.

Basically without an email newsletter, you are losing potential subscribers and customers every day.

Now you may be thinking, ‘ What if we ask users to follow us on social media? Wouldn’t that provide a way to contact those users?’

It will, and you should definitely build a social media following. However, you don’t own those social media platforms.

Social media giants like Facebook and Twitter limit your audience’s reach. More importantly, most of your users may not be checking their social feeds as often.

On the other hand, people tend to check their email inbox several times every day. Most users use a mobile device with notifications turned on for emails.

For more on this topic, see our article on why building an email newsletter is so important.

Who Should Start an Email Newsletter?

Many of our users often ask us if they should make a newsletter for their business, blog, or organization. Our answer is always ‘Yes’.

Even if you are just starting out, you should start building your newsletter from day 1. Each day you are not doing this, you are losing money, subscribers, and potential customers.

Email marketing is a win-win situation regardless of your industry, business, or website traffic.

1. Email Marketing for Small Businesses

Business websites, regardless of their industry or size, can always benefit from creating a newsletter.

It is the most cost-effective way to stay in touch with your existing customers, website visitors, and potential customers.

Sony PlayStation Newsletter signup

2. Email Newsletter for Ecommerce Websites

A study found that more than 44% of email recipients have made at least one purchase because of a promotional email.

If you run an online store, then email marketing is the most effective tool to convert abandoned carts into paying customers.

For a long time, eCommerce giants have been effectively using email to convert casual visitors into buyers.

Abandoned cart emails

3. Email Newsletter for Non-Profits

Non-profit organizations need to reach out to their supporters for donations, support, events, and more. Other mediums like social media, phone, and physical mailing all cost a lot more money than email marketing.

Human Rights Watch newsletter signup form

Creating an email newsletter allows non-profits to stay in touch with the general public, supporters, and donors.

Users are more likely to open emails from a non-profit that they support. In fact, 49% of millennials prefer to get updates from the organizations they support via email.

To learn more, see this article on why email marketing is essential for non-profits.

4. Email Newsletter for Blogs and News Websites

If you want to start a blog or make a content-driven news site, then email marketing is the best way to build your audience. You will see that all popular internet marketers, influencers, and famous bloggers actively build their email lists.

Chris Brogan newsletter

Here is why:

  • You get to send email updates to users who would otherwise never return to your website again.
  • You build a steady audience of loyal readers without relying on third-party platforms like search and social media.
  • You don’t control search engines or social media. Your search rankings can drop and your social media profiles can get suspended for no reason. On the other hand, you own your email list and have complete freedom to use it.

5. Email Newsletters for Education

Educational institutions need support from an engaged community of students, faculty, parents, and local businesses. Whether it is for fundraising, admissions, events, or other activities; Email is the cheapest and most direct way for schools and colleges to reach out.

University of California newsletter signup form

These are just a few examples of how email newsletters can benefit businesses, individuals, and non-profits. There are many more examples out there, which is why most marketers believe that email marketing is crucial for being successful online.

That being said, let’s take a look at how you can easily start an email newsletter to grow your own business and brand.

Step 1. Starting an Email Newsletter

The most important thing you’ll need to start your email newsletter is an email marketing service provider. These are companies that allow you to collect email addresses and send mass emails.

There are literally hundreds of email marketing services in the world including Constant Contact, SendinBlue, AWeber, Drip, ConvertKit, and many more.

After trying out almost every popular email marketing service, we recommend our users to use Constant Contact. They are one of the most popular email marketing service providers in the world, and their support is great in helping people get started.

Constant Contact offers a beginner friendly email marketing platform with simple drag and drop tools to help you quickly get started. They also have advanced email list growth tools, marketing automation, eye catching templates, and more.

First, you need to visit the Constant Contact website and click on the signup button. They have a 60 day free trial (no credit card required).

Signup for Constant Contact

Once you click the button, it will bring you to the signup page where you need to provide the information to create your account.

Fill in the signup form

After you complete the signup, you will be redirected to Constant Contact guided set up. Click on the ‘Skip this step’ below as we will show you how to set it up later in this article.

Skip set up wizard

You will now reach your Constant Contact dashboard. This is where you will manage your email lists, subscribers, and send your email newsletter.

Constant Contact dashboard

Note: Constant Contact free trial account only allows you to send up to 100 emails. You will need to purchase their paid plan to access all the powerful features. WPBeginner users can get a special 20% off when using our Constant Contact coupon code.

Step 2. Creating an Email List

An email list is basically a contact list of your subscribers. Think of it as a contact book containing email addresses of all the users who sign up to receive your email newsletter.

To keep your contacts organized, you need to create an email list.

Simply click on the ‘Contacts’ link from the top menu and then click on the Email List link in the sidebar.

Creating a new email list

This page will show all your email lists. By default, Constant Contact creates an email list for you labeled ‘General Interest’. You need to click on the ‘Enter a new list’ link to create a new email list.

Choose a name for your email list

You’ll be asked to enter a name for your list. You can enter anything here that helps you easily identify the list.

Next, click on the ‘Add list’ button, and Constant Contact will create the list for you.

Email list created

In order to start using this email list, you need at least one contact added to it. You can manually add a contact to your list by visiting the ‘Contacts’ page and clicking on the ‘Add Contacts’ button.

Add contact to your email list

This will show you a drop-down menu, asking how you would like to add contacts. You need to select ‘Type in one contact’ to continue.

On the next screen, you need to enter contact information. You can add one of your own email addresses here. This will allow you to test your email campaigns.

Adding a contact to your email list

After entering your contact information, click on the save button to add it. Your email list is now ready to be used.

Now that you have created an email list, it is time to set up some basic list settings.

Step 3. Setting up Your Email List Settings

The first thing you would want to set up is a welcome email. This is the email message sent to your users when they join your email newsletter.

Let’s get started.

First, you need to click on the ‘Campaigns’ link from the top menu and then click on the ‘Create’ button.

Create welcome email campaign

This will bring up a popup where you will be asked to select an email campaign type. Click on the ‘Email Automation’ to continue.

Email automation campaign

After that, you need to choose the email automation type. Click on the ‘Welcome email’ option to continue.

Select automated welcome email

Next, you will be asked to select a template for your email. The builder will automatically show you ‘Welcome email’ templates that you can use as a starting point.

Select welcome email template

Simply click on a template to select and open it in Constant Contact’s drag and drop email builder.

Creating welcome email

From here, you will design your welcome email newsletter template.

You can start by giving your campaign a proper title, this will help you identify the campaign when you need to edit or change it in the future.

Click on the ‘Untitled…’ link at the top left corner to edit it. Now enter a name for your campaign, for example, welcome email, new user signup, introduction, etc.

Campaign name

After that, you can start editing the email template. It is a drag-and-drop editor, so you can simply drag elements from the left column and drop them on the canvas. You can also point and click anywhere in the email to edit it.

Point and click to edit your welcome email

You can replace the logo with your own, add your own header image to match your branding, customize the email subject and message text to fit your needs.

Once you are satisfied with the design, click on ‘Save’ to store your email and then click the ‘Continue’ button.

The email builder will now ask you to select an email list. Go ahead and select the list you created in the earlier step. After that, fill out the physical address form.

Welcome email settings

Due to the anti-spam laws in many countries, you need to include physical address information in each newsletter email. This can be your business address or a P.O. box.

Lastly, click on the ‘Activate’ button at the top right corner of the screen to save and activate your welcome email.

Welcome email campaign set up

You have successfully set up a ‘Welcome email’ campaign. From now on, all new users joining your newsletter will receive this email upon sign up.

Some tips on writing an effective welcome email

Welcome emails have an average open rate of 50% which is higher than any other email newsletter you send.

It will be the first thing new subscribers will hear from you. This is your opportunity to impress them, so they look forward to your next email newsletter.

  • Say thanks and let your users know that you appreciate them sharing their contact information with you.
  • Next, you would want to introduce yourself, your business, and what you do. Keep it short and simple.
  • Let your users know how often you’ll email them and what kind of content and offers they should expect.
  • If you promised users an incentive to join your email list, then include that information in your welcome email.
  • The best way to introduce users to your brand is by sending them to the most useful content on your website. It helps them discover content and builds engagement.

For more tips, see this guide on how to write the perfect welcome email for new subscribers.

Step 4. Setting up Newsletter Signup Forms to Get More Subscribers

Now that you have signed up with an email marketing platform and set up your email list. It is time to start promoting it.

The easiest way to get more subscribers is by adding the newsletter sign up forms to your website. Usually, your email marketing service would have ready-made sign up forms that you can add to your website.

However, these signup forms don’t look good and sometimes don’t fit in the container where you want to place them.

Let’s take a look at how to easily add newsletter signup forms to your WordPress site. We will show you two methods, and you can choose one or both of them together.

1. Add Newsletter Signup Form Using WPForms Lite (Free)

WPForms is the best drag & drop WordPress from plugin in the market. They have a free version called WPForms lite which includes built-in support to connect with your Constant Contact account.

This allows you to use WPForms’ drag and drop form builder to create your newsletter sign up form.

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

Upon activation, you need to visit WPForms » Settings page and click on the ‘Integrations’ tab.

WPForms integrations

You will see Constant Contact integration listed there. You need to click to expand it and then click on the ‘Add Account’ button.

This will show you the information needed to connect your Constant Contact account to WPForms. Click on the link that says ‘Click here to register with Constant Contact’.

Connect Constant Contact to WPForms

This will bring up a popup which will take you to the Constant Contact website. Click on the ‘Allow’ button to give WPForms access to your Constant Contact account.

Allow access

Next, you will see an authorization code which you need to copy.

Authorization code

Switch back to the WPForms settings page and enter the authorization code you copied earlier. You also need to provide a name for this integration.

Add authorization code

Finally, click on the ‘Connect to Constant Contact’ button.

WPForms will now connect to your Constant Contact account. You will see a ‘Connected’ label appear next to the integration.

Constant Contact connected

Now you are ready to create your newsletter sign up form using WPForms.

Simply head over to WPForms » Add New page to launch the WPForms builder interface.

Creating a newsletter sign up form

Provide a title for your form and then click on the ‘Newsletter signup form’ template.

This will load up a read-made signup form with required fields already added to the form.

Editing newsletter signup form

You can point and click to edit form fields, change fields labels, and add more fields from the left column if needed.

Once you are satisfied with the form, you need to click on the Marketing tab to integrate it with Constant Contact.

Add new connection

Click on the Constant Contact tab and then click on the ‘Add Connection’ button. You will be asked to provide a title for this connection. You can enter anything here and then click OK button.

Name your connection

Next, you will see the settings for this connection. It will automatically detect your Constant Contact account and show it under the Select Account field.

Below that you need to select the email list. Click on it to select the email list you created earlier.

Select email list and map form fields

After that, you need to map your WPForms form fields to the Constant Contact fields. Once done, you can click on the ‘Save’ button at the top to save your sign up form.

WPForms also makes it super easy to add your newsletter signup form anywhere on your website.

If you want to add the form to your website’s sidebar, then visit Appearance » Widgets page and add WPForms widget to a sidebar.

WPForms widget

Provide a title for your widget and then select the signup form you created earlier. Don’t forget to click on the ‘Save’ button to store your settings.

You can now visit your website to see your newsletter signup form in action.

Newsletter sign up form displayed in the sidebar

You can also add sign up form to your blog posts or pages. Simply edit the post and add the WPForms block to the content area.

Adding WPForms block to blog post

After adding the block, select the newsletter signup form you created earlier and WordPress will load it inside your post. You can now save or publish your post and visit your website to see it in action.

Newsletter signup form in a WordPress post

2. Add Newsletter Signup Form Using OptinMonster (Pro)

For this method, we will be using OptinMonster, which is the best tool in the market to help you get more email subscribers, faster!

It includes dozens of high-converting signup forms like lightbox popups with exit-intent technology, 2-step optins, slide-in forms, floating bar, and more. This gives you powerful tools that you need to quickly grow your email list.

For more details, see our complete OptinMonster case study to learn how we used it to increase our email subscribers by 600%.

First, you will need to sign up for an OptinMonster account. It is a premium service and their plans start from $9 per month.

You can use our OptinMonster coupon code: WPB10 to get 10% off your purchase.

Once you have signed up for OptinMonster, you will reach your account dashboard.

Let’s create your first OptinMonster campaign. Click on the ‘Create Campaign’ button to get started.

Create campaign

Next, you will be asked to select an optin type. For the sake of this guide, we will be creating a lightbox popup signup form. Below that you need to choose a template for your campaign.

Choose optin type and template

After that, you will be asked to provide a title for your campaign and enter your website address.

Campaign settings

This will launch the OptinMonster builder interface. It is a powerful drag and drop campaign builder where you can design your optin forms.

OptinMonster builder

You can point and click to edit any item on the screen. You can also add new blocks to add different elements to your optin.

Once you are satisfied with the design, it is time to connect the OptinMonster campaign to your Constant Contact account.

Switch to the ‘Integrations’ tab from the top menu and then click on the ‘Add new integration’ button.

Adding a new integration in OptinMonster

Next, you need to select Constant Contact as your ‘Email service provider’ and then click on ‘Register with Constant Contact’ button.

This will bring up a popup where you need to click on the ‘Allow’ button.

Allow OptinMonster to access your Constant Contact account

Switch back to the OptinMonster and provide a name for this connection. After that, click on the ‘Connect to Constant Contact’ button.

Connect Constant Contact to OptinMonster

OptinMonster will now fetch your Constant Contact account details. You need to select the email list you created for your newsletter.

Select your email list

Now, we will take a look at the display rules for your campaign. Display rules allow you to choose when and where to display your campaign.

Display rules

By default, OptinMonster will show the popup to any user after 5 seconds. The popup will only appear on their first pageview and will not bother your users again during the same session.

Next, you need to switch to the Publish tab and change campaign status to Live. After that, don’t forget to click on the ‘Save’ button to store all your campaign settings.

Publish your OptinMonster campaign

Your OptinMonster campaign is now ready, let’s add it to your WordPress site.

First, you will need to install and activate the free OptinMonster plugin on your site. This plugin acts as a connector between your WordPress site and OptinMonster.

Upon activation, you need to click on the OptinMonster menu item in your WordPress admin sidebar. On the next screen, click on the ‘Connect Your Account’ button to continue.

Connect OptinMonster to WordPress

Next, you will be asked to enter your OptinMonster API key. You can find this information under your account on the OptinMonster website.

Connect to OptinMonster

After entering the API key, click on the ‘Connect to OptinMonster’ button. The plugin will now connect your website to OptinMonster.

Next, you need to switch to the ‘Campaigns’ tab. This is where all your OptinMonster campaigns will appear. If you don’t see any campaigns here, then click on the ‘Refresh campaigns’ button.

Turn on campaign on your website

Now you need to click on the ‘Go Live’ live below the campaign you just created. After that, you can visit your website in a new Incognito browser tab to view your newsletter signup popup in action.

Newsletter sign up form

OptinMonster is an incredibly powerful tool to quickly get more subscribers for your website.

Following are a few other campaign types that you can create with OptinMonster.

  • A slide-in scroll box signup form
  • A sticky floating footer signup form
  • Triggering FOMO with a countdown timer signup form

Step 5. Sending Your First Email Newsletter

Once you have added newsletter signup forms to your website, you will gradually start getting subscribers. After getting your initial welcome email, these new subscribers will be waiting to see what you send them next.

You are now ready to start sending newsletter emails.

Let’s create your first email campaign.

The great thing about using Constant Contact is that it comes with an incredibly easy to use email builder with tons of beautiful templates.

Creating your campaigns and sending newsletter emails is quite easy. Simply log in to your Constant Contact account and click on the Campaigns menu from the top.

Create new Constant Contact campaign

The campaigns page lists all your current, past, and automated email campaigns. Click on the create button to start a new email.

You will be asked to select a campaign type. Click to select the ‘Email’ campaign type and continue.

Select email campaign type

Next, you need to pick an email template for your newsletter. Constant Contact comes with several ready-made template for different industries, campaigns, and email types.

Choose an email template

All these email templates are fully customizable, and you can add your own logo and images to customize them. Once you edit and save a template, you will be able to use it for your future campaigns.

We recommend starting with a simple newsletter template and customizing it with your own brand logo.

Simply click on a template to select it for your email newsletter. Constant Contact will then load the email builder with your selected template.

Editing your email template

This is the same email builder that you used to create your welcome email. You can add your brand logo, point and click to add text, link, and images.

Adding your blog posts to the email newsletter

You can also fetch and add your blog posts to the newsletter. Click on the ‘More’ button in the left column and then drag and drop the ‘Read More’ block to your email.

Adding blog posts with read more link

Next, you need to click on the ‘Read more’ block to edit it. This will bring up a popup where you need to enter the link of the blog post you want to add.

Add blog post to your email

Click on the preview button to fetch a featured image and article description and then click on the Insert button. Repeat the process to add more blog posts if needed.

Once you are satisfied with your email’s design and contents, click on the ‘Continue’ button to move forward.

Continue to email settings

On the next screen, first, you need to select the email address you want to send this message. After that, review other email settings on the page.

Email settings and scheduling

Lastly, you need to select whether you want to send this email right away or schedule it to send later.

We recommend sending your emails on a fixed schedule. This helps your users anticipate the arrival of your email and sets expectations. For more on this topic, see this guide on choosing the best time to send newsletter emails.

Click on the Schedule button at the top right corner of the screen to save your email.

That’s all, you have successfully created your first newsletter email and scheduled to send it.

Need help with writing effective newsletter emails? See these tips on writing effective email newsletters.

Step 6. Tips to Get More Email Subscribers

In 2018, the number of global e-mail users amounted to 3.8 billion users.

In another study, 48% of participants said that they would like to receive email updates from their favorite brands.

This means that users prefer to get emails from their favorite businesses. Now the only question that remains is how do you get them to subscribe to your newsletter?

Luckily, email marketing has been around for a very long time. Experts are regularly experimenting, sharing, and finding new ways to grow their email lists.

Here we will share some of our own tips that are tested and proven to work.

1. Use multiple signup forms

Many beginners just add a single newsletter signup form to their website and forget about it. Add multiple signup forms to your website using a variety of placements.

Multiple signup forms

However, you need to be careful not to ruin user experience with aggressive prompts to signup.

For example, in the screenshot above, the second prompt only appears when a user scrolls down and the first signup form is no longer visible.

Social Media Examiner uses multiple sign up forms and creative strategies which has helped them get over 250,000 email subscribers (case study).

Keep experimenting with different forms and placements to find out what gets you the best results.

2. Use lead magnets to capture more subscribers

Lead Magnets are special offers used as an incentive to join your email newsletter. These special offers could be an exclusive download, an ebook, a helpful resource, discount coupon, etc.

Lead Magnets work extremely well because they offer users instant gratification and value for performing an action.

You can see a live example of lead magnets just below this article, where we offer users a free download of our ultimate WordPress toolkit as an incentive.

Lead magnet example

3. Offer Content Upgrades

Similar to lead magnets, content upgrades offer users an additional piece of content or bonus content, which they can download after signing up for your newsletter.

You can easily add content upgrades to your existing content. This can be a checklist, a PDF download of the article, a case study, a research report, and more.

Content upgrade example

For more details, see our guide on how to add content upgrades in WordPress.

4. Use social media to grow your email list

Promoting newsletter on social media

Your website is not the only place to promote your newsletter and find new subscribers. Social media platforms can be another place to convert followers into email subscribers.

For detailed tips, see our guide on how to use social media to grow your email list

Need even more tips? Check out the following email marketing guides:

  • 73 proven tips to grow your email list
  • How to do lead generation in WordPress
  • 12 tips to grow your email list quickly

Step 7. How to Make Money from Email Newsletter

One of the popular sayings among digital marketers is that “The money is in the list”. Every dollar you spend on email marketing has a return average of $32 dollars.

As your subscriber count grows, you would want to explore opportunities to monetize your email newsletter.

Following are just some of the easiest ways to make money from your email newsletter.

1. Sell your products

Sell your own products

First, you would obviously want to use your email list to sell your own products. You can use your email list to send special offers and discount deals exclusive to your subscribers.

You can also bring them back to your website by adding calls to action, offer members-only content, demo, and free samples.

When trying to sell your own products, keep the ‘Value Value Value Pitch’ formula in your mind.

It basically suggests that you should offer three times more value than your sales pitch. Most marketers agree that such emails work better than those that are nothing more than a plain sales pitch.

2. Upsell products and services

Upselling is a sales technique to persuade customers into buying something additional like an upgrade or add-on. As your email list grows, you can send personalized offers to existing customers.

Upselling through email

Due to its highly targeted messaging and personalized offers, upsell emails tend to perform way better. This may lead many businesses to send more such emails.

You need to remember that your emails should offer value first, otherwise those emails would soon become annoying.

3. Affiliate marketing

affiliate marketing

Affiliate marketing is a referral program where an online retailer (advertiser) pays you a commission when users purchase their product using your referral link.

You can find products and services that might interest your users and add affiliate links, reviews, and coupons in your newsletter emails.

To get started, see our beginner’s guide to affiliate marketing.

4. Advertisement or renting out your email list

If your email list grows quickly, then you can make money by renting your email list.

You see, a lot of folks don’t realize the potential of email marketing until they realize that they could benefit immensely from an email list.

Lucky for you, they are now looking for someone who may already have a list of people interested in specific products, services, or industry.

You can approach such advertisers directly, or you can find email list brokers like Info USA, List Giant, or Mailing List Direct.

Step 8. Keep Your Newsletter Emails Out of Spam

How to make avoid ending up in spam

In 2012, 90% of all emails were spam. This number was reduced to 58% by the end of 2018.

The main reason for this decline was the improved spam detection and prevention technologies used by email marketing tools.

This is great news for all users and businesses. However, the AI-powered spam detection technologies are quite sensitive and can wrongfully mark your email messages as spam.

Following are the most common reasons for newsletter emails to end up in spam:

1. You didn’t use double opt-in

Basically, all email marketing services including Constant Contact require users’ consent for sending them emails. This is done by the user verifying their email address after signing up.

However, they also allow you to manually add email addresses. If you misuse this feature and add email addresses from random sources, then your messages will end up in spam.

2. Sender email address was used for spam

If your sender email address was used to send spam or malware, then your email campaigns with the same sender address will end up in spam. This is why you need to get a business email address to ensure high deliverability for your newsletter emails.

3. Misleading subject lines

Misleading email subjects are annoying and due to many users reporting such emails, spam algorithms can now identify many such lines and mark them spam.

Following are a couple of examples of common misleading subject lines.

  • Urgent: Update your information
  • Thanks for your order!
  • You have won a prize

Need some good examples? See these 160+ excellent email subject lines for inspiration.

4. Your email must have accurate information

The anti-spam laws in many countries require the sender to provide accurate from address (sender email address), complete physical address, and an unsubscribe link in the email message.

If any of these are missing from your newsletter email, then it would most likely end up in spam.

Basically, you need to follow the rules and guidelines provided by your email marketing software and you’ll be able to avoid the spam folder.

We hope this article helped you learn how to easily create an email newsletter. You may also want to see our article on how to get a free business email address to send your newsletter emails.

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

The post How to Create an Email Newsletter the RIGHT WAY (Step by Step) appeared first on WPBeginner.



Source link

How to Create a Custom Gutenberg Block in WordPress (Easy Way)


Do you want to create a custom Gutenberg block for your WordPress site? After the WordPress 5.0 update, you need to use blocks to create content in the new WordPress block editor.

WordPress ships with several useful blocks that you can use when writing content. Many WordPress plugins also come with their own blocks that you can use.

However, sometimes you may want to create your own custom Gutenberg block to do something specific.

If you’re looking for an easy solution to create custom Gutenberg blocks for your WordPress site, then you’re in the right place.

In this step by step tutorial, we’ll show you the easy way to create a custom WordPress block for Gutenberg.

Creating a custom WordPress block for Gutenberg

Note: This article is for intermediate users. You’ll need to be familiar with HTML and CSS to create custom Gutenberg blocks.

Step 1: Get Started

The first thing you need to do is install and activate the Block Lab plugin.

It’s a WordPress plugin that allows you to create custom blocks from your admin panel without much hassle.

Block Lab WordPress Plugin

To install the plugin, you may follow our beginner’s guide on how to install a WordPress plugin.

Once the plugin is activated, you can proceed to the next step of creating your first custom block.

Step 2: Create a New Block

For the sake of this tutorial, we will build a ‘testimonials’ block.

First, head over to Block Lab » Add New from the left sidebar of your admin panel.

On this page, you need to give a name to your block. You can write any name of your choice in the “Enter block name here” textbox.

Enter Custom Block Name

We will name our custom block: Testimonials.

On the right side of the page, you’ll find the block properties. Here you can choose an icon for your block and select a block category from the Category dropdown box.

The slug will be auto-filled based on your block’s name, so you don’t have to change it. However, you may write up to 3 keywords in the Keywords text field, so that your block can be easily found.

Custom Block Properties

Now let’s add some fields to our block. You can add different types of fields like text, numbers, email, URL, color, image, checkbox, radio buttons, and much more.

We’ll add 3 fields to our custom testimonial block: an image field for the image of the reviewer, a textbox for the reviewer name, and a textarea field for the testimonial text.

Click on the + Add Field button to insert the first field.

Image Field Options

This will open up some options for the field. Let’s take a look at each of them.

  • Field Label: You can use any name of your choice for the field label. Let’s name our first field as Reviewer Image.
  • Field Name: The field name will be generated automatically based on the field label. We’ll use this field name in the next step, so make sure it’s unique for every field.
  • Field Type: Here you can select the type of field. We want our first field to be an image, so we’ll select Image from the dropdown menu.
  • Field Location: You can decide whether you want to add the field to the editor or the inspector.
  • Help Text: You can add some text to describe the field. This is not required if you’re creating this block for your personal use.

You may also get some additional options based on the field type you choose. For example, if you select a text field, then you’ll get extra options like placeholder text and character limit.

You can click on the Close Field button once you’re done with the image field.

Following the above process, let’s add 2 other fields for our testimonials block by clicking the + Add Field button.

Final Custom Block Fields

In case you want to reorder the fields, then you can do that by dragging them using the hamburger icon on the left side of each field label.

To edit or delete a particular field, you need to hover your mouse over the field label to get the edit and delete options.

Once you’re done, click on the Publish button, present on the right side of the page, to save your custom Gutenberg block.

Step 3: Create a Block Template

Although you’ve created the custom WordPress block in the last step, it’ll not work until you create a block template named block-testimonials.php and upload it to your current theme folder.

Create a Block Template

The block template file will tell the plugin how to do display your block fields inside the editor. The plugin will look for the template file and then use it to display the block content.

If you don’t have this file, then it’ll display an error saying “Template file blocks/block-testimonials.php not found”.

Let’s create our block’s template file.

First, go ahead and create a folder in your desktop and name it blocks. You’ll create your block template file inside this folder and then upload it to your current WordPress theme directory.

To create the template file, you can use a plain text editor like Notepad.

Every time you add a new field to your custom block, you need to add the following PHP code to your block template file:

<?php block_field( 'add-your-field-name-here' ); ?>

Just remember to replace add-your-field-name-here with the field name.

For example, the name of our first field is reviewer-image, so we will add the following line to the template file:

<?php block_field( 'reviewer-image' ); ?>

Simple, isn’t it? Let’s do the same for the rest of our fields:

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

Next, we’ll add some HTML tags to the above code for styling purposes.

For example, you can wrap the reviewer image inside an img tag to display the image. Otherwise, WordPress will display the image URL which is not what you want, right?

You can also add class names to your HTML tags and wrap your code inside a div container to style your block content (which we’ll do in this next step).

So here’s our final code for our block template:

<div class="testimonial-block clearfix">
	<div class="testimonial-image">
		<img src ="<?php block_field( 'reviewer-image' ); ?>">
	</div>
	<div class="testimonial-box">
		<h4><?php block_field( 'reviewer-name' ); ?></h4>
		<p><?php block_field( 'testimonial-text' ); ?></p>
	</div>
</div>

Finally, name the file as block-testimonials.php and save it inside the blocks folder.

Step 4: Style Your Custom Block

Want to style your custom block? You can do that with the help of CSS.

Open a plain text editor like Notepad and add the following code:

.testimonial-block 
	width: 100%;
	margin-bottom: 25px;


.testimonial-image 
	float: left;
	width: 25%;
	padding-right: 15px;


.testimonial-box 
	float: left;
	width: 75%;


.clearfix::after 
	content: "";
	clear: both;
	display: table;

Once done, name the file as block-testimonials.css and save it inside the blocks folder.

Step 5: Upload Block Template File to Theme Folder

Now let’s upload the blocks folder containing our custom block template file to our WordPress theme folder.

To do that, you need to connect to your WordPress site using an FTP client. For help, you may check out our guide on how to upload files to your WordPress site using FTP.

Once you’re connected, go to the /wp-content/themes/ folder. From here you need to open your current theme folder.

Enter Theme folder using FTP

Now upload the blocks folder, containing the block template file and the CSS file, to your theme directory.

Once done, you can proceed to the final step to test your custom block.

Note: Block Lab plugin allows you to create theme-specific blocks. If you change your WordPress theme, then you need to copy the blocks folder to your new theme directory.

Step 6: Test Your New Block

It’s time to test our custom testimonials block. You can do this by heading over to Pages » Add New to create a new page.

Next, click on the Add Block (+) icon and search for the Testimonials block. Once you find it, click on it to add the custom block to your page editor.

Add Custom Block to Page Editor

You can now add a testimonial to this page using your custom block. To add more testimonials, you can always insert new testimonial blocks.

Once you’re done, you can preview or publish the page to check whether it’s working properly or not.

That’s all! You’ve successfully created your first custom WordPress block for your site.

Did you know that you can save time with reusable blocks in your editor? Check out our guide on how to easily create reusable blocks in the WordPress block editor and use them on other websites.

You may also want to see our guide on 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 Create a Custom Gutenberg Block in WordPress (Easy Way) appeared first on WPBeginner.



Source link

How to Create a Web Directory in WordPress (Step by Step)


Are you looking to create a business web directory? Web directories are a popular online business idea, allowing you to monetize your website with user-generated content.

Angie’s list, a popular web directory that helps homeowners find reliable contractors and service providers. They’re worth over 9 billion dollars.

Whether you’re looking to create a niche web directory to make money online, or a partners directory to list your vendors, you can easily do it in WordPress.

In this article, we will show how to easily create a web directory in WordPress. We will cover how to accept payments for your premium web directory listings.

How to Create a Web Directory in WordPress

What is a Web Directory?

A web directory is like a catalog that lists businesses or individuals with details such as contact information, services, features, etc.

Web directories allow users to browse through a catalog of links divided into topics, categories, and interest areas. A perfect example of a web directory is Yellow Pages or Angie’s List.

They are most commonly used to help people find a place or service they are looking for.

Another web directory example is Yelp which allows people to find great local businesses like restaurants, dentists, beauty salons, doctors, etc.

While there are several web directory themes for WordPress that allow you to create a web directory, we don’t recommend them because you will get locked into the theme forever.

This is why we will only show you plugin methods, so you can use it with any theme design that you want.

Having that said, let’s take a look at how to create a web directory in WordPress.

Method 1: Creating a WordPress Directory with Formidable Forms

Formidable Forms is the most advanced WordPress form builder plugin in the market. It helps you to create a simple contact form as well as advanced forms like surveys, payment forms, registration forms, and more for your WordPress site.

The plugin comes with an exclusive feature called ‘Views’ which lets you display any data submitted via a form on the front-end of your website. Using this feature, you can easily create directories, real estate listings, job board, event calendars, and more.

Let’s create a business directory using the Formidable Forms plugin.

1. Create a Form to Collect Data for Your Directory

First thing you need to do is install and activate Formidable Forms plugin. For detailed instructions, see our guide on how to install a WordPress plugin.

Once the plugin is installed and activated, go to Formidable » Forms and click on ‘Add New’ button.

Add New Formidable Form

Now you can choose how you want to create a form. You can start with a blank form, with a template, or import one from an XML file.

Choose a Way to Add a New Formidable Form

We will choose the template method because it is the quickest way to make an advanced form. Formidable Forms offers more than 20 pre-made form templates out of the box.

For example, we will choose ‘Real Estate Listings’ to create a real estate directory. Click the ‘Create Form’ to get started.

Create Real Estate Form with Formidable Forms

You will see a popup box where you will be asked to enter your form name and description.

Name Your Formidable Form

After that, it will load the pre-built real estate submission form.

Formidable Forms - Form Builder Interface

You can review and customize the form using the simple drag and drop interface. Once done, click on the ‘Update’ button.

If you want to create a premium web directory with paid listings, then you’ll need to connect your form with a payment gateway.

Formidable allows you to collect payments with PayPal, Stripe, and Authorize.net.

In this example, we will show how to integrate PayPal to accept payments. Go to Formidable » Add-Ons from your dashboard and install the ‘PayPal Standard’ addon.

Install PayPal Standard Addon in Formidable Forms

Once the addon is installed and active, visit Formidable » Global Settings and click the PayPal option. Update your PayPal email address and other settings.

Set Up PayPal with Formidable Forms

After that, open your respective form editor again, and click the ‘Settings’ option at the top.

Form Settings - Formidable Forms

Next, click on the ‘Form Actions’ tab and then select the PayPal icon to add a new action.

Add PayPal Form Action to Formidable Forms

Now you need to configure the PayPal settings. Add a payment amount, choose a payment type (one-time payment, donation or subscription), select currency, and then add a return URL and cancel URL.

Formidable Payment Options with PayPal

Once done, don’t forget to Update your form.

Now that payment option is integrated, your users will need to make a payment before submitting a real estate property via your form.

2. Publish Your Form in WordPress

The next step after building a form is to publish it on your website, so users can submit their business details using it.

Visit Pages » Add New from your dashboard to create a new page. After that, name your page and add the Formidable Forms widget to the editor.

Add Formidable Form Widget to WordPress Page

Next, select your form.

Select Your Form to Add to a WordPress Page

After that, it will load the pre-built real estate submission form into your page editor.

You can also add some helpful content to the page. Once done, go ahead and publish your page.

Now you can add the submission form page to your WordPress navigation menu, or send an email campaign to your email list to get more form submissions.

The process of collecting data via a form may take some time, so it is better to make a plan before starting. Alternately, you can also create entries manually from your dashboard or import from a CSV file.

3. Build Your Web Directory with Formidable Views

After you have gathered plenty of information, you can create a web directory with the Formidable Views.

Navigate to Formidable » Views from your dashboard and click on the ‘Add New’ button.

Add New View in Formidable Forms

After that, enter a title for your view and choose the form which contains the data you want to display.

Formidable View Basic Settings

Next, you should choose the view format. You can show all entries in a list, a single entry, list the entries with a link to the single entry page, or insert entries into a calendar.

For this tutorial, we will choose ‘Both (Dynamic) – list the entries that will link to a single entry page’ option.

If you want to add a Search bar in your web directory, add the following shortcode into the ‘Before Content’ box.

[frm-search]

Add Search Bar in Your Formidable View

After that, you need to add content to your directory listing in the following format.

<div class="listing_info"> 
<a href="[detaillink]"><img src="[home-image size=thumbnail]" alt=""/></a>
</div> 
<div class="listing_list">
<strong><a href="[detaillink]">[MLS ID]</a></strong>
<strong>[address]</strong> <strong>$[listing-price]</strong> [blurb] 
[bedroom] Bedrooms | [bathroom] Bath |[sqft-living] sq. ft.</div> 
<div style="clear:both;"></div>

In the above code, you need to replace home-image, MLS ID, address, listing price, blurb, bedroom, bathroom, and sqft-living with the respective field IDs/keys from your form.

You can find the field IDs/keys in the Customization box on the right-hand side of the page.

Formidable Forms Filed Keys

For example, if we want to show the photo uploaded via ‘Main Photo Upload’ field as the home image, we need to replace the ‘home-image’ with the field ID ‘63’.

Insert Content Into Your Web Directory

After that, add the following code to into Formidable » Styles » Custom CSS to customize the appearance of your web directory.

 .listing_infofloat:left; width:235px; margin-right:10px; 
.listings_list imgwidth:370px;float:right;

Add Style to Your Formidable View

Once done, you can publish your view and preview it.

After that, create a new page for the web directory and add your Formidable View to it.

Add Formidable View to a WordPress Page

Here is how your real estate directory would look with the default Twenty Nineteen theme.

Real Estate Web Directory Demo

You can further customize and style your Formidable directory by either using custom CSS, a drag & drop WordPress page builder plugin, or a styling plugin like CSS Hero.

Method 2: Using Business Directory Plugin

The second method is by actually using a Business Directory Plugin. Remember while the main plugin is free, a lot of functionality will require you to purchase the PRO version of the plugin.

Start by installing and activating the Business Directory Plugin. Upon activation, the plugin will ask your permission to create a new WordPress page and add the business directory shortcode inside it.

Click on the ‘Create required pages for me’ to create your directory page.

Create Required Pages for Business Directory Plugin

Once done, the Business Directory plugin will add a new page called ‘Business Directory’ automatically.

Business Directory Page Added in WordPress

You should not delete or hide this page because it is the primary page the Business Directory plugin uses to show a directory on your website.

Next, you can manage the plugin settings from the ‘Directory Admin’ menu in your dashboard.

Go to Directory Admin » Manage Options to configure your plugin’s main settings. The ‘General’ settings include permalink settings, directory search options, reCAPTCHA, registration options, and more.

Business Directory Plugin Settings

As you can see in the screenshot above, there are settings for Listings, Email, Payment, and Appearance. You can review all of them one by one and make changes as per your requirements.

After that, visit Directory Admin » Manage Form Fields to customize your form fields. From here, you can add or edit fields which would appear on your directory submission form.

Manage Form Fields in Business Directory Plugin

Next, you will need to create a few categories for your directory.

You can do this by going to Directory » Directory Categories. You will be required to create at least one category, so your users can use this category when submitting their listing.

Add New Directory Category with Business Directory Plugin

Once you have created the categories, you can go ahead and create a new listing by visiting Directory » Add New Listing.

Now you would see the Add New Listing page which looks similar to the Classic WordPress editor. Enter your listing title, and add a short description about your listing.

Add New Listing With Business Directory Plugin

After that, scroll down to ‘Directory Listing Fields/Images’ section and add your business details including website address, phone number, email, etc.

Fill out Directory Listing Fields manually

To add images, you will need to click on the Images link first. Then, you can upload images from your computer or simply drop in the image box.

Upload Image to Your WordPress Business Directory

Next, you will need to choose an appropriate category for your listing.

Choose Directory Category

Once done, you can go ahead and publish your directory.

Now you can preview your web directory page on your website. Your web directory would look like the screenshot below with the default WordPress theme Twenty Nineteen.

Business Directory Demo with Default WordPress Theme

As a site administrator, you can create a listing manually from your dashboard. Your users can also submit a listing in your directory using a form. The submission form can be accessed by clicking on the ‘Create A Listing’ button.

Submit a Listing with the Business Directory Plugin

The user-submitted listing items will be saved in the Directory » Directory page as pending listing, so you can manually review and check the listing for quality.

Pending Directory Listing

Once done, they will appear on your business directory page.

Accepting Payments for Directory Listings

Business Directory Plugin allows you to accept payments for listings in your web directory. By default, the plugin only comes with Authorize.net as the payment gateway.

Other payment gateways such as PayPal and Stripe are available as separate add-ons which you can purchase from the plugin’s website.

To enable payment options in your business directory, you need to go to Directory Admin » Manage Options page and click on the ‘Payments’ tab.

Business Directory Plugin Payment Settings

In the payment settings page, the first option on the Payment Settings screen is the checkbox to turn on payments. If your site is not fully ready yet, then you can click the checkbox next to Put payment gateways in test mode? option.

Next step is to choose your currency and add a thank you message for payments.

Once you are done configuring payment options, then click on the save changes button to store your settings.

Now you can connect your directory with a payment provider. If you have not installed any other payment gateway add-on plugin, then you will only see Authorize.net as the default payment gateway option.

Click on the Authorize.net link and then enable it by entering your login ID and transaction key.

Business Directory Plugin Authorize.net Settings

Since you are requiring payments, you will need to set up listing fees. This can be done by going to Directory Admin » Manage Fees. There you can create different listing plans, set up fees and listing duration for each plan and save your changes.

That’s all! Your web directory is now ready to accept paid listings. We recommend you to explore other options in the plugin’s settings for further optimization of your web directory.

We hope this article helped you create a web directory using WordPress. You may also want to see our guide on how to create a team directory 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 Create a Web Directory in WordPress (Step by Step) appeared first on WPBeginner.



Source link