How To Switch/Convert Custom Post Types in WordPress

Are you looking for a way to switch or convert custom post types in WordPress?

Sometimes, you may decide that a particular post type is not suitable for your content. Switching to a different format can create a better organizational website structure and improve your visibility in the search results.

In this article, we will show you how to easily switch custom post types in WordPress without using any code.

Converting post types in WordPress

Why Might You Need to Switch Post Types in WordPress?

Post types are the different kinds of content you can add to your WordPress website. There are 5 default post types, which are posts, pages, attachments, revisions, and menus.

You can also easily create your own custom post types to better organize the content on your blog. For instance, you can create custom post types to display portfolios, testimonials, products, and more.

However, sometimes, you may want to switch your existing content to another post type. This can be helpful if you feel like the existing post type is no longer suitable.

For example, if your WordPress blog does movie reviews and you have just created a custom post type for it, then it makes sense to switch your content from ‘Posts’ to ‘Movie Reviews’.

Similarly, if you have some content on your pages that would be better suited for a blog post, then it’s a good idea to switch its post type over for better search visibility.

By doing this, you will not only improve your website’s user experience but it will also help with content organization, user engagement, and website navigation.

Having said that, let’s look at how to easily switch or convert custom post types in WordPress

How to Switch Post Types in WordPress

First, you need to install and activate the Post Type Switcher plugin. For detailed instructions, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, the plugin adds a simple dropdown menu to the block editor that allows you to switch post types while editing your content.

Plus, it also enables you to convert post types using the Quick Edit and Bulk Actions options when viewing all posts.

Switching Post Types in the Block Editor

First, you need to open up the page or post where you want to change the post type in the WordPress block editor.

Once you are there, you must expand the ‘Summary’ tab from the block panel in the right corner of the screen.

Here, you will notice a new ‘Post Type’ option added to the bottom of the tab. Simply click on the ‘Post’ link next to the ‘Post Type’ option to open the dropdown menu.

After that, select the custom or default post type that you want to switch your content to.

Change post type in the block editor

This will display a confirmation message on your screen.

Once you have confirmed the changes, the post type will immediately be changed in the block editor.

Switching Post Types Using the Quick Edit Option

You can also quickly change an individual post type using the Quick Edit option while viewing all posts in the WordPress dashboard.

First, you must visit the Posts » All Posts page from the WordPress admin sidebar.

Alternatively, if you are changing the post type for a page, then head over to the Pages » All Pages screen from the admin sidebar.

Once you are there, just click the ‘Quick Edit’ link under the post or page title.

Click the Quick Edit link under the post title

This will open up the ‘Quick Edit’ section for the post, where you will notice a ‘Post Type’ dropdown menu in the bottom right corner.

From here, simply select the post type that you want to switch to and then click the ‘Update’ button to save your changes.

Choose post type from the Quick Edit section

Switching Multiple Post Types With the Bulk Actions Option

You can also change the post type for multiple posts at once using the Bulk Actions setting.

First, you must visit the Posts » All Posts page from the WordPress admin sidebar and then select all of the posts where you want to change the post type on your WordPress website.

After that, just choose the ‘Edit’ option from the ‘Bulk Actions’ dropdown menu at the top and then click on the ‘Apply’ button.

Choose the Edit option from the Bulk Actions dropdown menu

Now, you will see all selected posts in the ‘Bulk Edit’ mode.

From here, select the post type that you want to apply to your content from the ‘Post Type’ dropdown menu at the bottom.

Choose post type option from the bulk edit mode

Once you have done that, don’t forget to click the ‘Update’ button to store your changes.

Bonus: Add Custom Post Types to Your Main WordPress RSS Feed

Once you have switched your content to the new custom post type, you will also want to attract traffic to it by allowing users to discover the RSS feed for the content.

An RSS feed is a web feed that allows users to receive regular updates and notifications from a website or blog of their choice. 

Once you add the custom post type to your main WordPress RSS feed, you can make your content more easily discoverable for users. It will also improve your site’s SEO and streamline the process of managing and distributing your content.

You can add custom post types to your main RSS feed by adding the following custom code to your theme’s functions.php file:

function myfeed_request($qv) {
if (isset($qv['feed']))
$qv['post_type'] = get_post_types();
return $qv;
}
add_filter('request', 'myfeed_request');

However, keep in mind that the smallest error when typing this code can break your website and make it inaccessible.

That is why we recommend using WPCode.

WPCode - Best WordPress Code Snippets Plugin

It is the best WordPress code snippets plugin on the market that makes it super safe and easy to add custom code to your website.

It also comes with a cloud library of code snippets, smart conditional logic, code priority control, safe error handling, and so much more.

For more detailed instructions, you may want to see our tutorial on how to add custom post types to your main WordPress RSS feed.

We hope this tutorial helped you learn how to switch or convert custom post types in WordPress. You may also want to see our beginner’s guide on how to choose the best WordPress hosting or our top picks for the must-have WordPress plugins to help grow your site.

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 Switch/Convert Custom Post Types in WordPress first appeared on WPBeginner.

How Does WordPress Search Work (+ Tips to Make It Better)

Do you want to learn how WordPress search works, and how you can make it better?

By understanding and improving the built-in WordPress search, you can help visitors find what they’re looking for. This can get you more conversions while keeping people on your site for longer.

In this article, we’ll look at how the default WordPress search works, and share tips on how to make it better.

How does WordPress search work + tips to make It better

How Does WordPress Search Work?

WordPress comes with a search system that will look for content within your website.

How the search bar looks and where it appears will vary depending on your WordPress theme, but most themes show the search bar in the top right corner.

The built-in WordPress search bar

Note: If your theme doesn’t show the WordPress search bar by default, then skip ahead to our FAQs, where we’ll show you how to add it.

Visitors can type a search query into this field, and WordPress will search:

  • Page titles
  • Page content
  • Single-image titles and captions
  • Image alt text
  • File names

As you can see, it doesn’t search widgets, user comments, categories, tags, WooCommerce products, or PDF documents. It also doesn’t search image gallery titles, captions, or alt text, although you can search this content using a search engine plugin like SearchWP.

WordPress performs this search using the WP_Query class. It will start by displaying any posts that have the search term in the post title, arranged in reverse-chronological order, meaning that the newest entries will be displayed at the top of the results.

After that, it’ll show any posts that have the matching term in the post content.

For example, imagine you’ve just published a post about cats titled ‘My Favorite Pet’, and you also have an older post titled ‘Best Cat Photos.’ In this case, searching for ‘Cat’ will display the older ‘Best Cat Photos’ post first, since it has the search term in the title.

This may not a problem for WordPress blogs or websites that only have small amounts of content. However, this ordering logic will often show inaccurate or confusing results for bigger blogs, online stores, or business websites.

The built-in system is also missing some of the features that people expect from modern search engines. This includes autocomplete, live Ajax search, filtering, and spellcheck.

Why Improve the Default WordPress Search?

An advanced, fast, and accurate on-site search can help visitors find interesting and relevant content, which will keep them on your website for longer. This can increase pageviews and reduce bounce rate in WordPress.

Since visitors are spending more time on your site, this will send positive signals to the search engines. This can improve your WordPress SEO, which means search engines like Google will show your content to more people and drive more visitors to your website.

