Monday, November 8, 2021

What’s the Difference Between Landing page vs Website?

Do you want to learn the difference between landing page vs website?

Many small businesses wonder whether they should make a landing page or a full-fledged website to showcase their online presence.

In this article, we’ll show you the difference between landing page vs website and which one you should make for your business.

Landing page vs website - what is the difference

What is a Landing Page?

A landing page is a stand-alone web page designed for a specific purpose and goal. It is a highly versatile tool that can be used in marketing, advertising, and lead generation campaigns.

It can also be used as a coming soon website for a business, a single-page website on its own, a product sales page, and more.

Landing page example

Landing pages are specifically designed for higher conversions. They have unique design characteristics that make it easier for users to perform the desired action.

This action could be signing up for an email list, purchasing a product, filling out a form, and more. These actions are referred to as ‘Call to action’.

Overall, the goal of landing pages is to minimize distractions that could take users away, and provide them with all the information they need to take action.

A landing page could also be a stand-alone website on its own with different sections all leading to one clear call to action.

A landing page website

What is a Website?

A website is a collection of different landing pages and sections to help your users find what they’re looking for.

For instance, a typical business website can have an about section, a separate blog page, a contact us page, products and services pages, and more.

There are many different types of websites and they can all have different pages for different features.

How a Website Differs from a Landing Page?

Unlike a landing page, a website can have multiple pages of information with different goals and purposes.

Not each page on a website is as highly focused on conversions as a landing page.

For instance, a business website may want users to get information about all the products and services they are offering. It may also give users multiple calls to action to choose from (e.g. make a purchase, ask for quote, join email list, follow on social media, and more).

Different types of websites would have different goals and a website gives them more ways to engage the audience.

A website could also be supported by multiple landing pages for their marketing campaigns.

For instance, a membership website may utilize a landing page for a subscription plan or an eCommerce store may want to create a pre-launch landing page for an upcoming product.

Landing page vs Website – Which One to Choose?

Many beginners struggle to decide between landing page vs website and which one to choose?

The answer lies in your own requirements and what you want to achieve for your business.

If you want to quickly launch a product, create an online presence for your business, capture potential leads and customers, then a landing page would be an easy way to go.

Example of a quick landing page

On the other hand, if you want to create a multi-page online presence for your business, use an eCommerce cart, sell online courses, start a blog, and more, then you will be better off with a website.

WPForms Website example

Remember you can always choose to create a landing page as a single-page website. You can also convert your landing page to a full-fledged website as your business grows.

Similarly, you can also create a complete website with multiple pages and still add landing pages for specific campaigns.

What Do I Need to Make a Landing Page vs Website?

You’ll need a domain and a web hosting account to create a landing page or a website.

A domain name is the location of your website or landing page (e.g. wpbeginner.com). This is what your users will type in their browsers to view your landing page or website.

The web hosting account is where your landing page or website files will be stored.

Normally, a domain costs around $16 per year, and hosting plans start at $7.88 per month (usually paid annually). Now this is a significant amount if you are just starting out.

Luckily, our friends at Bluehost has agreed to offer a free domain name and a generous discount on hosting for WPBeginner users.

Basically, you can get started for just $2.75 per month.

→ Click Here to Claim This Exclusive Bluehost Offer ←

Bluehost is one of the biggest hosting companies in the world and an officially recommended WordPress hosting provider.

Once you have signed up for a hosting account, Bluehost will automatically install WordPress for you.

WordPres is the world’s best website builder and makes it super easy to create a website or make landing pages. Simply log in to your hosting account and then login to your WordPress account dashboard.

Log in to WordPress

How to Make a Landing Page for My Business

The easiest way to make a landing page is by using SeedProd. It is the best landing page builder on the market and allows you to easily create landing pages using a drag and drop interface and without writing any code.

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

Note: There is also a free version of SeedProd available that you can use to give it a try. However, you’ll need to upgrade to unlock all features and templates available in the premium version.

Upon activation, you need to enter your SeedProd license key. You can find this information under your account on the SeedProd website.

SeedProd license key

You can now start building your first landing page.

Simply head over to SeedProd » Pages page and click on the ‘Create new landing page’ button.

Creating a new landing page

Next, you will be asked to choose a template page as a starting point for your landing page. SeedProd comes with dozens of beautiful templates that you can completely modify or you can even start with a blank template.

Choose a landing page template

