Food/Services Menu

Pods Package Code

Copy the following package code and paste it to import the pod setup.

Themer Layouts

Archive themer layout with posts module set to main query and singular themer layout for the individual pod items.

Download Themer Layouts

Posts Template

Archive layout with posts module set to display pod items using custom query, fit for use on any non-themer page.

Download Posts Template

Package Includes

The following layouts are already built out and included in the themer download package. You can modify them as needed depending on the task.

View Pod Demo

Pod Settings

Manage Fields tab:
- Description:
  - Label: Item Description
  - Name: item_description
  - Field Type: WYSIWYG
  - Additional field options: Enable Media Buttons, Enable oEmbed, Enable wptexturize, Enable convert_chars, Enable wpautop, Allow Shortcodes
  - Rest API: Read via REST API? Yes, Write via REST API? Yes
- Price
  - Label: Item Price
  - Name: item_price
  - Field Type: plain text field
  - Additional field options: allow shortcodes, allow html
  - Rest API: Read via REST API? Yes, Write via REST API? Yes
Labels tab:
- Label: Food Menu Items
- Singular label: Food Menu Item
Admin UI tab:
- Menu Icon: dashicons-food
Advanced options tab:
- Enable Archive Page: yes
- Supports: title, featured image
- Built-in Taxonomies: food menu tags, food menu categories
Rest API tab:
- Enable: yes
- Show All Fields (read-only): yes
- Allow All Fields To Be Updated: yes

Archive themer layout settings

Title: Food Menu Archive
Type: themer layout
Layout: archive
Location: Food Menu Item archive, Food Menu category archive, Food Menu tag archive
Modules:
- Heading module: field connection set to archive title
- Text module: field connection set to archive description
- Standard posts module: content set to main query
  - Layout: columns
  - Post layout: custom
  - Post spacing: 20px

Custom post layout HTML:

[wpbb-if post:featured_image]
<div class="fl-post-image">
	[wpbb post:featured_image size="large" display="tag" linked="no"]
</div>
[/wpbb-if]

<div class="fl-post-text">
    <h2 class="fl-post-title">[wpbb post:link text="title"]</h2>
    <span class="item-desc">[wpbb post:custom_field key='item_description']</span>
</div>

<div class="fl-post-price">
    $[wpbb post:custom_field key='item_price']
</div>

Custom post layout CSS:

.fl-post-grid-post {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.fl-post-image {
    flex: 0 1 100px;
}
.fl-post-image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.fl-post-text {
    padding: 5px 20px;
    flex: 1 1 280px;
}
.fl-post-title {
    font-size: 20px;
	line-height: 26px;
	margin: 0 0 5px;
	padding: 5px 0 5px;
	border-bottom: 1px dashed #aaaaaa;
}
span.item-desc {
    font-size: 12px;
    font-style: italic;
    color: #777777;
}
.fl-post-price {
    padding: 10px;
    flex: 0 1 auto;
    text-align: right;
    font-weight: 700;
}

Singular themer layout settings

Title: Singular Food Item Layout
Type: themer layout
Layout: singular
Location: Food Item – all Food Items
Modules:
- Hero row with photo background set to featured image
- Heading module – h1, field connection set to post title
- Themer post info module – show taxonomy – food menu tags
- Text modules with the following shortcodes:

1) [wpbb post:pods_display field='item_description']

2) Price: $[wpbb post:pods_display field='item_price']

3) Category: [wpbb post:terms_list taxonomy='food_category' html_list='no' display='name' separator=', ' limit='' linked='yes']

How to use pre-built Pods layouts

Step 1: Install the Pods Plugins

Step 2: Enable Pods Package Migration

Step 3: Import a Pods Package

Go to the pods package you would like to import from the styleguide (this example is using team members), then triple-click to select all of the pods package code and copy it.

Back in your migrate packages screen, you should see an empty block titled "Paste the Package Code"

Paste your copied code here without any spaces above or below it
Then click "continue"
The import/export bar above should be green with a check mark beside it, and results should say "Import complete"
The pods package you selected should be listed under results as seen in the image below

Step 4: Import Themer Layouts

Now that your pods package has been added, you can import the themer layout to go with it

From the dashboard go to tools > import
Under "WordPress" select "Install"
Once its installed, select "Run Importer"

Important Note: Importing themer layouts provided to you by PWS via download from the styleguide is the second ONLY acceptable use case for the WordPress Importer plugin, the first being to import blog posts. After importing the layouts, please deactivate and remove this plugin.

Go to the pods package you would like to import from the styleguide (this example is using team members) - the same one from step 3:

Click the "Themer Layouts" download button and save the xml
Then in the WordPress importer, select this xml file
Click the "Upload file and import" button
Assign posts to an existing user > select your admin account from the dropdown
Check the box to import attachments
Then click submit to complete the import

Step 5: Add New

How to make changes to pre-built Pods layouts

Editing an existing field

Duplicating an existing field

Deleting a field

Editing the singular themer layout

After you make changes to your pod, go to an already added post and add to the fields, then update this post

View the post and select to open the singular themer layout in beaver builder

Make sure you view the post that you just added all the new information to so that you can see those fields and their content and you can style them appropriately

Open the html block and change any field names that you changed in the edit pods screen

Duplicate sections for any fields you duplicated, and update the field names

In this example, the following items were done to the pod:

I edited the social_link field and changed the name to "linkedin"
I duplicated the linkedin field and changed the name to "instagram"
I duplicated the email field and changed the name to "phone"

In this example, the following items were done to the singular themer layout:

I changed the field name in the social_link a tag to "linkedin"
I duplicated the linkedin a tag and changed the name to "instagram" - I replaced the linkedin icon with an instagram icon from fontawesome
I duplicated the email a tag and changed the name to "phone" - I changed the "mailto:" link to a "tel:" link - I replaced the envelope icon with a phone icon from fontawesome

Once you like how it looks, save and publish the layout

Editing the archive themer layout

Once you have your fields properly mapped out on your singular themer layout, you can copy these for your archive post layout

Head to your archive page, then click to open the themer layout in beaver builder

Click the post settings and edit the custom post layout

Paste your new fields here from your singular layout and rearrange them as needed - remember to change the names of any existing fields you made changes to

Save and publish your layout

When to use the post template download

If you have a site with a page that needs your pods on it, and its not an archive page, it will not need to use main query

For example if you want to place a posts module with team members on the about page in a row, you can download and import and use this template. It is the exact same as the themer layout template, but content is set to custom query instead of main.

You can also just edit the themer layout, save the posts module from there, load it onto the about page and change it from main to custom query > then change the post type to team members and adjust the order.

Updated Fields related to Personally Identifiable Information are present

Created Guide: Leapfrog Theme Setup Guide

Image optimization guide – 22310