For more information, please see our guide on how to increase your blog traffic.

People who are using your site’s internal search are already highly engaged. They’re actively looking for specific content, which may mean they’re ready to take actions such as buying a product, signing up to your WordPress membership site, or booking an appointment.

If these people can’t find what they’re looking for, they may give up and go to a different website. This means you’re losing out on visitors who were ready to convert.

A search results page is also an example of personalized content since you’re showing the visitor results that match their unique search query. By providing personalized content that’s accurate and helpful, you can improve the visitor experience. Once again, this can encourage them to convert.

Performance is another reason why it’s a good idea to replace the default WordPress search with a better alternative.

The larger your WordPress website gets, the longer it’ll take WP_Query to scan your database and get the results. This means your site’s search will get slower, as your website gets bigger.

How to Make the WordPress Native Search Better

On-site search helps visitors find what they’re looking for, including products to buy and interesting blogs to read. Since it’s such an important part of your site, it’s a bad idea to rely on the limited built-in WordPress search.

With that being said, let’s see how you can improve the native WordPress search.

Show Instant Results With Live Ajax Search

Live Ajax search adds a dropdown and autocomplete feature that’s common in search engines like Google.

As the user types, live search guesses what they want to search for and then shows them results without even reloading the page.

How to improve WordPress search with live ajax results

This can help visitors find the right content, without having to manually press the ‘Search’ button or wait for the page to reload.

The easiest way to add Ajax live search to WordPress is using the free SearchWP Live Ajax Lite Search plugin. It enables instant search automatically and there are no settings for you to configure, so it’s very easy to set up.

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

Upon activation, the default WordPress search form will automatically use the Ajax live search feature. If you visit your site and start typing into the search bar, then you’ll see the instant search in action.

Change the Default Search URL Slug

By default, WordPress search URLs typically look something like this:

http://example.com/?s=search-term

The extra ?s= characters make this URL more difficult to read and understand, which can confuse visitors who are trying to find their way around your site.

Even worse, these URLs aren’t optimized for search engines which can stop them from correctly indexing your site’s contents.

The easiest way to change these URLs is by adding custom code to WordPress using a plugin such as WPCode.

You can go ahead and use the following custom code to replace the ‘/?s=search-term’ characters with ‘search.’ Your slug will look something like this when finished: http://example.com/search/wordpress

To use something other than ‘search’ in your URL, simply customize the code snippet below.

function wpb_change_search_url() {
    if ( is_search() && ! empty( $_GET['s'] ) ) {
        wp_redirect( home_url( "/search/" ) . urlencode( get_query_var( 's' ) ) );
        exit();
    }
}
add_action( 'template_redirect', 'wpb_change_search_url' );

For detailed instructions on how to insert this code to your WordPress website, please see our guide on how to change the default search URL slug in WordPress.

Make PDF Files Searchable in WordPress

By uploading PDFs to your WordPress website, you can share information about your services and products in a format that works on all devices. They’re also perfect for offering your visitors ebooks, user manuals, menus, and more.

However, WordPress only searches the contents of its database by default, so it will only look at the title and description of your PDF files, and not their contents. As a result, your visitors may struggle to find the best PDF for their search query.

The good news is that you can use a custom search plugin to improve the default WordPress search experience. If your PDFs are unencrypted, then the right search plugin will index the contents and metadata of your PDFs and add them to the search results.

For step-by-step instructions, please see our guide on how to add PDF indexing and searching in WordPress.

Add a Search By Category Feature to WordPress

If you have multiple categories of content on your website, then you might want to let users restrict their search to a specific category. This can help visitors find the right content, faster.

An example of search by category on a WordPress website

For example, if you have an online store then it often makes sense to let customers search within a particular product category.

If you run a membership site, then you might use search by category to help visitors find other members, groups, forums, online courses, and other specific kinds of content. For more information, please see our guide on how to add search by category in WordPress.

Make a Smart WooCommerce Product Search

WooCommerce has its own built-in search, but it doesn’t look for matches in product attributes, reviews, or product descriptions. This omission can stop shoppers from finding products they want to buy on your online store, so you get fewer sales.

The built-in WooCommerce search feature

Luckily, there are some excellent WooCommerce plugins that can show more helpful search results, and fetch them faster. To learn more, please see our guide on how to make a smart WooCommerce product search.

To get even more sales, you may want to fine-tune the kind of products WooCommerce includes in its search results. For example, you might only show products that are on sale or come with free shipping.

To learn more, please see our guide on how to customize WooCommerce product search results page.

Create a Search Form for Custom Post Types

Custom post types allow you to go beyond posts and pages and create different content types for your website. Custom post types can have different custom fields and their own custom category structure.

For example, if you run a movie review website, then you would probably want to create a ‘movie reviews’ post type that has fields for the director, release date, and more.

At WPBeginner, we use custom post types for our Glossary section to keep it separate from our blog posts.

How to improve your WordPress search with searchable categories

If you use custom post types, then you may want to create a form that allows visitors to search only that content.

For example, we also have a form that only searches WPBeginner’s coupon codes.

Searching coupons and deals on the WPBeginner website

This can help visitors find the right content faster, even when you have lots of different content types. For step-by-step instructions, check out our guide on how to create advanced search forms in WordPress for custom post types.

You can also make custom fields searchable in WordPress, which is ideal if you’ve added extra metadata to your pages and posts.

Exclude Content From WordPress search

By default, the built-in WordPress search will include all posts and pages in its search results.

However, you may want to exclude certain pages and posts from the search results. For example, if you’re running a WordPress membership website or selling online courses, then you’ll typically want to exclude your premium content from public search results.

If you’re running an online store, then you may want to hide content like your account page, checkout page, and thank you page. To help you out, we’ve created a guide on how to exclude pages from the WordPress search results.

Do you want to exclude posts, authors, custom post types, categories, tags, or even custom taxonomies? Then you can take a look at our guide on how to exclude specific pages, authors, and more from WordPress search.

WordPress Search FAQs

In this guide, we’ve explored how the default WordPress search works and shared lots of tips on how to improve it.

However, you may still have some questions about this important feature. That said, here are some of the most frequently asked questions about WordPress search.

How Do I Improve WordPress Search?

The best way to improve the built-in WordPress search is by using SearchWP.

SearchWP is the best custom search plugin for WordPress and allows visitors to search any content on your site including documents, WooCommerce products, custom fields, tags, comments, and more.

It also lets you customize the WordPress search algorithm, so you can control exactly where the content appears in the search results.

For more information, please see our guide on how to improve WordPress search.

Does WordPress Search Include Tags?

By default, WordPress search doesn’t include tags. The easiest way to make tags searchable is by using a custom search plugin like SearchWP.

SearchWP also has a relevancy slider, so you can control exactly how much tags influence where an item appears in the search results.

How Do I Add Search to My WordPress Theme?

If your theme doesn’t have a built-in search form, then we recommend adding a search bar to the WordPress navigation menu.

Since the main navigation menu typically appears across your entire site, visitors will be able to search for pages, posts, products, and more, from any page of your website.

An example of a search bar, in a navigation menu

If you’re using a block-based theme such as ThemeIsle’s Hestia Pro or Twenty Twenty-Three, then you can add a search bar to your theme using the full-site editor (FSE).