This will bring up a popup asking you to provide a name for your landing page. Enter a name for your page and then click on the ‘Save and Start Editing the Page’ button.

Name your landing page

SeedProd will now load the page builder interface with a live preview of your chosen template.

SeedProd page builder interface

You can simply point and click on any item in the live preview to edit it. You can also add new blocks from the left column to your page.

SeedProd comes with all commonly used elements as blocks. Each block has its own settings that you can adjust using a simple user interface.

It also includes blocks for WooCommerce and integrations for all popular email marketing services under the ‘Connect’ tab.

Integrations

Once you are satisfied with your landing page, you can click to save or publish your page to make it live.

Publish landing page

Publishing Landing Page as Homepage for Your Domain

Now if you want to only display your landing page when someone enters your domain name, then you’ll need to set it up as your homepage in WordPress.

Simply go to Settings » Reading page. From here you need to select ‘A static page’ under ‘Your homepage displays’ option.

Set homepage

After that, go ahead and select the landing page you created earlier as your ‘Homepage’. Don’t forget to click on the Save changes button to update your settings.

Creating Landing Pages for Other Domain Names?

What if you wanted to create landing pages for other domain names? This comes in handy if you have multiple domains to cover different markets and regions.

SeedProd comes with built-in domain mapping support. This allows you to easily create a landing page in SeedProd and map it to any other domain name.

Set custom domain name

For more details, see our tutorial on how to easily add a custom domain for your landing page in WordPress.

How to Make a Complete Website for My Business

WordPress is the most powerful website builder used by millions of business websites, eCommerce stores, blogs, news and media sites.

Since you have already installed WordPress on your Bluehost account, you can simply login to your account dashboard and start working on your website.

First, you want to add new pages by visiting Pages » All Pages page and clicking on the Add New button.

Adding new pages in WordPress

WordPress comes with a powerful editor that allows you to easily add design and content elements to your pages as blocks. To learn more, see our tutorial on how to use WordPress editor.

Tip: Need ideas for pages? See our list of the most important pages to create for a new WordPress website for some excellent ideas.

Next, you would want to choose a design for your website. WordPress comes with thousands of free and paid themes for all sorts of websites.

Bonus Tip: Need help choosing a theme, see our expert pick of the most popular WordPress themes or take a look at these great themes for business websites.

Once you have found a theme you want to use, you can go to Appearance » Themes page and click on the Add New button to install it.

Install WordPress theme

See our tutorial on how to install a WordPress theme for detailed instructions.

The real power of WordPress comes from its plugins. These are like apps for your WordPress websites that you can install to extend its features. Start by checking out our pick of the essential WordPress plugins.

Need more help with your new website? See our detailed tutorial on how to make a website with step by step instructions.

We hope this article helped you learn the difference between landing page vs website. You may also want to see our guide on how to promote your business on a budget and our tips on quickly getting more traffic to 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.

The post What’s the Difference Between Landing page vs Website? appeared first on WPBeginner.


November 08, 2021 at 05:00PM

How to Create Additional Image Sizes in WordPress

Do you want to create additional image sizes in WordPress?

By default, WordPress automatically creates several copies of image uploads in different sizes. Additionally, WordPress themes and plugins can also create their own image sizes.

In this article, we’ll show you how to easily create additional image sizes in WordPress and use them on your website.

Creating additional image sizes in WordPress

Why Create Additional Image Sizes in WordPress?

Normally, all popular WordPress themes and plugins handle image sizes very well. For instance, your WordPress theme may create additional sizes to use as thumbnails on archive pages.

However, sometimes these image sizes may not fit your own requirements. You may want to use a different image size in a child theme or a post grid layout.

You can do this by creating additional image sizes in WordPress and then calling these sizes whenever you need them.

That being said, let’s take a look at how to create additional image sizes in WordPress.

Registering Additional Image Sizes for your Theme

Most WordPress themes including all the top WordPress themes support post thumbnails (featured image) feature by default.

However, if you are creating a custom WordPress theme then you will need to add support for post thumbnails by adding the following code to your theme’s functions.php file.

add_theme_support( 'post-thumbnails' );

Once you enable the support for post thumbnails, you can now use the functionality of registering additional image sizes by using the function add_image_size().

The add_image_size function is used in the following format:

add_image_size( 'name-of-size', width, height, crop mode );

