How to build an advanced website for your business using Stackable and Toolset

   Allison Rivers

How to

March 18, 2021
0

If you want to stand out among your competitors, you need a site that is beautiful, functional, and easy to build and maintain. Stackable and Toolset make it possible to build dynamic, advanced sites that function and look great without coding.

Please note that Toolset only works with Stackable version 2. This is why you need to go to the Settings → Stackable page in the admin and turn on the Load version 2 blocks in the editor option.

When you’re running a business, you know that you need a website that not only looks nice but also makes it easy for your potential customers to find what they need. This means your site often needs to include advanced features such as:

Informative custom fields and post types

Dynamic lists

Robust search and filtering functionality

Beautifully designed content templates

Any one of these features can quickly make for a complicated, time-consuming project that requires a developer to build it. Or, you can use Toolset and Stackable to make it all possible without coding in just a few hours.

Why Stackable and Toolset?

Stackable and Toolset work together to make building these advanced sites easy, thanks to Toolset’s dynamic functionality and Stackable’s amazing design options.

Toolset creates powerful, dynamic functionality without coding

Toolset is a suite of plugins that makes it possible to create custom post types, fields, and taxonomies to organize your site content. Once created, Toolset helps you display it dynamically across your site in site archives, content templates, lists, searches, and individual pages.

Toolset packs in tons of features that would otherwise require a dozen plugins, and does it all with no coding necessary!

Stackable makes it easy to create eye-catching, beautiful designs

Stackable expands Gutenberg’s design capabilities. It adds 27 fully-customizable content and layout blocks to your block library. Stackable Premium also gives you hundreds of individual block designs grouped together in cohesively-designed UI kits, Plus, it includes extras like  special hover and image box animations, gradient colors and background shapes, and more!

How to build your site

To show you how easy it is, we’ll walk through the process of building a custom directory site that lists photographers. We want this site to show detailed information about each photographer, include a searchable archive, and, of course, look great!

We’ll follow three steps to do this:

  1. Create your custom post types, fields, and taxonomy
  2. Fill in your content
  3. Build your content templates, archives, and lists

You can follow along with us by creating a free Discover-WP reference site.

1. Create your custom post type, fields, and taxonomy

Because we’re running a site that is a directory for photographers, let’s create a Photographers post type. This will keep our photographer-related content organized and separate from other pages or posts in our site’s admin.

We’ll also create custom fields to share more information about each photographer such as a short bio, what kind of camera they use, and where they’re located.

Finally, we’ll create a custom taxonomy for what kind of photography each photographer specializes in.

Creating a custom post type

  1. Go to Toolset → Dashboard and click Add new post type.
  2. Add the plural and singular name of the post type. The slug automatically generates from the singular name. There are other options for creating post types, but that’s all you really need to get started!
  3. Save your post type.
Creating a custom post type

Creating custom fields

  1. Go to your Toolset → Dashboard and click Add custom fields for your new Photographers post type.
  2. Add your fields. We added three Single Line fields for the short bio, equipment, and city. We also added two Image fields for a photo of the photographer and their portfolio. Lastly, we added a Checkbox field to indicate whether we want a particular photographer to be featured on our homepage.
  3. Save your field group.
Creating a custom field group and custom fields

Creating a custom taxonomy

  1. Go to Toolset → Dashboard and click Add custom taxonomy.
  2. Just like with creating your post type, add the plural and singular version of the taxonomy term. The slug is created automatically.
  3. Click Save Taxonomy.
Creating a custom taxonomy

2. Fill in your content

Go to Photographers → Add New and fill in the relevant content for each of your photographers. You can even set up forms for users to submit their own content from your site’s front-end.

Filling in the custom fields and taxonomy to create a new photographer

Because we’re using a custom post type to organize our content, all of our photographers are listed neatly in our site’s backend.

Viewing all of our photographers in our site’s admin

3. Build your Content Templates, archives, and lists

You’ve created your custom structure and filled in your content. Now, you need to display the content you created. 

