How to Easily Build Your WordPress Business Website with Custom Types

If you are a business owner looking to grow your brand, you need a business website. One of the easiest ways to do it is by using Toolset and custom post types.

Not only is building a business website affordable and open 24/7, but it can also do wonders for promoting your company to a broader audience and increasing conversions.

However, the problem is, as your business begins to grow, organizing and displaying the products, services, and offers you have for customers becomes more difficult to do – even if you’re using the popular WordPress content management system.

Luckily, Toolset makes it easy to create rich WordPress business websites by using custom content to better organize what your business offers.

But first, we’re going to share with you how to launch a WordPress business website.

01Step Get a domain name and choose a web hosting provider

If you already have a domain name and a reliable hosting provider, skip to Step 4 to find out how to create custom post types

Before you can launch your WordPress business website, you’ll need to register a domain name and invest in a web hosting provider.

A domain name is the URL people type in their web browser to get to your website. It’s also the link people click in search results when your website pops up in response to a query they entered. A good example of a domain name is google.com.

Once you register your website’s domain name, you can get hosting. Web hosting is the place where your website’s data is stored. Every website on the internet needs hosting.

There are plenty of reliable WordPress hosting companies available that offer a full suite of features, speed optimization, and security features to ensure your site’s files are stored in a secure environment, delivered to site visitors as quickly as possible, and function the way they’re supposed to every single time.

The great thing about some of the highest quality web hosting providers on the market today is that they offer free domain name registrations as part of their hosting plans.

So, before you finalize your domain name registration, take a look at which hosting provider you might want to invest in. You might be able to save some money and get a free one just for signing up for hosting services.

Here are some of the top WordPress hosting providers:

Every hosting provider will offer a different set of features and will come in at a different price point. That’s why you should prioritize the features that are most important you, and set a budget for yourself, before investing in a hosting plan.

Luckily, there are plenty of WordPress hosting providers to fit all size budgets, so finding one to suit your business needs shouldn’t be difficult.

02Step Choose a WordPress Theme for your business website

If you’ve already chosen a WordPress theme, skip ahead to Step 4 to find out how to create custom post types.

There are endless amounts of free and premium WordPress themes on the market for WordPress websites for business. And, if you aren’t sure what you’re looking for, it can be tough to know which one is the best choice for your WordPress business site.

That’s why we’re going to share with you some of the very best business themes for WordPress available that work seamlessly with Toolset and custom post types.

OceanWP

OceanWP

OceanWP is one of those free WordPress themes that work for all businesses, no matter the industry. With plenty of demos to choose from, and an easy to use one-click demo installer, getting started has never been easier. Not to mention, creating custom post types, fields, and taxonomies is a cinch since it works so well with Toolset.

In addition, rest assured your site will render perfectly on all mobile devices, that your eCommerce store will generate money, and your international audience will be able to view your site’s content in their native language thanks to responsive design, WooCommerce compatibility, and multilanguage support.

Astra

Astra

One WordPress business theme we highly recommend using with Toolset is Astra. To start, it comes optimized for stellar performance, so your visitors never abandon your site because of slow page loading times. There are several pre-built websites available to get you started, multiple layouts to help with your custom design, and over 700 Google Fonts so you never have to worry about importing your favorite typography.

Astra is also WooCommerce ready so you can monetize your website and sell either physical or digital products, or both. Not to mention, it’s translation ready so you can reach a global audience, it’s accessible and follows WCAG 2.0 standards, and comes with the promise that it will be free – forever.

GeneratePress

GeneratePress

GeneratePress is perfect for those looking to add custom post types to their site with ease using Toolset. It comes optimized for speed and SEO, as well as packed with plenty of customization options so you can create a website that stands out. For instance, you can change colors and fonts using the Live Theme Customizer, choose from over 9 widget areas, and translate your site’s content using the popular WPML translation plugin.

GeneratePress also comes WooCommerce and BBPress compatible so you can monetize your blog and build a forum section to boost user engagement. And best of all? You can make all changes in the Theme Customizer and see it in the live preview before committing to the changes, so you know your site looks exactly the way you want it to.

Genesis

GeneratePress