Example code can look like the following:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Now if you notice, we have specified three different sorts of image sizes. Each has different modes such as hard crop, soft crop, and unlimited height.

Let’s cover each example and how you can use them in your own projects.

1. Hard Crop Mode

As you may notice, there is a “true” value added after the height. This tells WordPress to crop the image exactly to the size that we have defined (in this case 120 x 120px).

This method is used to ensure that everything is exactly proportionate. This function will automatically crop the image either from the sides or from the top and bottom depending on the size.

Hard crop images example

2. Soft Crop Mode

By default, soft cropping mode is turned on this is why you do not see any additional value added after the height. This method resizes the image proportionally without distorting it. So you might not get the dimensions that you wanted. Usually, it matches the width dimension and the heights are different based on each image’s proportion. An example display would look like this:

Soft crop example

Unlimited Height Mode

There are times when you have super long images that you want to use in your design, but you want to make sure that the width is limited. For instance, infographic images tend to be very long and usually wider than the content width.

This mode allows you to specify a width that will not break your design while leaving the height to be unlimited.

Unlimited height mode

Displaying additional image sizes in your WordPress theme

Now that you have added the functionality for the desired image sizes lets take a look at displaying them in your WordPress theme. Open the theme file where you want to display the image and paste the following code:

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Note: This bit of code must be pasted inside the post loop.

That’s all you really have to do to display the additional image sizes in your WordPress theme. You probably should wrap it around with the styling that fits your need.

Regenerating Additional Image Sizes

If you are not doing this on a brand new site, then you probably will have to regenerate thumbnails.

The add_image_size() function only generates the sizes from the point it was added into the theme. This means any post images that were added prior to the inclusion of this function will not have new sizes.

To fix this, you need to regenerate the new image size for older images. This is made easy by the plugin called Regenerate Thumbnails. Once you install and activate the plugin, a new option is added under the menu: Tools » Regenerate Thumbnails

Regenerate thumbnails

You’ll see the option to regenerate thumbnail for all images or just the featured images. We recommend regenerating all images to avoid any unexpected behavior or broken images.

For more details, see our article on how to easily regenerate new image sizes in WordPress.

Enabling Additional Image Sizes for your Post Content

Even though you have enabled image sizes in your theme, the usage is limited only to your theme which does not make any sense.

All image sizes are being generated regardless, so why not make it available for the post author to use within the post content.

You can do this by adding the following code to your theme’s functions file.

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail', 
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

Don’t forget to save your changes after adding the code.

You can now go and upload an image to a WordPress post or page. In the image block settings you’ll see your custom image sizes under the ‘Image size’ option.

Choose your custom image size inside post editor

You and other authors working on your website can now select these size options when adding images to posts and pages.

We hope this article helped you learn how to create additional image sizes in WordPress. You may also want to see our article on the best image compression plugins for WordPress and our WordPress performance guide to improve your website speed.

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 Additional Image Sizes in WordPress appeared first on WPBeginner.


November 08, 2021 at 05:27PM

Friday, November 5, 2021

10 Best WordPress PayPal Plugins for Easily Accepting Payments

Are you looking to accept payments on your WordPress site using PayPal?

PayPal makes it easy for website owners to accept payments online from their customers. Using a PayPal Plugin, you can easily integrate the popular payment service with WordPress.

In this article, we will compare the best WordPress PayPal plugins for accepting payments.

Best WordPress PayPal plugins

Why Use a PayPal Plugin for WordPress?

PayPal is arguably the most popular and trusted online payment gateways in the world.

Whether you have an eCommerce store, a membership website, a blog, or any other business site, PayPal lets you collect online payments from your customers.

Since PayPal handles the entire transaction, you don’t have to worry about security issues, getting a separate merchant processor for credit cards, or PCI compliance. All you have to do is add PayPal to your WordPress website.

A WordPress PayPal plugin makes the process of connecting your site with your PayPal account very easy.

It also helps you create payment collection forms, insert shopping carts, add a pay now button, offer express checkout solutions, and more.

That being said, let’s look at some of the best PayPal plugins for WordPress.

1. WPForms

WPForms

WPForms is the most beginner friendly contact form plugin for WordPress and is trusted by over 5 million professionals.

It offers a drag & drop online form builder that allows you to easily create contact forms, email subscription forms, order forms, payment forms, donation forms, and other types of online forms with just a few clicks.