Stackable’s variety of blocks, layouts, and fine-tuned controls make building beautiful pages to display this content a breeze. Stackable’s blocks are also compatible with Toolset’s Dynamic Sources feature, which lets you automatically populate the blocks with values coming from your custom fields, taxonomies, standard WordPress fields, and more.

Check out the following video to see how this works in action, and keep reading for more examples.

We’ll walk through two examples for our Photographers directory site: a searchable archive page that lists photographers, and a content template to display information about each individual photographer.

Creating a searchable archive page

  1. Go to your Toolset Dashboard and click Create Archive for the Photographers post type.
Creating an archive page
  1. Give your archive a name and select Display the items using a custom search. This creates an archive list that displays photographers. Plus, it gives you the ability to add searching, sorting, and filtering options to help your site’s clients find the right photographer for their needs.
Naming and selecting a custom search option for the archives page
  1. Next, let’s design the appearance of your archive. Click Add Block in the View Loop. Add the Stackable Image Box block, and in the block settings, turn on Dynamic Sources for the block’s fields. For the Image field, we want to pull in each photographer’s photo.

To do this, we’ll select Current Photographer as the Post Source and the Field Group for Photographers we created for the Source. Then, select the Photographer’s photo from the Field dropdown. You’ll see the archive populate automatically with all of the photographers’ photos.

You can repeat this process to add the photographer’s name as the Title, their camera type as the Subtitle, etc. Stackable’s Image Box block allows you to customize the settings to get it looking exactly how you want it.

Creating an archive page from Dynamic Sources
  1. Now, let’s add some search functionality. In our example, we added the ability to filter by Specialty. To add search options, click the Add Search Field button. Then, select the custom taxonomy we added previously, Specialty, from the dropdown. In the Field Settings, you can control how you want this to display this. We chose to display it as a dropdown.

In our example, we used Stackable’s Advanced Column blocks to format our search fields. We also enabled the AJAX search options to refresh the results automatically as the search input changes.

Adding a custom search filter to our archive page
  1. Save your archive.

On the front-end, you can see our list of photographers and filter by specialty.

Viewing our searchable archive on the site’s front-end

Next, we want to be able to click on each photographer and read more about them. To do this, let’s create a template for displaying single photographer posts.

Creating a Content Template

  1. Go to your Toolset Dashboard and click Create Content Template for the Photographers post type. This opens a new, blank page. How we design this page will be how all of our photographer pages appear.
Creating a content template for the Photographers post type
  1. In our example, we start each photographer page with their photo. You can follow the same steps we used when designing our archive to display the photographer’s photo in a Stackable Image Box block using Dynamic Sources.

This automatically pulls in the correct image for each photographer. You can test this with different photographers by changing the example in the View with: dropdown.

Populating a Stackable Image Box block with dynamic content
  1. Next, we want to add a header with the photographer’s name. Add the Stackable Advanced Heading block. We want this header to have a mix of static and dynamic text that says, “Hello! I’m [photographer’s name].”

Type the static text, then click the Inline Dynamic Field button in the inline editor. The Dynamic Sources options appear, and you can select Current Photographer and Post Title as your Post Source and Source, respectively.

Adding inline dynamic content using the Stackable Advanced Heading block
  1. Finish designing your content template using Stackable’s blocks and extensive design options.

Now, when you go to the archives page we created, you can click on each photographer and see their information in a consistent format designed exactly how you want it.

If you need to change something, instead of changing each photographer’s page, you can change and save the template. This applies the change to each photographer’s page instantly.

Viewing a photographer page on the site’s front-end

Try it yourself!

In just a few steps, we’ve created an advanced site structure with dynamically-displayed content and a beautiful design using only Toolset and Stackable. Even better, our site will update automatically as we continue to add, edit, or delete content, and we never had to write a single line of code!

You can try Stackable and Toolset together for free using our Photographers reference site. Please note that the demo website uses Stackable version 2 so you need to turn on the Load version 2 blocks in the editor option on the Settings → Stackable page in the admin.

Or, use these features on your own site by downloading Stackable and purchasing Toolset today.

Have any questions? Let us know in the comments below!