Genesis is one of the most popular frameworks in the WordPress environment. It was built super lean so you can create one of a kind business sites with it, and of course, Toolset aids you in helping add custom post types to complement your traditional posts and pages. Add any Genesis compatible themes on top of this strong framework, create a unique header section, complete with your business logo and company name, and even see all changes in the live preview before making official changes.

In addition, Genesis comes mobile-friendly so those on the go can always access your website, it supports multiple featured content widgets and is accessible so people from all walks of life can easily access what you have to offer.

Avada

Avada

Avada is one of the best-selling WordPress themes of all time, and for good reason. It is so multipurpose you can literally create any type of business website with it, complete with Toolset custom post types, and generate more money than ever before. Choose one of the free demos, import it with a simple click, and customize any element on your site you want including colors, typography, layouts, sidebars, widgets, and more.

This exceptional theme has parallax effects, one-page site capability, built-in SEO optimization for the best search rankings possible, and WooCommerce support for those wanting to sell their products and services, create membership sites, and make a profit off their hard work.

Divi

Divi

Divi is a feature packed WordPress business theme that gives you full creative control over your entire website thanks to the built-in Divi Builder. There are tons of custom elements for creating things like buttons, sliders, pricing tables, search bars, testimonials, and so much more. Just point and click using the WYSIWYG drag & drop builder, and change anything on your website you want.

If you need some inspiration or want to get up and running in minutes, import one of Divi’s beautiful pre-made layouts and go from there. Lastly, sync global items across multiple web pages to save you time during the design process, create custom post types using Toolset, complete with custom fields and taxonomies so customers always know what you have to offer, and even share your creation with the Divi community (and see what they’re up to too).

03Step Create Your WordPress Business Website’s Pages and Blog Posts

Once you’ve chosen, installed, and activated a WordPress business theme on your website, it’s time to create your basic pages and publish blog posts.

Create Your Business Website’s Pages

These pages are designed for content on your website that will not be a part of your normal blogging schedule and will be easy for site visitors to find.

The most common basic pages include:

  • About Page
  • Contact Page
  • Disclaimer Page
  • Privacy Policy

These pages are static, meaning they don’t change often. They have key information about your business in them that anyone visiting your site may need, no matter the reason they are there. And lastly, they don’t require you to do anything special in the WordPress dashboard. All you need to do is create, customize, and publish them.

Of course, there are many other pages your individual WordPress business website may need, but this is a good starting point.

To create a page in WordPress, just go to Pages > Add New.

WordPress page

Give your page a title, add the content you want, and publish it so it becomes live on your website.

Create and Publish Your Website’s Blog Posts

Blog posts are dynamic, will appear in chronological order, and are the main content your site visitors will read when they come to your business site. They can be very helpful for sharing news, product launches, and information related to your business with readers both loyal and new.

And, if you do it right, you can use your blog posts in your email marketing campaigns to share important information with those that have already shown an interest in what you have to offer.

Much like you would a website page, you can create a blog post by navigating to Posts > Add New.

WordPress post

Again, give your post a title, add the content you want to display, and click publish when you’re done.

Don’t forget, you can organize your blog posts according to categories, and you can assign specific tags to them so that when readers come to your business site looking for specific information, they can easily find what they’re looking for.

Categories

04Step Create Custom Post Types to Organize Content Efficiently

Every WordPress business website displays different information. One site may show the products that a business offers. Another may show different services. Another might show locations. The problem is, there is no good way to organize this content and display it to site visitors using the default WordPress post types.

Of course, simple, static content is best displayed using WordPress pages, and blog content is best displayed using WordPress posts. But what about other content, such as your business’ products, services, and offers?

There are five default WordPress post types, including posts, pages, attachments, revisions, and navigation menus. But they cannot be customized to create complex and detailed post types you may need on your website.

And, while you might think that using WordPress pages is the best way to create, organize, and display the complex information you need customers to see, it’s really not. This is especially true if you have a large online shop with tons of products or many services for people to choose from.