The plugin offers pre-built form templates, which lets you create any type of online form in no time. There are multiple form fields that you can add to customize your form using the drag and drop builder.

With WPForms PayPal addon, you can easily accept payments, donations, and online orders on your WordPress website.

WPForms PayPal Addon

Once the addon is active, you can fill out your PayPal details in the form settings. WPForms will then automatically direct users to PayPal when they submit a form.

Enabling PayPal payments for your form in WPForms

WPForms is a perfect solution for you if you want to set up a quick online order form without setting up a full eCommerce cart.

2. MemberPress

MemberPress

MemberPress is the best WordPress membership plugin and is very easy to use. You can sell courses, offer digital downloads, and allow users to access posts, pages, videos, and other content after becoming a member.

It offers lots of features and comes with a drag and drop course builder. You can also control who can access which content by setting up different membership levels.

The plugin comes with built-in integration with PayPal. You can easily accept payments using PayPal Standard and PayPal Digital Goods.

There’s no need to manually add a PayPal payment gateway to your membership website. MemeberPress comes with PayPal gateway API keys.

Simply select PayPal as your payment method, and MemberPress will add it to your membership website.

3. Easy Digital Downloads

The Easy Digital Downloads website

Easy Digital Downloads is the most popular WordPress eCommerce plugin for selling digital downloads in WordPress.

Whether you want to sell an eBook, music files, digital art, software, or any other type of digital good, Easy Digital Downloads is the plugin for you.

It comes with integrations for PayPal Standard, PayPal Express, PayPal Pro, and even the new PayPal commerce platform.

Aside from PayPal, it also allows you to accept other payment solutions as well including Stripe, Apple Pay, Google Pay, and more.

You can sell subscriptions, accept recurring payments, add discount codes, and set up a full shopping cart in just a few minutes.

4. Formidable Forms

Formidable FormsFormidable Forms is an advanced WordPress forms plugin in the market. It lets you create complex forms without the need to hire a developer.

The plugin offers a drag and drop form builder, making it super easy to build all kinds of forms. For example, you can create simple contact forms, quizzes, surveys, payments forms, and more.

What makes Formidable Forms so powerful is that you can also build advanced forms like mortgage calculators, directories, job board listings, and much more.

Formidable Forms offers a PayPal addon, which allows you to collect online payments from your visitors. You can also customize your PayPal settings, like selecting different currencies and setting a one-time or recurring payment type.

To get started, all you have to do is edit or create a new form in Formidable Forms and add PayPal as a new action in your form.

5. WooCommerce

WooCommerce

WooCommerce is a popular WordPress eCommerce plugin that allows you to accept payments using PayPal. In just a few clicks, you can add the PayPal payment method to your WooCommerce store.

Along with PayPal, the plugin also integrates other WooCommerce payment options including debit card, credit card, and pay upon invoice.

WooCommerce allows you to sell physical goods, subscriptions, integrate with shipping providers, collect taxes, handle inventory, and more.

It’s the most popular WordPress eCommerce plugin if you’re selling to sell physical goods.

6. Quick PayPal Payments

Quick PayPal Payments

Quick PayPal Payments is a simple but powerful plugin that lets you easily accept payments using PayPal.

The plugin is super easy to use. All you need to do is set up a payment form and add it anywhere on your site using a shortcode.

The plugin also provides different options to customize the appearance and styling of your payment form. Besides that, you get fixed and variable payment options, GDPR compliance, multi-language support, and more.

Quick PayPal Payments also offers a customizable autoresponder. When you enable the autoresponder, the plugin will automatically send a confirmation message about the payment to your customer.

7. WordPress PayPal

WordPress PayPal plugin

WordPress PayPal is a WordPress plugin that allows you to create buy now, add to cart, donation, and subscription buttons.

You can place these buttons anywhere on your WordPress blog or eCommerce store using a shortcode and enable PayPal checkout for your visitors.

Another advantage of using WordPress PayPal is that it allows you to test purchases using test buyers and seller accounts in PayPal Sandbox.

This way, you can make sure that the checkout process is working properly before accepting payments from real customers.

Other features offered by the plugin include setting up recurring payments, selling in different currencies supported by PayPal, charging shipping and tax on your products, and much more.

8. PayPal Donations

PayPal Donations

PayPal Donations is a simple plugin that comes with a shortcode and a ready-to-use PayPal WordPress widget that you can add to your WordPress sidebars.