To do this, go to Appearance » Editor in the WordPress dashboard.

Opening the WordPress full site editor (FSE)

By default, the editor will show your theme’s home template. If you want to add the search bar to a different template, then click on the small arrow icon in the toolbar.

Then, select ‘Browse all templates.’

How to browse all FSE templates in WordPress

You’ll now see all the templates that make up your WordPress theme. Simply find the template where you want to add the search bar, and then click on its title.

For example, if you wanted to add a search form in your WordPress posts then you’d select the ‘Single’ template.

How to add the search bar to a single template in WordPress

You will now see this template in the full-site editor.

To go ahead and add a search bar, click on the blue ‘+’ icon.

Adding widgets to a single template in WordPress

In the popup that appears, type in ‘Search’ to find the right block.

You can then drag the block to the location where you want to show the search bar.

Adding a search block to a block-enabled theme template

To customize the block title or placeholder text, simply type it into the search block where it says ‘search’ or ‘optional placeholder.’

When you’re happy with how the block looks, click on ‘Save’ to make the search bar live.

Publishing a block-enabled template with a search bar

How Do I Add Search to a WordPress Page or Post?

You can add a search bar to a specific page or post using the built-in Search block.

This is a good choice if you want to control exactly where the search bar appears on every page and post, or you only need to offer search on specific areas of your website.

How to improve the default WordPress search

To get started, simply open the page where you want to add a search form and then click on the + icon.

In the popup that appears, type ‘Search’ to find the right block. Once you click on the Search block, it will add the block to your page.

Adding the Search block to a WordPress page or post

By default, the block uses ‘Search’ for both its label and the button text.

This will be visible to visitors, so you may want to replace it with something more descriptive by typing into the text fields.

Customizing the WordPress search block

You can also add some placeholder text to the search bar. This text will disappear automatically when the visitor starts typing.

To add a placeholder, simply click on ‘Optional placeholder…’ and then start typing.

How to improve the WordPress search

When you’re happy with how the Search block looks, you can go ahead and either publish or update the post.

We hope this tutorial helped you learn how WordPress search works, and how to make it better. You may also want to learn how to make money online blogging with WordPress, or check out our list of the best email marketing services for small businesses.

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

The post How Does WordPress Search Work (+ Tips to Make It Better) first appeared on WPBeginner.

How to Add Facebook Like Button in WordPress

Do you want to add a Facebook Like button in WordPress?

A Facebook Like button on your WordPress website can make it simple and easy for users to like and share your content. You can increase engagement and get more followers.

In this article, we will show you how to add the Facebook Like button in WordPress.

How to add Facebook like button in WordPress

Why Add a Facebook Like Button in WordPress?

Facebook is one of the most popular social media platforms in the world. Many businesses use Facebook to connect with their customers and promote their products.

Adding a Facebook Like button to your WordPress website can help drive more engagement. It also encourages people to share your content on their Facebook profiles and attract new users to your site.

You can use the Facebook Like button to increase your social followers and build a community. It helps raise awareness about your products and services and boosts conversions.

That said, let’s see how you can add a Facebook Like button in WordPress using a plugin or adding custom code.

Method 1: Add Facebook Like Button in WordPress Using a Plugin

In this method, we will be using a WordPress plugin to add Facebook Like button. This method is very easy and recommended for beginners.

The first thing you need to do is install and activate the BestWebSoft’s Like & Share plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can go to Like & Share » Settings from your WordPress admin panel.

Like and share plugin settings

Next, you’ll need to add the Facebook App ID and App Secret. If you don’t have this information, then simply follow the steps below.

How to Create a Facebook App ID and App Secret

Go ahead and click the ‘create a new one’ link under App ID or App Secret field in the Like & Share plugin.

This will take you to the Meta for Developers website. We suggest opening the website in another tab or window because you’ll need to open the Like & Share settings page in your WordPress dashboard to enter the app ID and secret.

From here, you’ll need to select an app type. Go ahead and choose ‘Business’ as the app type and click the ‘Next’ button.

Choose your app type

Next, you’ll need to provide basic information about your app.

You can enter a display name for your app, and be sure that the correct email address appears under the ‘App contact email’ field. Facebook will automatically pick the email address of the account you’re currently logged in as.

There’s also an option setting to choose a business account. You can leave this on ‘No Business Manager account selected’ and click the ‘Create app’ button.

Enter basic information for app

A popup window will now appear where Facebook will ask you to re-enter your password.

This is for security purposes to stop malicious activity on your account. Go ahead and enter your Facebook account password and click the ‘Submit’ button.

Reenter your Facebook password

After that, you’ll see your app dashboard.

From here, you can head to Settings » Basic from the menu on your left.

Go to basic settings page

On the Basic settings page, you will see the ‘App ID’ and ‘App Secret.’

You can now enter this information in the Like & Share plugin settings in your WordPress dashboard.

Copy the app ID and secret

Finish Up Customizing Your Facebook Like Button

First, copy the ‘App ID’ and head back to the tab or window where you have the Like & Share » Settings page opened. Simply enter the ‘App ID’ in the respective fields.

Now repeat the step by copying the ‘App Secret’ data from Meta for Developers page and pasting it into the Like & Share plugin settings.

Customize your Facebook like button

Once you’ve done that, you can choose whether to show the Facebook Like button along with the Profile URL and Share buttons.

There are also settings to edit the Facebook Like button’s size, its position before or after the content, and alignment.

More customization options

If you have enabled the Profile URL button, then you can scroll down to the ‘Profile URL Button’ section and enter your Facebook username or ID.

When you’re done, don’t forget to save your changes.

Now, the plugin will automatically add a Facebook Like button to your WordPress website and position it based on your settings.

You can also use the [fb_button] shortcode to add the Facebook Like button anywhere on your site.

That’s all! You can now visit your site and see the Like button on each post.

Facebook like button preview

Method 2: Manually Add Facebook Like Button in WordPress

Another way to add a Facebook Like button is by using custom code. However, this method requires you to add the code directly in WordPress so we only recommend it for people who are comfortable editing code.

With that in mind, we are going to use the free WPCode plugin to do so, which makes it simple for anyone to add code to their WordPress blog.

First, you need to visit the ‘Like Button’ page on the Meta for Developers website and scroll down to the ‘Like Button Configurator’ section.

Get code from Facebook developer site

Next, you can enter the URL of your Facebook page in the ‘URL to Like’ field. This will be the page you’d like to connect with the Facebook Like button.

After that, simply use the configuration to choose the Like button layout and size. You will also see a preview of the Like button.

Once satisfied with the preview, click on the ‘Get Code’ button.

This will bring up a popup showing you two pieces of code snippets under the ‘JavaScript SDK’ tab.

Copy the SDK code

Please note that if you directly add these code snippets to your WordPress theme, it may break your website. Plus, the code snippets will be overwritten when you update the theme.

An easier way of adding code to your is by using the WPCode plugin. It lets you paste code snippets to your website and easily manage custom code without having to edit the theme files.

First, you’ll need to install and activate the WPCode free plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, you can head to Code Snippets » Header and Footer from your WordPress dashboard. Now, you’ll need to copy the first code snippet and add it to your WordPress theme’s header.php file right after the <body> tag.