Here are some common post types you might want to add to your website:

  • Events: You can display upcoming events your business is hosting on your website for people to see. Or, you can let site visitors upload events they’re hosting or think would interest your site visitors onto a calendar on the front-end of your website.
  • Portfolios: Display extensive portfolios of your business’ best work for future clients to check out when deciding whether to hire you or not.
  • Directories: You can create a directory for nearly anything, including entire industries – real estate, event planning, the job force, hospitality (hotels and restaurants), classifieds, travel, local businesses, and so much more. You can be the one to manage the directory yourself or allow site visitors to upload their listing to your site.
  • Property Listings: Maybe you operate a real estate business and want to show people which properties are for sale or rent. Again, you can let people upload their listings too.
  • Testimonials: Add social proof to your business website so future customers can see just how great you are.
  • eCommerce Products and Services: Beyond what a simple eCommerce plugin can do for you, you might want to display your online shop’s products and services in a particular way that’s not supported by your current platform.
  • Recipes: Food blogs are all the rage and so is displaying recipes for site visitors to read and follow on their own.

See an example of how some custom post types will look like on the backend of your website:

Custom post types

As you can see, this type of custom content cannot be added to your website using the default WordPress posts and pages. Not only will it look wrong, but it will also be hard to organize for site visitors to find once they’re on your website.

If you’re still not sure whether you need to create a custom post type, here are some signs:

  • The content you’re creating doesn’t look like a traditional post that site visitors will read
  • There is no need for the content to be listed chronologically
  • Categories or tags may not help you organize the content in the best way possible
  • You want to add additional fields to complement your content
  • The content cannot be a part of your WordPress pages because there is too much content or the content type doesn’t fit

When you use WordPress custom post types, you make it easy to organize the content in the WordPress admin and display it on the front-end of the site without having to deal with the default WordPress post types or WordPress web development.

In fact, using WordPress custom post types makes organizing WordPress business websites much easier and intuitive.

Take a look.

Front-end view

Look at the pictures below. These are three pages where services are usually listed:

Single services page
01. Single service page – displays a single service as well as additional information about it – price and service icon, in our example.
02. Homepage – displays example services
03. Services archive page – displays an index of all services

Back-end view

This is how your site will appear from your WordPress admin page:

01. Services custom posts in your WordPress Dashboard – Services are separated from other content and listed together in the Services section
02. Single service post including custom fields – WordPress Dashboard – When you edit a single service, you can see additional fields for storing details of that service:
  • service icon
  • service price

As you can see, using a WordPress custom post type allows you to display your company’s products, services, or offers as content that is separate from your site’s posts and pages. It also allows you to add additional fields to include more information such as price, icon, and other details.

Such an approach makes content management easy for your site’s editors, even if they are not technically proficient. This ensures the maintenance of your business WordPress site is always consistent and easy to handle. Not to mention, no one on your team will ever need to touch a line of code.

The problem is, manually adding WordPress custom post types is not only challenging and time-consuming, but it is also very code-heavy, which is a problem for those that don’t understand how to code or want to deal with the added hassle.

That’s why we’re here to show you how to build such a site from your WordPress Dashboard without writing a single line of PHP using Toolset.

Part 1 How to add Custom Content to your WordPress Admin

We will start by defining relevant structures for storing custom content for Services.
We will create:

  • a Custom Post Type for storing Services,
  • a Group of Custom Fields for storing details of Services (service icon and price)

The outcome of this step

Outcome of this step
After completing this step in your WordPress Dashboard you will see a new section called Services. Each service will include custom fields (service icon and price in this example).

Requirements

Steps to replicate

Provided you have the Toolset Types plugin installed and activated in your WordPress, follow the steps below:

01. Create a new Custom Post Type to store your Services

Go to Types -> Custom Post Types, and add a new Custom Post Type

Fill out the Name and Description section:

  • Custom post type name plural: Services
  • Custom post type name singular: Service
  • Slug: service
  • Icon: portfolio

In the Display Section check the Excerpt field.
Save changes.

The outcome of this step

In your WordPress Dashboard you will see a new section called Services. Each service will include custom fields.

After completing this step you should see a new section called Services in your WordPress Dashboard.

You can add Services with the following fields:

  • title
  • body
  • excerpt

We need to add some custom fields for strong Service details: an icon and price.

02. Create a new Group of custom fields to store Service Details