It’s beginner-friendly, and you can configure the settings from your WordPress dashboard. Simply enter your PayPal email address and choose your currency to get started.

The plugin also offers different styles of PayPal donate button you can use on your website. There is also an option to use your custom donation button.

9. WP Express Checkout

WP Express Checkout

WP Express Checkout is the next WordPress PayPal plugin on our list. Like other plugins, it also lets you create a PayPal payment button for your WordPress website.

However, what makes this plugin different is that it offers the checkout process in a popup window. This way, your customers never leave your website and allows for quick and easy checkout.

The plugin works seamlessly for selling products and services. It’s great for anyone looking to collect online payments by offering downloadable content like PDFs, eBooks, or music.

WP Express Checkout automatically allows customers to download files once they’ve paid. You can also deliver the digital downloads using an encrypted download link that expires automatically.

10. WordPress Simple PayPal Shopping Cart

WordPress Simple PayPal shopping cart

WordPress Simple PayPal Shopping Cart provides an easy way to sell products/services on your website and accept payments using PayPal.

It adds a shopping cart system and allows users to add physical products and digital goods to their cart. On checkout, users can pay using PayPal.

You can use shortcodes to display the shopping cart on any post or page and turn your WordPress blog into an online store.

We hope this article helped you find a PayPal WordPress plugin for accepting payments on your site. You may also want to check out our guide on how to start a podcast and best PayPal alternatives to collect payments 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 10 Best WordPress PayPal Plugins for Easily Accepting Payments appeared first on WPBeginner.


November 05, 2021 at 05:33PM

Thursday, November 4, 2021

How to Create a Custom WordPress Search Form (Step by Step)

Do you need to create a custom search form for your WordPress website?

Search is how most users will find content on your site. If they can’t easily find what they are looking for, then they may move on to another website.

In this article, we’ll show you how to improve your website search by creating a custom WordPress search form, step by step.

How to Create a Custom WordPress Search Form (Step by Step)

Why Create a Custom Search Form for WordPress?

The default WordPress search feature is quite limited and doesn’t always find the most relevant content.

As you add more content to your site, you’ll need better ways to help your website visitors easily find the content on your site.

This becomes even more important if you’re running an online store or a membership site where you want users to find the right product or course.

You may also want to customize the search algorithm to show specific content higher than others, or customize the appearance of your search form.

That being said, let’s take a look at how to customize the WordPress search form and results page. We’ll cover two methods which you can choose using the links below:

How to Customize WordPress Search Form and Results

SearchWP is the best custom search plugins for WordPress. It’s easy to use, gives you complete control over your search results, and is more accurate than the default WordPress search.

The first step is to install the SearchWP plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » SearchWP page and then click on the ‘License’ menu option.

Enter SearchWP License Key

Then, enter your license key in the ‘License’ box and click the ‘Activate’ button. You can find this information in your account on the SearchWP website.

Customizing the Search Engine

Once you’ve done that, you need to click on the ‘Engines’ menu option. Once there, you should click the ‘Add New’ button to create a new search engine.

SearchWP Add New Engine

This will create a new search engine called ‘supplemental’. To change the name you need to click the ‘Sources & Settings’ button.

SearchWP Supplemental Search Engine

This takes you to a page that also allows you to choose whether to search posts, pages, media files, comments, and users. We’ll leave the default settings as they are.

We’ll change the search engine’s name to ‘Custom’. Go ahead and type that into the ‘Engine Label’ field.

SearchWP Engine Label

Notice that the ‘Keyword Stems’ option has been selected for you. This will disregard word endings when your users make a search so that the most relevant search results will be displayed.

Make sure you click the ‘Done’ button when you’re finished.

The settings page for the search engine contains sections for Posts, Pages, Media, and Users. In each section, you can give priority to different post attributes, or include only certain categories or tags in your search results.

You can do this by adjusting the ‘Attribute Relevance’ sliders.

These change how the search engines value and rank content. For example, if you want to value the post title higher than the content, then you can adjust the slider accordingly.

You should work through each section and make any adjustments to the sliders that you like.

SearchWP Attribute Relevance Sliders

You can also create rules for each section that determine whether certain content is included or excluded from the search results.

For example, you could allow your visitors to easily search for content about the same topic as they were just reading about. Or in an online store, you might help your customers to quickly find other products in the same category.

Go ahead and click the ‘Edit Rules’ button in the Posts section.