Simply copy the code and enter it in the ‘Body’ section. Don’t forget to click the ‘Save Changes’ button.

Add first code to header section

Next, you need to copy the second piece of code and paste it into your WordPress site to display the Like button.

To start, you can go to Code Snippets » + Add Snippet from your WordPress admin panel or click the ‘Add New’ button.

Click 'Add New Snippet' in WPCode

On the next screen, WPCode will allow you to select a snippet from the pre-built library or add a new custom code.

Go ahead and choose the ‘Add Your Custom Code (New Snippet)’ option and click the ‘Use snippet’ button.

Add custom code in WPCode

After that, you can give a name for your custom code and enter the second code snippet under the ‘Code Preview’ section.

Make sure to click the ‘Code Type’ dropdown menu and select ‘HTML Snippet’ as the code type.

Enter second code and select code type

Next, you can scroll down to the ‘Insertion’ section and select where you’d like the Facebook Like button to appear. For example, let’s say you want it to appear before the content.

Simply click the ‘Location’ dropdown menu and choose the Insert Before Content option under Page, Post, Custom Post Types.

Select location of like button

Once you’re done, you can click the ‘Save Snippet’ button.

You’ll also have to click the toggle and switch it from Inactive to Active.

Save and activate code snippet WPCode

That’s it, a Facebook Like button will appear on your website after entering the code.

What is Open Graph Metadata & How to Add it to WordPress?

Open Graph is metadata that helps Facebook collect information about a page or post on your WordPress site. This data includes a thumbnail image, post/page title, description, and author.

Facebook is quite smart in pulling up the title and description fields. However, if your post has more than one image, then it may sometimes show an incorrect thumbnail when shared.

If you are already using the All in One SEO (AIOSEO) plugin, then this can be easily fixed by visiting All in One SEO » Social Networks and clicking on the Facebook tab.

Next, click the ‘Upload or Select Image’ button to set a default post Facebook image if your article doesn’t have an open graph image.

Upload default Facebook image

Besides that, you can also configure an open graph image for each individual post or page.

When you’re editing a post, just scroll down to the AIOSEO Settings section in the content editor. Next, switch to the ‘Social’ tab and see a preview of your thumbnail.

Now scroll down to the ‘Image Source’ option, and you can then choose an open graph image for your post.

For example, you can select the featured image, attached image, the first image in the content, or upload a custom image to be used as an open graph thumbnail.

Image source for open graph

For more details and alternate ways to add open graph metadata, see our guide on how to add Facebook Open Graph metadata in WordPress.

We hope this article helped you learn how to add Facebook Like button in WordPress. You may also want to see our list of how to register a domain name and the best social media plugins for WordPress.

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

The post How to Add Facebook Like Button in WordPress first appeared on WPBeginner.

12 Most Useful WordPress Custom Post Types Tutorials

Would you like to learn more about custom post types?

WordPress allows you to create custom types of content. Besides posts and pages, you might like to add other types of content to your website, such as products, reviews, or recipes.

In this article, we will share the 12 most useful WordPress custom post types tutorials.

12 Most Useful WordPress Custom Post Types Tutorials

What Are Custom Post Types in WordPress?

Custom post types are a type of content on your WordPress site that are not the default posts and pages. Custom post types are often added to a WordPress site using custom code or plugins.

For example, you can create custom post types for portfolios, testimonials, and products. Many WordPress plugins also use custom post types to store data on your website.

How can you use custom post types on your WordPress website?

As the largest free WordPress resource site for beginners, we’ve written a lot about custom post types over the years. Let’s take a look at the most useful custom post types tutorials here on WPBeginner.

1. Decide Whether You Need A Custom Post Type

Before you start creating custom post types or taxonomies on your WordPress site, it’s important to evaluate your needs. A lot of times you can get the same results with the default WordPress posts and pages.

With the help of built-in categories and tags, you can sort your content in many different ways. For example, with pages, you can set up a hierarchical layout of content with child pages. You can also set up subcategories.

Using the default WordPress features makes content management easier in many ways. For example, a custom post type wouldn’t appear on your blog page or in your post RSS feeds.

After looking at the default options, you may find that you don’t need custom post types after all.

If you are unsure, then refer to this guide about when you need a custom post type or taxonomy in WordPress.

2. Create Custom Post Types in WordPress

Once you decide that you do need a custom post type, you’ll need to create it. You can do this with a plugin, or manually by using code.

The Custom Post Type UI plugin makes it easy to create custom post types and is recommended for most users. You do this from the ‘Edit/Add Post Types’ page.

Create a New Custom Post Type With a Plugin

Alternatively, you can add a custom post type by pasting a code snippet into your theme’s functions.php file. The advantage of this method is your custom post types won’t disappear if the plugin is deactivated, but it’s only suitable if you’re comfortable handling code.

To learn more, see our guide on how to create custom post types in WordPress.

3. Create a Custom Post Types Archive Page

Adding custom post types in WordPress has become very easy thanks to the Custom Post Type UI plugin. However, many beginners have trouble displaying them on their websites.

To add a custom post type archive page, you first need to make sure that archives are enabled for your custom post type. In most cases they are, but if not then you can enable them in Custom Post Type UI’s advanced options or by using code.

CPT UI turn on archive

Now you can visit the custom post type archive page. Let’s say your custom post type is called ‘movies’ and you have SEO friendly permalinks enabled. Then your post type archive will be located at:

http://www.example.com/movies/

You’ll need to replace ‘example.com’ with your own domain name, and ‘movies’ with your custom post type name.

You can now add this archive page to your navigation menu. You can also customize it by adding a custom template to your WordPress theme or using a theme builder like SeedProd.

Edit your post type page

We show you how to do all of these things step by step in our guide on how to create a custom post types archive page in WordPress.

4. Add Custom Post Types to Your Main RSS Feed

By default, WordPress only includes your blog posts in your site’s main RSS feed. This means that your custom post type content won’t be visible to your main RSS feed subscribers.

You can easily include all publicly available post types into your main RSS feed by adding the following code to your theme’s functions.php file or a site-specific plugin.

function myfeed_request($qv) {
if (isset($qv['feed']))
$qv['post_type'] = get_post_types();
return $qv;
}
add_filter('request', 'myfeed_request');

However, you can use a different code snippet to only include specific custom post types.

For more detail on both methods, see our guide on how to add custom post types to your main WordPress RSS feed.

5. Make a Separate RSS Feed for Each Custom Post Type

WordPress automatically generates separate RSS feeds for different archive pages of your website, including custom post types.

Let’s say you have a custom post type called ‘movies’ on your website. We’ve already seen that you can view all content created in that post type by visiting the post type archive page.

https://example.com/movies

To view the RSS feed, all you need to do is add /feed/ to the custom post type archive URL.

https://example.com/movies/feed/

Alternately, you can also view the feed by adding the post type parameter to your main WordPress RSS feed. For example:

https://example.com/feed/?post_type=movies

Now that you know how to access the RSS feeds for any custom post type on your website, you can use that URL to create links to your custom post type feeds.

For instance, you may want to display an icon or plain text link on the custom post type archive page, so that your visitors can easily subscribe to those posts.

To learn how to do that, see our guide on how to make a separate RSS feed for each custom post type in WordPress.

