An example small business site we will build. Visit live demo
An example small business site we will build

A classic business site typically displays a company’s services, products, or portfolio items.

The simplest way to build a business site through WordPress is to use an existing WordPress theme designed for corporate sites. However, the theme you select may not support all the content you wish to highlight. Content can include customers’ testimonials, business activities, staff data, and so on. There may always be some content that some themes cannot support.

We explain how to add custom content to your WordPress site and how to display it on your site’s front-end.

Everything will be done from your WordPress Dashboard and without PHP coding!

As an example we will enhance our site with services. We will:

  • add three random services to homepage,
  • modify a single service page,
  • create a page that aggregates all the services.

What you will learn

After reading this article you will understand:

  • How to expand your WordPress site with custom content and make it easy to maintain for non-techies.
  • How to display your custom content (custom posts with custom fields) on the front-end without modifying the PHP files of your theme.
  • How to apply the same techniques for different content and WordPress projects.

What we are going to achieve

We use a demo brochure site as an example. In the example, we focus on adding Services. After you understand the rules behind the steps, you should be able to duplicate the same steps for all sorts of content (portfolio items, products, team members, etc.).

Front-end view

Look at the pictures below:

1. Single service page
1. Single service page

2. Homepage displaying services (among other things)
2. Homepage displaying services (among other things)

3. Services archive page
3. Services archive page

These are three pages where services are usually listed:

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

Back-end view

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

1. Services custom posts in your WordPress Dashboard
1. Services custom posts in your WordPress Dashboard

2. Single service post including custom fields - WordPress Dashboard
2. Single service post including custom fields – WordPress Dashboard

  1. Services are separated from other content and listed together in the Services section
  2. When you edit a single service, you can see additional fields for storing details of that service:
    • service icon
    • service price

Such an approach makes content management easy for your site’s editors, even if they are not technically proficient.

Let’s see how to build such a site from your WordPress Dashboard without writing a single line of PHP!


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)

Outcome of this step
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 Types plugin installed and activated in your WordPress, follow the steps below:

1. 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.

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

Outcome of this step

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.

2. 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

Two additional fields in your single service edit screen

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.

How to fetch your content from the database?
How to fetch your content from the database?

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.

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.

Views plugin – the easy way to query your WordPress

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

Views is a WordPress plugin that allows you to query your WordPress for different sorts of data, including custom posts.

It’s the Types plugin’s best assistant.
While the Types plugin allows you to add custom content to your WordPress site without coding, 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.

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

Outcome of this step

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

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.
  4. 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.
  5. Format and style your output with additional HTML tags or CSS if needed.
* If you are designing your pages using the Layouts plugin, the steps will be different. You will need to create a Layout for displaying your service data and assign it to Services.

Now, a single service page displays complete service information, including service details.


Part 2.2: How to add services to homepage

We want to display our services on our homepage. We create a View using the Views plugin to accomplish this task.

Your homepage will display three example services -
Your homepage will display three example services – See live example

Outcome of this step

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

Requirements

Steps to replicate

1. 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 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!

2. 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 Layouts (the drag and drop Toolset 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.

3. 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.

a page listing all your services
A page listing all your services – See live example

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.

Requirements

What is a Custom Post Archive

If you created the Service Custom Post Type with the ‘has_archive’ option set to true (that is the default setting in the Types plugin), you have allowed your Custom Post Type to have an index page – services archive in our case.

The services archive page will be available at the URL consisting your site’s domain name followed by the slug of your custom post type. For example: yoursite.com/service.

What you will see in your archive depends on your theme. Our Toolset Starter theme, by default, shows a list of entries including:

  • a clickable post title,
  • and the post body

for each service in the archive page.

We want the archive to look a bit different, so we will create a Custom Post Archive for our Services. Each entry will contain:

  • a clickable Service Icon,
  • a clickable Service title,
  • the Service Excerpt,
  • the ‘Learn more’ link.

In addition, we want our entries to be shown in a 3-column grid. This new WordPress Archive will replace the default archive provided by the theme used.

Steps to replicate

1. 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 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 Layouts plugin the steps will vary. You need to create a Layout for displaying your services and assign it to Custom Post Archive called Services.

2. 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 http://views-plugin.discover-wp.com/service/

3. 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 the Types plugin.

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

Summing up

We expanded our small business site with Services.

  • Using the Types plugin, 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 Views plugin 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!

test

If you want to see how our business site was built with the Types and Views plugins and without writing a single line of PHP please feel free to do it! We provide a demo site for free testing. Follow the link for more details.

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