You’ll notice that you can create rules about the post’s categories, tags and format, the publish date, and the post ID.

SearchWP Edit Rules

You might want to let your visitors search specific website categories. For instance, you can add a category search feature to your archive pages to help your visitors quickly find what they’re looking for.

To learn how to do that, refer to Method 1 in our step by step guide on how to search by category in WordPress.

Once you’re done customizing your default search engine settings, make sure to click the ‘Save Engines’ button at the top of the page to create your custom search engine.

Click the Save Engines Button

Adding the Search Form with Shortcode

The SearchWP Shortcodes Extension simplifies the job of adding your new custom post search form to your WordPress site.

Simply visit the SearchWP Shortcodes Extension website and then click the ‘Download available with active license’ button.

Download SearchWP Shortcodes Extension

After that, you need to install and activate the extension the same way you installed the plugin above.

Now you can add a custom search form to your posts, pages, and widgets using shortcodes. If you haven’t used shortcodes before, then you can learn more in our beginner’s guide on how to add a shortcode in WordPress.

Simply edit a post and place your cursor where you want to add the search form. After that, click the plus ‘+‘ Add Block icon to bring up the blocks menu.

Add a Custom HTML Block

Next, type ‘html’ into the search box and then click on the ‘Custom HTML’ block to add it to the post.

Once you’ve added the new block, you should paste the following shortcodes and HTML into it.


[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

This code will add your custom search form to the post, create a section to display the search results, show a no results message if necessary, and add pagination if the results go into multiple pages.

If you gave your search engine a different name, then you’ll need to change engine=“custom” to your own engine name in four places.

You might also choose to change the text on the search button to something more descriptive by editing button_text=“Custom Search”. The rest of the code can stay the same.

Make sure you click Publish or Update to save your post and make it live.

Click Publish or Update to Save Your Post

To see the search form in action, simply view the post on your WordPress website. This is how it looks on our demo site running the Twenty Twenty-One theme.

SearchWP Custom Search Form Preview

Adding Live Ajax Search

Live Ajax search improves your search form by automatically providing drop down search results as the user types their query.

Live Search Page Example

The easiest way to add Ajax live search to WordPress is the free SearchWP Live Ajax Lite Search plugin, since it enables live search automatically.

For step by step instructions on how to install it, see our guide on how to add live Ajax search to your WordPress site.

Using Advanced Settings for SearchWP

Now you should navigate to Settings » SearchWP and click on the Advanced tab. On this page, you can enable some settings that will make it easier for your users to find what they are looking for.

SearchWP Advanced Settings

Check any of these options that you would like:

  • Partial matches will also display results that don’t quite match the term that is being searched for.
  • Automatic “Did you mean?” corrections will suggest a slightly different search term that will match more posts on your website.
  • Support “quoted/phrase searches” will allow your users to use quotes when searching for exact phrases.
  • Highlight terms in results will make it easier for your visitors to find what they are looking for in the search results.

Styling the Search Form and Results Page

Your WordPress theme controls the appearance of your website, including the search form and search results page. They store the formatting rules for all elements of your WordPress site in a CSS stylesheet.

You can add your own custom CSS to override your theme’s style rules.

If you haven’t done this before, then see our article on how to add custom CSS in WordPress for beginners.

For example, here is some custom CSS that will work with most themes. The first section changes the style of the search form and the second section customizes the search results.


.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}

.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

You can change the formatting in the code to suit your own site. You can also delete any lines that you don’t wish to modify. For example, if you don’t want to change the search form’s height and width, then simply delete those lines.

Here are screenshots of our demo website before and after adding the custom CSS.

SearchWP Custom CSS Preview

Measuring Search Results and Improving Conversions

Once you have set up, your custom WordPress search form, the next step is to measure the results.

SearchWP comes with a search metrics extension that shows you exactly how your website search is performing.

SearchWP Metrics

You can also use the search metrics to automatically improve the search results by promoting results that get more clicks to the top.

Ecommerce websites also implement exit-intent popups and gamified spin a wheel campaigns to engage users on search pages, so they can convert into email subscribers and then customers shortly after.

OptinMonster spin to win popup example

We hope this tutorial helped you learn how to create a custom WordPress search form. You may also want to see our expert pick of the best business phone services for small business, and our comparison of the best domain registrars.

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


November 04, 2021 at 04:00PM