How to Craft a Unique Events Page in Breakdance Builder

Web Development & Design
Surfer AI - Best All-in-one Assistant

- Your article will be ready in less than 20 minutes and it will be 10 times cheaper than using a dedicated writer.
- Create ready-to-rank articles in minutes with Surfer AI.
- Research, write, and optimize across industries with the click of a button.

Effortless. May well assist to know the fundamentals of this instrument/subject
Time Necessary:
~twenty minutes

Do you want to create a customized occasions webpage on your Breakdance website?

A properly-made occasions webpage can assist you get a lot more conversions. And this can be effortlessly accomplished with Meta Box.

In this guidebook, I’ll stroll you by way of making a customized occasions webpage in which customers can see occasions and purchase tickets. You will also find out how to configure Meta Box to develop your occasions webpage in Breakdance.

Here’s what you can accomplish by the finish of this tutorial:

custom events page in Breakdancecustom events page in Breakdance

Why Use Meta Box?

Meta Box is a potent WordPress plugin made to assist customers develop customized fields and customized meta boxes with ease. If you are acquainted with the ACF plugin, you may well discover Meta Box a bit comparable. It lets you include further details to your posts, pages, or customized submit varieties.

Right here are some of the attributes I adore about Meta Box:

  • Generates customized fields into groups to greater organize your content material
  • Makes it possible for limitless repeatable groups and cloning
  • Makes it possible for reordering with clone sorting choice
  • Supports multi-degree nested groups
  • Groups are collapsible
  • It is light-weight, making sure your web site stays rapidly and responsive
  • For these who want a lot more, Meta Box delivers extensions to boost its performance

If you are making an occasions webpage, then this is a single of the greatest plugins I strongly advise. With Meta Box, you can effortlessly include customized fields for particular specifics like date, area, or guest speakers.

Plus, you do not want to fiddle with code. I have located that employing Meta Box speeds up the procedure of setting up an occasions webpage so you can emphasis on your content material.

Now, let’s find out how to set up this plugin with Breakdance.

How to Produce Customized Occasions Webpage With Breakdance and Meta Box

one) Set up Meta Box

1st, log in to your WordPress account. Go to Plugins &gt Include New. Search for the Meta Box plugin. Then, click to set up and activate.

install Meta Box plugininstall Meta Box plugin

When activated, you will be redirected to the welcome webpage. Observe also that, soon after activation, you will see the ‘Meta Box’ plugin on the left navigation bar. 

Meta Box pluginMeta Box plugin

On the setup webpage, you will see the distinct extension choices offered to make your website a lot more potent. Most of these include-ons are only offered in the professional model. 

Meta Box setup pageMeta Box setup page

For this guidebook, we’ll use the plugin’s free of charge model.

Now, click the extensions tab and download the ‘MB Customized Publish Variety.’ We’ll tap into this later on for making and managing customized submit varieties.

install Meta Box custom post type extensioninstall Meta Box custom post type extension

two) Include A New Publish Variety

Let’s now develop an occasion submit variety.

Head above to Meta Box &gt Publish Sorts. Then, click ‘New Publish Variety.’

add events post typeadd events post type

Underneath the ‘General’ tab, enter the plural and singular names of your new submit variety. In this situation, let’s enter ‘Events’ and ‘Event.’ The slug is immediately created, but you can alter this to other names you want.

custom post type settings in Meta Boxcustom post type settings in Meta Box

The ‘Labels’ tab enables you to modify the default labels for every item on your customized submit variety. We’ll maintain these unchanged.

Following, go to the ‘Advanced’ tab. Right here, you can:

  • Include a description
  • Handle the submit type’s visibility
  • Exclude posts getting this submit variety on front-finish search final results
  • Set whether or not queries are permitted on the frontend
  • Configure the UI, menu, and icon

For our functions, let us just modify the icon. Set the icon variety to ‘dashicons’ and choose a calendar icon. The other settings can stay unchanged.

custom post type settings in Meta Boxcustom post type settings in Meta Box

Following, go to the ‘Supports’ tab and choose which attributes you want to use with your submit variety. Right here, I’ve chosen the title, editor, excerpt, writer, thumbnail, and customized fields.

custom post type settings in Meta Boxcustom post type settings in Meta Box

Underneath ‘Taxonomies,’ choose which taxonomies you want to register for the submit variety. Note that you can also include a lot more taxonomies to your submit varieties through Meta Box &gt Taxonomies &gt Include New. But we’ll skip this for now.

custom post type settings in Meta Boxcustom post type settings in Meta Box

Following finalizing your options, click ‘Publish.’ Your new submit variety will now be noticeable on the left menu.

add events post typeadd events post type

three) Include Area Groups

Let us organize our customized fields with discipline groups. For our occasions submit variety, we want to capture specifics like occasion title, date, time, description, and area. A discipline group is best to residence these specifics.

There are many techniques to do this. If you have obtained Meta Box’s professional subscription, you can effortlessly include discipline groups with this plugin. Pay a visit to their tutorial page to find out a lot more.

You can also include customized code if you are an innovative developer. You can examine their separate tutorial to find out how to do this.

Nonetheless, for this tutorial, we’ll stick with the free of charge plugins. I will guidebook you on employing an additional plugin, ACF, to include customized discipline groups. There are other freemium plugins offered on WordPress, but ACF is a sound option.