Go to Types -> Custom Fields, add a New Group.

  1. Assign the group a name: Service Details.
  2. Associate your group with Services Custom Post Type:
    In the ‘Where to display this group’ section click Edit for ‘Post Types: Displayed on all content types’ and choose Services
  3. Add fields:
    • Use ‘Single line’ field for Font Awesome icon code
    • Use ‘Numeric Field’ for Price

The outcome of this step


If everything goes ok, you should see two additional fields in your single service edit screen. See the Service Details section in this picture.

That’s it! Your WordPress admin has been successfully customized to store Services. You are free to add some example services now!

Part 2 How to display your WordPress custom posts

If you have added some services to your WordPress it means that they are safely stored (in your WordPress database, to be precise). Your WordPress database stores all other content as well, such as pages, blog posts, comments, etc.

Now, whenever you need to display your items, you need to instruct your WordPress about what kind of content to fetch from the database (e.g., 3 random services), and what exactly you want to output (e.g., the service title, icon, excerpt, and price).

The picture illustrates this.

How to fetch your content from the database?

This is usually done in your WordPress theme templates using PHP and by creating or modifying a WordPress query.

Now imagine that the work behind the question mark in the picture above is done for you by a plugin. A plugin that allows you to achieve the same without getting your hands dirty with PHP. A plugin that eliminates the need to access your site via FTP. All you would need is your WordPress Dashboard.

Such a plugin exists and it’s called Views.

Toolset Views – the easy way to query your WordPress

Toolset Views is a WordPress plugin that allows you to query your WordPress for different sorts of data, including custom posts. It’s Toolset Types plugin’s best assistant.

While the Toolset Types plugin allows you to add custom content to your WordPress site without coding, Toolset Views lets you display the content without meddling with PHP.

The Views plugin lets you display the content without meddling with PHP

In the following sections, we will show you how to use Views to display your company’s services wherever you want and in the way you want. Everything is done from your WordPress back-end! Forget about FTP forever.

Part 2.1 How to display a single service along with its custom fields

When displaying a single service page, all fields of the service should be displayed including the additional fields that were added (the service icon and service price).

For this, we create a Content Template that includes all service custom fields. It will replace the content part of your post.

The outcome of this step


After completing this step your single service page will display complete information about your service, including all its custom fields.

Your single service page will display complete information about your service, including all its custom fields – See live example

Requirements

Steps to replicate

  1. Go to Views > Content Templates, add a new Content Template*.
  2. In the pop-up dialog, in the ‘What content will this template be used for?” section choose Services. Give your Content Template a name: Single Service.
  3. Use the ‘Fields and Views’ button to include fields. Jump to the ‘Service Details’ section and choose the desired field. Repeat this step for all the fields you want to include.
If you are designing your pages using the Toolset Layouts, the steps will be different. You will need to create a Layout for displaying your service data and assign it to Services.
  1. Bind the Content Template with all your Services. For this, press the ‘Bind (n) Services’ button on the right sidebar in the Content Template Settings.
  2. Format and style your output with additional HTML tags or CSS if needed.

Now, a single service page displays complete service information, including service details. This is perfect for owners of WordPress websites for business that want an easy way to create and display their company’s services to potential customers.

Part 2.2 How to add services to the homepage

We want to display our services on our homepage. We create a View using Toolset Views.

The outcome of this step


After completing this step your homepage will display three example services, as shown in the picture on the left.

Your homepage will display three example services – See live example

Requirements

Steps to replicate

01. Create a View displaying 3 random services

First, we need to fetch 3 random services from our WordPress. For this, we will create a View. Later, we will be able to use this View at different places on the business WordPress site.

  1. Go to Views->Views and add a new View, choose ‘Display all results’ and give your View a name, e.g., ‘3 random services.’
  2. In the Query section, we specify what content to load. We are interested in retrieving 3 random services:
    • In the ‘Content Selection’ section, select Services.
    • In the ‘Ordering’ section, choose ‘Random order’
    • In the ‘Limit and Offset’ section, choose 3 to limit the result to 3 items only.
  3. In the Loop Output section, we determine what fields need to appear and how the output should look like. We use the Loop Wizard for this.
    • Our theme is Bootstrap-based, so we will use the Bootstrap 3 columns grid in the Output Style dialog (if you use a non-Bootstrap based theme you can choose other kinds of outputs)
    • We will include the following fields:
      • Service Icon
      • Post title with a link
      • Excerpt
      • Post URL (for the ‘Learn more’ link)
    • The fields will be grouped together in a Content Template responsible for displaying a single service entry. Scroll down the Content Template and add some HTML tags to format your output in the way you want.