6. Include Custom Post Types in Search Results

By default, WordPress will never show custom post types in its on-site search results. That means your visitors may miss out on some great content, and you’ll miss out on extra page views.

The easiest way to include custom post types in WordPress search is with the SearchWP plugin. It’s easy to use and lets you search content that isn’t included in the default WordPress search.

To include custom post types in your searches, simply click on the plugin’s ‘Sources & Settings’ button. Here you can put a checkmark next to each post type you wish to include in search results.

Including custom post types in WordPress search

You can also choose how important each custom post type is when displaying search results, and customize the search engine in other ways.

To learn how, see our step by step guide on how to include custom post types in WordPress search results.

7. Create a Search Form for Custom Post Types

You can also create a custom search form that will only show results from your custom post type. For example, if you have a custom post type called ‘movies’, then you can create a special movie search form that only returns movies in the search results.

This kind of custom search helps your visitors view more pages and spend more time on your website. This will give off positive WordPress SEO signals like lower bounce rate and increased dwell time.

You can create an advanced search form for custom post types using the SearchWP plugin. It allows you to create a second search engine that will only search your custom post type. You can then create a custom search form that you can add to your posts or sidebar.

For more details, see our guide on how to create an advanced search form in WordPress for custom post types.

8. Add Categories to a Custom Post Type

By default, WordPress categories can only be used to organize posts, not custom post types.

You could create a custom taxonomy to organize your custom posts, but what if you want to use the same categories you use for your blog posts?

The easiest way to associate your custom post type with categories is the Custom Post Type UI plugin. It adds a ’Taxonomies’ area in the settings for each custom post type.

Allowing Custom Post Types to Use Categories

Simply check the ‘Categories (WP Core)’ box and you will be able to use categories to organize your custom post types.

See our guide on how to add categories to a custom post type in WordPress to learn more.

9. Add Sticky Posts for Custom Post Types

The sticky posts feature in WordPress allows you to add featured posts. By default, it only works for blog posts and not for custom post types.

You can enable sticky posts for your custom post types as well by installing the Sticky Posts – Switch plugin. You simply check the box next to the custom post types that you wish to support this feature.

Visit the Settings » Sticky Posts - Switch Page to Configure the Plugin

Now when you visit the admin page for that custom post type, you will notice a new column where you can make posts sticky.

All you need to do is click the star next to the posts you wish to feature.

Click the Star Next to the Posts You Wish to Make Sticky

These sticky posts will be shown on your WordPress home page. To display sticky posts on your custom post type archive page as well, you’ll need to add some code to your theme files.

You’ll find all the details in our guide on how to add sticky posts in WordPress custom post type archives.

10. Add User Submitted Content to Custom Post Types

You may want to allow users to submit content for custom post types on your site, such as movie reviews or recipes. This is an easy way of adding extra content to your site.

One way to do this is by giving users access to your WordPress admin area and assigning them the author user role. Alternatively, you can add a submission form to your website.

You can do that using the WPForms plugin. You will need the Pro version to access the post submissions addon, and the provided ‘Blog Post Submission Form’ template makes creating the form simple.

By default, user submitted posts are saved as ‘Drafts’ pending review. You can change the post type in the form’s settings so content is submitted to a custom post type instead.

For more details, see our guide on how to allow users to submit posts to your WordPress site.

11. Switch or Convert Custom Post Types

You may come across situations where you will have to merge or convert custom post types. For example, you may want to move items from one post type to another.

Simply install and activate the Post Type Switcher plugin. Upon activation, you should go to the custom post type admin page and select the posts you want to move.

When you bulk edit the posts, you will notice there is a new drop down menu allowing you to change the post type for that item.

You can learn more in our guide on how to switch or convert custom post types in WordPress.

12. Add Custom Meta Boxes for Post Types

Custom meta boxes allow you to add custom fields to the WordPress post editor screen. This way you can create additional input fields for your post types.

The easiest way to create custom meta fields in WordPress is by using the Advanced Custom Fields plugin. Simply click the ‘Add New’ button on the Custom Fields page.

After that, you should follow the on-screen instructions to create a group of custom fields to add to your custom post type.

For further details, see our step by step guide on how to add custom meta boxes in WordPress posts and post types.

We hope this tutorial helped you learn some cool tricks for custom post types in WordPress. You may also want to see our ultimate WordPress security guide, or check out our list of tips on how to speed up WordPress performance.

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

The post 12 Most Useful WordPress Custom Post Types Tutorials first appeared on WPBeginner.

How to Include Custom Post Types in WordPress Search Results

Do you want to include custom post types in WordPress search?

By default, WordPress will never show custom post types in its search results. That means your visitors may miss out on some great content, and you’ll miss out on extra page views.

In this article, we will show you how to include custom post types in WordPress search.

How to include custom post types in WordPress search

How to Include Custom Post Types in WordPress Search

Although WordPress has a built-in search feature, its quite limited. If you create custom post types in WordPress, then WordPress won’t include these items in search results.

The easiest way to include custom post types in WordPress search is by using the SearchWP plugin.

SearchWP is the best custom search plugin for WordPress, used by over 30,000 websites. It’s easy to use and lets you search content that isn’t included in the default WordPress search.

To include custom post types in WordPress search, you’ll need to install and activate SearchWP. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, click on the new ‘SearchWP’ button in your website’s toolbar. You can then go ahead and click on ‘Activate License.’

Activating the SearchWP WordPress plugin

After you’ve done that, click on the ‘License’ tab.

You can now paste your license key into the ‘License’ box. You’ll find this key in the email you got when you purchased SearchWP and in your account on the SearchWP site.

The SearchWP advanced search WordPress plugin

Once you’ve pasted this information into the ‘License’ field, go ahead and click on the ‘Activate’ button next to it.

You can now set up SearchWP to include custom post types in WordPress search results.

To start, simply click on the ‘Engines’ tab.

SearchWP's Engine tab

On this screen, you’ll see sections for the different types of content on your WordPress site that SearchWP includes in its search results.

By default, this plugin searches your website’s media, posts, and pages.

To include custom post types in your searches, click on the ‘Sources & Settings’ button.

Configuring the SearchWP search plugin

Under ‘Sources,’ you’ll see all your post types listed along with comments, media, and more. Simply find all of the custom post types that you want to include in your search results, and check their boxes.

After that, click on the ‘Done’ button.

Including custom post types in WordPress search

You’ll now see a new section for each of your custom post types on your WordPress blog.

In each section, SearchWP shows all the attributes that it will look at when searching your custom post types.

For each attribute, SearchWP has an ‘Applicable Attribute Relevance’ scale. This is the weight that SearchWP gives to this attribute when searching your custom post types.

By default, the sliders for Title, Slug, and Excerpt are all the way to the right, so they have the most weight. The slider for Content is in the center, so it has less weight.

SearchWP's attribute weight settings

Want to change an attribute’s weight? Simply drag its slider.

You may want to try different relevancy settings to see what gives you the most accurate and helpful search results.

You can also remove attributes. For example, your custom post type may have attributes that you want SearchWP to ignore, like attributes that you added for your internal reference only.

To add or remove attributes, click on the ‘Add/Remove Attributes’ button.

Adding custom post type attributes to WordPress search