If you haven’t put in ACF however, basically go to the plugins tab and seem for Superior Customized Fields (ACF) by WP Engine. Click set up and activate.

create field groups using ACFcreate field groups using ACF

On the left side menu, go to ACF &gt Area Groups. Click ‘Add New.’

Enter the title of the new discipline group. In this situation, ‘Events.’

Then, include the customized fields you want for your submit variety. 

1st, pick the proper discipline variety from the dropdown. Then, enter the discipline label, discipline title, and default worth (optional). When you are accomplished, shut the discipline and conserve the alterations.

create field groups using ACFcreate field groups using ACF

Right here are the customized fields I’ve extra for our discipline group. Come to feel free of charge to take away or include a lot more as it fits.

custom field groups in ACFcustom field groups in ACF

Lastly, set the area principles for your discipline group. For our objective, we’ll set the submit variety equal to ‘Event.’

custom fields location rules in ACFcustom fields location rules in ACF

Now, conserve the alterations.

four) Produce An ‘Events’ Publish

Let’s include a new occasion. On the left side menu, go to Occasions &gt Include New.

Enter the specifics like the occasion title, date, description, area, and so on, as proven beneath.

create custom events postcreate custom events post

When you are accomplished, click publish.

In this illustration, I’ve published 3 distinct occasions, as proven right here.

add custom events postadd custom events post

five) Produce A Worldwide Block

Following, let’s develop a worldwide block template for our occasions.

A worldwide block is an component that you can repeatedly use across a number of pages or posts. When you make a alter to a worldwide block, that alter is immediately reflected anyplace the block is employed. 

For our illustration, we’re going to use the worldwide block to show all the occasions on our occasions webpage (which we’ll develop later on). Each and every time we include a new occasion, it will immediately be displayed on the occasions webpage.

Start off by heading above to Breakdance &gt Worldwide Blocks. Click ‘Add Worldwide Block’ and enter the title you want, in this situation, ‘Event.’ Click ‘Add Worldwide Block’ to conserve the alterations. 

create global block template in Breakdancecreate global block template in Breakdance

Then, open your new worldwide block template on the Breakdance editor. 

In your editor, include all the essential aspects to have your event’s title, date, description, area, ticket cost, and featured picture. 

create global block template in Breakdancecreate global block template in Breakdance

Following, make every component dynamic. By undertaking so, you can immediately fetch and show the specifics from your occasion posts.

Let’s start off with the occasion picture. Hover your mouse above the dynamic icon up coming to the picture label. On the pop-up, choose ‘Image’ underneath the ACF discipline.

create global block template in Breakdancecreate global block template in Breakdance

When you do that, you must see the picture of the occasion submit displayed. Note that this will alter immediately for each and every occasion you include. 

Now, do the very same for the heading and text.

create global block template in Breakdancecreate global block template in Breakdance

Following inserting dynamic information, type your worldwide block component as you like. Adjust the layout, spacing, font shade, and other attributes that reflect your brand.

create global block template in Breakdancecreate global block template in Breakdance

When you are content with the alterations, click conserve.

six) Produce An Occasions Webpage

Now, we’re going to include an occasions webpage to show all the occasions we’ve extra.

Once more, on your WordPress dashboard, go to Pages &gt Include New. Enter a webpage title, then conserve and publish.

create events page in Breakdancecreate events page in Breakdance

Open and edit your new webpage on the Breakdance editor. Come to feel free of charge to include aspects as they match. Right here, I’ve extra a heading and set the title to ‘Popular Occasions in 2023.’ 

Then, we’ll want to include a submit loop builder.

create events page in Breakdancecreate events page in Breakdance

A submit loop builder enables you to show a record of posts dynamically. In this situation, the occasions we have produced. We’re going to use the worldwide block component to show every occasion submit.

Go ahead and click the submit loop builder component to see the component attributes and settings. On the left, choose ‘Events’ from the Worldwide Block dropdown.

create events page in Breakdancecreate events page in Breakdance

Following, open the ‘Query’ choice. Then, we’ll want to set a couple of factors on the pop-up. 1st, make certain that the submit variety is set to ‘Events.’ Then, enter how several posts per webpage you want to show. 

create events page in Breakdancecreate events page in Breakdance

You also have the choice to include problems, meta query, and the submit purchase. These attributes are quite valuable for innovative queries and customizations. But for now, we’ll depart these unchanged.

When you are accomplished, click ‘Apply Query’ to conserve the settings. You must now see the record of occasions displayed on your webpage.

Lastly, type your webpage to your liking. For instance, I’ve set the layout to ‘Grid’ and set the grid show to 3 objects per row.

adjust grid items per row in Breakdanceadjust grid items per row in Breakdance

You can also modify the padding, modify the container layout, or include pagination to make your webpage seem greater.

seven) Conserve and Preview

Hold on generating the essential changes to the layout and type till you are content with how your webpage appears.

When you are accomplished, click conserve.

This is what our ultimate occasions webpage appears like.

create events page in Breakdancecreate events page in Breakdance

And That is It!

We hope you have discovered the fundamentals of making customized occasions webpage in Breakdance with Meta Box.

If you like this tutorial, please share it with other individuals and allow us know your suggestions. We’re right here to help your journey!