That’s it. You’ve just created an equivalent of a WordPress query without meddling with PHP!

02. Add your View to your homepage

The View retrieving 3 random services is ready and now it can be placed anywhere on your site. We want our services to appear on the homepage, so we will place our ‘3 random services’ View there.

    1. Open your homepage for editing.*
    2. In your page body, find a place you want your View to appear. Insert the View using the ‘Field and View’ button. Your View will appear as a WordPress short code.
If you are designing your pages using Toolset Layouts (the drag and drop component) the steps will vary: use the View cell to include this View in your Layout for your homepage.

Done! Now your homepage displays 3 example services.

03. Tweak the final effect using some CSS

Now, you can polish your output further by adding some CSS.

For this you can use:

      • the CSS editor for the View you just built (get back to editing your View)
      • the CSS editor inside the Content Template created for grouping your service entries (Views->Content Templates, locate the Content Template called ‘Loop Item in 3 random services’ and open to edit)

In either case, again, no need for FTP!

Part 2.3 How to display services archive

We want to display a page that aggregates all services. In other words, we need a sort of a services index. In WordPress terminology, such an index of posts is called a post archive. We also want to obtain full control on how it should look. Therefore, we will create a custom service archive page.

The outcome of this step


After completing this step you will see a page listing all your services. A single entry in the archive will include a service title that is a link to the corresponding single service page.

A page listing all your services – See live example

Requirements

Steps to replicate

01. Create a WordPress Archive

  1. Go to Views->WordPress archive and add a new WordPress Archive.*
  2. In the pop-up dialog choose Services under Custom Post Archives. Give your archive a name, e.g., Services archive.
  3. Scroll down to the Loop Output section. Here, we decide what fields will appear for each Service entry and how the output will look like. Again, we use the Loop Wizard for this.
    • Our theme is Bootstrap-based, so we will use the Bootstrap 3 columns grid (but if you use a non-Bootstrap theme you can choose other kind of output)
    • We will include the following fields:
      • Service Icon
      • Post title with a link
      • Excerpt
      • Post URL (for the ‘Learn more’ link)
    • The fields you selected will be grouped together in a Template in a separate editor. It will allow you to customize the output. You can add some HTML tags.
If you design your pages using the Toolset Layouts the steps will vary. You need to create a Layout for displaying your services and assign it to Custom Post Archive called Services.

02. Display your Archive

Use the slug of your custom post type in the URL to display your custom post archive. In our example it the slug’s name is ‘service’, so we will access our service archive using the link https://drag-and-drop-wordpress.discover-wp.com/service/

03. Add your Archive page to the menu

To include your Custom Post Archive in the menu follow the steps below*:

  1. Go to Appearance->Menus
  2. Expand the Screen Options in your top right corner.
  3. Check ‘Services’. A new entry (called Services) will appear in your menu panel, click on it to expand.
  4. Switch to the ‘View All’ tab.
  5. Check ‘All items’ and add it to the menu. Change its navigation label to Services.
  6. Save your menu.

*This is possible because of Toolset Types.

Now your Services Archive Page can be accessed directly from your main navigation!

Summing up

We expanded our small business site with Services.

  • Using Toolset Types, we expanded our site with new structures:
    • a Custom Post Type for storing Services,
    • a Group of Custom Fields for storing Services details (a service icon and price)
  • Using the Toolset Views we displayed the Services:
    • On a single service page (that contains all service custom fields) using a Content Template.
    • On our homepage using a View.
    • On a custom service archive page creating a WordPress Archive.
The same technique can be used for adding different custom contents: company products, customers’ testimonials, team members, portfolio items etc. With any WordPress theme and without PHP!

Try it yourself!

If you want to see how our business site was built with Toolset Types and Toolset Views and without writing a single line of PHP please feel free to do it!

We provide a demo site for free testing.

If you are already a Toolset customer, you can test this site in your WordPress install using the Framework Installer plugin.