To add an attribute, simply click to check its box.

If you want SearchWP to ignore an attribute, then go ahead and uncheck its box.

Removing custom post type attributes from WordPress search

If you’ve created any custom taxonomies or custom fields, then you might want SearchWP to look at this content when searching your custom post types.

To do this, simply click on either the ‘Custom Fields’ or ‘Taxonomies’ fields. You can then type in the name of the attribute that you want to add, and click on it when it appears.

Adding custom post types in WordPress search

When you’re happy with your settings, click on the ‘Done’ button.

If you’ve added any attributes, custom fields or taxonomies, then you can change how much weight this content has. Just like we mentioned earlier, moving the slider to the right will give this attribute more weight which means it will have a bigger impact on the search results.

Changing the attribute relevancy for custom post types in WordPress search

Once you’ve finished customizing SearchWP’s settings, scroll to the top of the screen.

You can then click on the ‘Save Engines’ button to save your changes.

Saving your WordPress custom search settings

At this point, SearchWP may show you the message ‘The index needs to be rebuilt.’

If you see this message, then go ahead and click on the ‘Rebuild Index’ button. This will add your custom post types to your site’s search index, so they will show up in the search results.

Rebuilding the WordPress search index

That’s it. WordPress will now include your custom post types in its search results.

Once you’ve done that, you may want to enable some advanced settings that will make it easier for visitors to find what they are looking for.

To take a look at these settings, click on the ‘Advanced’ tab.

SearchWP's advanced search settings

This screen lists some of the more advanced settings that you may want to use.

For example, if you want to show results that don’t quite match the term that the visitor searched for, then you can check the ‘Partial matches (fuzzy when necessary)’ box.

The 'fuzzy' partial search settings in SearchWP

For more tips on SearchWP’s advanced settings, please see our step by step guide on how to improve WordPress search with SearchWP.

After adding custom post types to WordPress search, you may want to create a search form that only show the search results from your custom post type category, which can make it easier for visitors to find what they’re looking for. For more details, see our step-by-step guide on how to create advanced search form in WordPress for custom post types.

We hope this article helped you learn how to include custom post types in WordPress search. You can also go through our guide on how to make money online blogging with WordPress, and see our expert pick of must have WordPress plugins for business sites.

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 Include Custom Post Types in WordPress Search Results first appeared on WPBeginner.

How to Add Custom Post Types to Your Main WordPress RSS Feed

Do you want to add custom post types to your main WordPress RSS feed?

By default, the WordPress RSS feed only shows your recent blog posts. However, if you are using custom post types for other content, then you may want to include them in your main RSS feed as well.

In this article, we will show you how to easily add custom post types to your main WordPress RSS feed.

Add custom post types to your main WordPress RSS feed

Why Add Custom Post Types to Main RSS Feed in WordPress?

By default, WordPress comes with two commonly used content types called posts and pages. However, you can also create custom post types to add more content types if needed.

For instance, a movie review website may want to create a custom post type using custom taxonomies suitable for that particular content type.

Custom post type preview

Now, your custom post types can have their own RSS feed, which users can access by adding /feed/ at the end of the custom post type archive URL.

https://example.com/custom-post-type/feed/
https://example.com/movies/feed/

However, these custom post-type feeds are not easily discoverable.

For example, when a user enters your website’s URL into their feed reader, they will only be shown the subscription option for your main WordPress RSS feed, and custom post types won’t be included.

Feed reader showing main RSS feed at the top

That being said, let’s see how to easily fix that by adding a custom post type to your main WordPress RSS feed. We will cover two methods, so you can use the links below to jump to the method you want to use.

Method 1: Add All Custom Post Types to Your WordPress RSS Feed

This method is for you if you want to add all the custom post types to your WordPress RSS feed.

If you are using an eCommerce plugin like WooCommerce, then using this method will also enable you to include the Products custom post type in the main RSS feed.

You can easily do this by adding custom code to your theme’s functions.php file.

However, keep in mind that making the smallest error when entering code can make your website inaccessible.

That’s why we recommend using the WPCode plugin to add code to your website. It is the best custom code snippet plugin on the market and is the easiest way to add custom code without breaking your site.

First, you need to install and activate the free WPCode plugin. For more instructions, see our beginner’s guide on how to install a WordPress plugin.

Note: The free WPCode plugin is all you need for this tutorial. However, upgrading to the premium WPCode plugin will give you access to a cloud-based snippet library, smart conditional logic, code revisions, and more.

Upon activation, head to the Code Snippets » + Add Snippet page from the WordPress admin sidebar.

From here, click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

This will take you to the ‘Create Custom Snippet’ page, where you can start by typing a name for the code snippet.

After that, simply select ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right.

Choose PHP as the code type for the Custom Post type code

Next, you need to copy and paste the following code into the ‘Code Preview’ box.

This code will allow you to add all publicly available post types to your main WordPress RSS feed.

function myfeed_request($qv) {
if (isset($qv['feed']))
$qv['post_type'] = get_post_types();
return $qv;
}
add_filter('request', 'myfeed_request');
Paste the code for adding custom post type to the WordPress RSS feed

Once you have done that, just scroll down to the ‘Insertion’ section and choose ‘Auto Insert’ as the insert method.

Now, the code will automatically be executed on your WordPress website once you have activated and saved the snippet.

Choose an insertion method

After that, scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active’.

Finally, simply click the ‘Save Snippet’ button to save and execute the custom code on your website.

Save Snippet for adding custom post type to WordPress RSS feed

All the custom post types will now be added to your main WordPress RSS feed.

To make sure that your code is working, you can check your RSS feed by visiting a feed reader.

For this tutorial, we’ll be using Feedly, which is an online tool that allows users to add RSS feeds and websites to their Feedly account, easily organize their content, and receive updates in real time.

Once you are there, simply type your website URL under the ‘Follow your favorite websites’ option.

The custom post type content will now be displayed in your WordPress RSS feed.

Check WordPress RSS feed

Method 2: Add a Specific Custom Post Type in the WordPress RSS Feed

If you want to add a specific custom post type to the main WordPress RSS feed, then this method is for you.

To do this, you will have to add custom code to your theme’s functions.php file. But keep in mind that the smallest error while entering the code can break your website.

That’s why we recommend using WPCode instead. It is the #1 WordPress code snippet plugin on the market. Using WPCode is the easiest and safest way to add custom code to your WordPress website.

First, you need to install and activate the free WPCode plugin. For more instructions, see our beginner’s guide on how to install a WordPress plugin.

Note: The free WPCode plugin is all you need for this tutorial. However, upgrading to the premium WPCode plugin will give you access to a cloud-based snippet library, smart conditional logic, code revisions, and more.

Once the plugin is activated, visit the Code Snippets » + Add Snippet page from the WordPress admin sidebar.

From here, you need to click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

You will now be directed to the ‘Create Custom Snippet’ page, where you can start by typing a name for your code snippet.

This name won’t be displayed anywhere and is just used for identification purposes.

Next, choose the ‘PHP Snippet’ option from the ‘Code Type’ dropdown menu on the right.

PHP as code type for the specific custom post type code

Once you have done that, you need to copy and paste the following code into the ‘Code Preview’ box.

function myfeed_request($qv) {
    if (isset($qv['feed']) && !isset($qv['post_type']))
        $qv['post_type'] = array('post', 'movies', 'books');
    return $qv;
}
add_filter('request', 'myfeed_request');

After adding the code, type the name of the custom post type next to where ‘[‘post_type’]’ is written in the code. In our example, we have ‘post’, ‘movies’, and ‘books’.

This custom post type will be added to your main WordPress RSS feed.

Paste code to add a custom post type to RSS feed

Now, scroll down to the ‘Insertion’ section and select the ‘Auto Insert’ setting.

The custom code will now be automatically executed on your WordPress website upon activation.

Choose an insertion method

Next, you need to scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active’.

Finally, don’t forget to click the ‘Save Snippet’ button to save and execute the code on your WordPress website.

Save your snippet

To make sure that the custom post type has been headed, you will need to visit a feed reader like Feedly.

Once you are there, simply type in your website’s URL to search for its RSS feed.

The custom post type content will now be displayed in your WordPress RSS feed.

Check WordPress RSS feed

We hope this article helped you learn how to add custom post types to your main WordPress RSS feed. You may also want to see our tips to optimize WordPress RSS feeds and our top picks for the best WordPress RSS feed plugins to boost website 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 Add Custom Post Types to Your Main WordPress RSS Feed first appeared on WPBeginner.

How to Create Advanced Search Form in WordPress for Custom Post Types

Do you want to create an advanced search form in WordPress for custom post types?

If you use custom post types, then you may want to create a form that allows visitors to search only that content. This can help people find what they are looking for and keep them on your site for longer.

In this article, we will show you how to create an advanced search form for custom post types in WordPress, step-by-step.

How to create advanced search form in WordPress for custom oost types

Why Create an Advanced Search Form for Custom Post Types?

Custom post types allow you to go beyond posts and pages and make different content types for your website. For example, we use custom post types here at WPBeginner to organize our Deals and Glossary sections.

However, WordPress doesn’t include custom post types in its search results by default. As a result, visitors may miss out on important content, and you will miss out on pageviews.

Thankfully, you can include custom post types in your search results using a WordPress search plugin. You can even go one step further and create an advanced form that searches custom post types only.

For instance, at WPBeginner, we have created custom post type search forms on our Deals and Glossary pages.

An example of a custom search form on the WPBeginner website

Often, this kind of advanced search form will help visitors find what they are looking for faster, which will improve the visitor experience and reduce the bounce rate.

First, you can see our guide on how to make custom post types in WordPress. Then, you can jump into our tutorial on how to create an advanced WordPress search form for custom post types.

Create a New WordPress Search Algorithm With a WordPress Plugin

The easiest way to create an advanced search form for custom post types is by using the SearchWP plugin. It’s the best search plugin and allows you to search content that WordPress ignores by default.

For example, you can make blog comments searchable and add PDF indexing and searching to your website.

How to Set up SearchWP

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

Upon activation, you must go to SearchWP » Settings and click on the ‘General’ tab.

Activating the SearchWP search plugin

You now need to enter your license in the ‘License Key’ box. You can find this information in your account on the SearchWP site.

Once you are done, make sure to click the ‘Verify Key’ button.

Creating a Custom Search Algorithm

Your next task is creating a custom search algorithm. It allows you to specify the content that SearchWP includes in its search results, like pages, posts, media, and any custom post types.

To get started, you need to go to SearchWP » Algorithm in your WordPress admin dashboard.

Creating a search algorithm using SearchWP

Here, you will see a section for every content type that SearchWP includes in its search results.

To add your custom post type, just click the ‘Sources & Settings’ button.

How to add custom post types to a WordPress search engine

In the popup that appears, check the box next to each custom post type that you want to include in the search results.

After that, click on ‘Done’.

Creating a WordPress search form for custom post types

SearchWP will add a new section for each custom post type. Each section shows all the attributes that SearchWP will include in its searches, such as the title, slug, and excerpt.

If you want to add or remove attributes, then simply click on ‘Add/Remove Attributes’.

Creating a search form for custom post types

In the popup, check the box next to each attribute you want to include in the search results.

To remove an attribute, you can uncheck its box instead.

Adding attributes to the SearchWP search algorithm

In this popup, you can also make custom fields searchable in WordPress.

When you are happy with the changes you have made, go ahead and click on ‘Done’.

You will notice that each attribute also has an Application Attribute Relevance slider. This controls how SearchWP ranks the content when building its search results page in WordPress.

If an attribute has high relevancy, then it will have a bigger impact on the search results. By contrast, content that matches an attribute that has less relevancy will appear lower in the search results.

For example, if you move the ‘Title’ slider to the right and the ‘Content’ slider to the left, then a post’s title will carry more weight than the content.

Creating a custom search form for your WordPress blog or website

Every WordPress website is unique, so you may want to try different relevancy settings to see what gives you the most accurate and helpful search results.

For example, if you have created a ‘customer reviews’ custom post type for your online store, then this is important content, so you may want to give it a high relevance.

When you are happy with how the search feature is set up, just scroll to the top of the screen and click the ‘Save’ button.

Saving the custom post type search algorithm

SearchWP will now rebuild the index automatically. Depending on the speed of your Internet connection and your WordPress hosting provider, this may take a few minutes.

As soon as you see ‘Index Status 100%’, you will know that SearchWP has added your custom post types to its search index.

Adding custom post types to the WordPress search index

Your WordPress blog, website, or online marketplace will now include custom post types in its search results.

Create an Advanced Search Form for Custom Post Types

With that done, you are ready to make an advanced form that searches your custom post types only.

To get started, head over to SearchWP » Search Forms and click the ‘Add New’ button.

Creating a new custom search form

This creates a new form, ready for you to customize.

To give this form a unique name, click on the small pencil icon next to ‘Search Form 1’.

Renaming the custom search form using SearchWP

You can now type in a name for the custom search form.

This is just for your reference, so you can use anything that helps you identify the form in your WordPress dashboard. This is particularly important if you plan to create multiple search forms in WordPress.

Creating an advanced search form using SearchWP

After that, you can choose the layout you want to use using the ‘Layout Theme’ thumbnails.

Simply click on the different themes to see a preview of how this style will look on your WordPress website.

Choosing a theme for the custom search form

To create a search form for custom post types, you will typically want to use either ‘Basic’ or ‘Quick Search’.

These styles don’t allow visitors to search by category, which helps to keep them focused on custom post types.

Creating a quick search form for your WordPress website or blog

After making your decision, scroll to the ‘Custom Styling’ section.

The settings you see may vary depending on your theme layout. For example, if you selected ‘Quick Search’, then the ‘Quick Search’ setting will be enabled by default.

Adding custom styling to a search bar in WordPress

You can disable and enable the different options using their toggles.

The live preview will update automatically as you make changes, so you can try different settings to see what works the best.

By default, the form will search media, pages, and posts and ignore custom post types. To include custom post types, you need to find the ‘Type of search’ field and give it a click.

Searching posts, pages, media, and more using SearchWP

You can now type in the name of each custom post type.

When the right post type appears, give it a click to add it to the search.

Adding custom types to a WordPress search bar or form

Do you want to search custom post types only and ignore all other content?

Then just click the small ‘X’ next to ‘Media’, ‘Pages’, and ‘Posts’.

Removing post types from a custom search algorithm

With that done, the form will search your custom post types only.

When you are happy with how the form is set up, scroll to the ‘Form Style’ section. Here, you can choose between different form styles, add a border, change the font size, and more.

Changing the WordPress form style

Under ‘Button Style’, you can customize the ‘Search’ button that appears in the form.

When you are happy with how the form is set up, scroll to the top of the screen and click on ‘Save’ to store your settings.

Saving the custom search settings on your website or blog

How to Add the Custom Post Types to WordPress

Now, you are ready to add the search form to WordPress using either a shortcode or block.

The easiest method is to use a block, so head over to the page or post where you want to add the custom post type form.

You can then click on the ‘+’ icon and type in ‘Search Form’.

Adding a search block to your WordPress blog or website

When the right block appears, give it a click.

Next, open the ‘Select a Form’ dropdown menu and choose the search form you made during this tutorial.

Showing a custom search from in WordPress

When you are ready to make the search form live, simply click on either ‘Update’ or ‘Publish’. Now, you can visit your website to see the search form in action.

Another option is to add the search form using a shortcode.

To get the shortcode, you need to head over to SearchWP » Search Forms. Here, find the search form that you want to show and copy the value in the ‘Shortcode’ column.

Getting the shortcode for a custom search form

You can now add the shortcode to any page, post, or widget-ready area. For step-by-step instructions on how to do this, please see our guide on how to add a shortcode in WordPress.

We hope this article helped you learn how to create an advanced search form in WordPress for custom post types. You may also want to see our custom post types tutorials and our expert picks for the best WordPress plugins to grow 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 How to Create Advanced Search Form in WordPress for Custom Post Types first appeared on WPBeginner.

Little Things on My Personal Site

I updated my personal website the other day. Always a fun project since it’s one of the few where it’s 100% just me. It’s my own personal playground with no other goal than making the site represent me to have a little fun. It’s not a complete re-write, just some new paint.

I thought I’d document little bits of it here just to hone in on some of the bits of trickery in the spirit of learning through sharing.

Screenshot of the entire length of the homepage of ChrisCoyier.net. Four major boxes of content: build-your-own bio in yellow, blog posts in purple, action items in red, and a video in blue.

Hoefler Fonts

I think the Inkwell family is super cool. I like mix and matching not just the weights but the serif and sans-serif and caps vs not.

From the Inkwell introduction post.

I used Inkwell in the last design as well, but I was worried that it was a little too jokey for blog post body copy. My writing is extremely casual, but not always, and Inkwell is way too jovial for serious topics. I went with Ideal Sans for body copy last time, but the pairing with Inkwell felt a little off.

This time I went with Whitney for general body copy, which is still pretty lighthearted, but works when the copy is more straight toned.

Blogroll

If you’re going to zebra-stripe a table, you’d do something like…

tr:nth-child(even) {
  background-color: var(--color-1);
}
tr:nth-child(odd) {
  background-color: var(--color-2);
}

What if you wanted to rotate four colors though? It’s still :nth-child trickery, selecting every four, and then offsetting. Here, I’ll do it with list items in Sass (the nesting is nice, not having to repeat the selector):

li {
  &:nth-child(4n) a {
    color: $blue;
  }
  &:nth-child(4n + 1) a {
    color: $yellow;
  }
  &:nth-child(4n + 2) a {
    color: $red;
  }
  &:nth-child(4n + 3) a {
    color: $purple;
  }
}

That’s what I did to build the colorized blogroll:

Note the Sass used above… I used Sass because it was already in use on the project. All I had to do was open CodeKit and the processing was ready-to-go.

Oh, and blogrolls are cool again.

Chill YouTube

I used this click-to-load-YouTube-(at all) technique which is still extremely clever. Having an <iframe> that behaves just like a YouTube embed would but only loading a simple static image (rather than heaps and heaps of resources) is great for performance and behaves essentially the same as a normal YouTube embed does.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>
Comparison of a YouTube embed and an iframe with just an image in side. Barely different at all, visually.

Custom Post Types everywhere

I’m a big fan of giving myself structured data to work with. In WordPress-land, that often means Custom Post Types paired with something like the Advanced Custom Fields plugin for just the right data needed for the job.

Three CMS input screens: Add New Conference (with conference related fields), Add New Interview, and Add New Action Item.

Then I can loop over stuff and output it however I want. This isn’t that fancy, but it opens up whatever future doors I want to a lot easier.

Build your own bio

There is nothing fancy about how this works:

Bio generator showing HTML for my personal bio. Radio buttons next to it to change 1st to 3rd person, length, and code type of bio.

I literally made 18 <div> elements (3 lengths * 2 styles * 3 code types = 18) and swap between with a bit of JavaScript that calculates a class string based on the current choices, selects that class, and unhides it while hiding the rest.

$(".bio-choices input").on("change", function () {
  var lengthClass = ".bio-" + $("input[name=length]:checked").attr("id");
  var styleClass = ".bio-" + $("input[name=style]:checked").attr("id");
  var codeClass = ".bio-" + $("input[name=code]:checked").attr("id");
  var selector = lengthClass + styleClass + codeClass;

  $(".bio").hide();
  $(selector).show();
});

jQuery! That’s what was already on the site, and the site also uses the jQuery version of FitVids for responsive videos — so I figured I’d just leave it all be.

If I was going to re-write these bits of the site, I’d probably rip out jQuery and use this for FitVids. Then I’d find a way to only have three bios (maybe six if I can’t find a nice way to handle first vs. third person with word swaps) and then get the rest by automatically converting the formats somehow (maybe some cloud function if I had to).

ztext.js

I used ztext for the header! It’s this kinda stuff that makes the web feel extra webby to me. I’m not sure I’d do something with quite so much movement on a site like CSS-Tricks (because people visit it more often and the time-on-site is higher). But for a site that people might land on once in a blue moon, it has the right amount of cheerful levity, I think.

Background SVG

I was stoked to see the SVG Backgrounds site get an upgrade lately. I was playing around in there and was like YES, I’m doing this.

SVG backgrounds website showing off wavy dark gray lines over black, configurable through a controls panel.

I went with a background-attachment: fixed look, which I think I like. I also added the slideout footer effect on desktop, but I’m less sold that it’s working here. It’s more fun when the background changes, and that doesn’t happen here. I’ll probably either change the background of the footer, or rip the effect out.

Filter trick for links

Some of the different sections on the site use a different primary highlight color, and I’m having the links in those sections follow that color. That might be questionable (perhaps all links should be blue) but, so far, I think it makes decent sense (they still have hover and focus styles). When you have a variety of colors and styles for interactive elements though, it often means that you have to create special alternate styles for hover and focus. That could mean crafting bespoke color alterations for each color. Not the end of the world, but I really like this little trick for interactive styles that ends up with a consistent look across all colors:

a:focus, .button:focus,
a:hover, .button:hover {
  filter: brightness(120%);
}

Anyway! This was just a couple hours of paint on this site. Mostly because blogrolls were the CodePen Challenge that week. But I can never touch a site I haven’t in a while and just do one thing. I get sucked in and gotta do more!


The post Little Things on My Personal Site appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.