{"id":50,"date":"2019-11-24T10:32:54","date_gmt":"2019-11-24T16:32:54","guid":{"rendered":"https:\/\/travisolson.net\/code\/?p=50"},"modified":"2020-01-29T09:57:13","modified_gmt":"2020-01-29T15:57:13","slug":"wordpress-staff-page-using-wp-bakery-post-grid-and-custom-pop-up-links","status":"publish","type":"post","link":"https:\/\/www.travisolson.net\/code\/wordpress-staff-page-using-wp-bakery-post-grid-and-custom-pop-up-links\/","title":{"rendered":"WordPress: Staff Page Using WP Bakery Post Grid and Custom Pop-up Links"},"content":{"rendered":"

This is a solution for creating a staff page using the WP Bakery post grid element.\u00a0 It uses a pop-up\/overlay to display details for each person instead of linking to a page. This assumes that you have WP Bakery, Custom Post Types UI, and Advanced Custom Fields plugins installed. It also uses a modal from Bootstrap to handle the pop-up, but this can be modified to use whatever modal pop-up library is used on your site.<\/p>\n

The first thing to do is create the People custom post type. In the Custom Post Types plugin, add a new post type.\u00a0 The easiest way to set it up is to just import the JSON configuration for the post type. HOWEVER, you should only use this if you don’t have any other custom post types already defined. Importing this will DELETE any other post types that have been defined. <\/strong>If you already have custom post types defined, then you’ll need to to set it up manually. You can copy all of the settings from the JSON below.\u00a0 Sure, it’s not that easy to read, but you’re a developer, so I’m sure you’ll figure it out.<\/p>\n

{\"people\":{\"name\":\"people\",\"label\":\"People\",\"singular_label\":\"Person\",\"description\":\"This is for information for staff pages\",\"public\":\"true\",\"publicly_queryable\":\"true\",\"show_ui\":\"true\",\"show_in_nav_menus\":\"true\",\"show_in_rest\":\"true\",\"rest_base\":\"\",\"rest_controller_class\":\"\",\"has_archive\":\"false\",\"has_archive_string\":\"\",\"exclude_from_search\":\"false\",\"capability_type\":\"post\",\"hierarchical\":\"false\",\"rewrite\":\"true\",\"rewrite_slug\":\"\",\"rewrite_withfront\":\"true\",\"query_var\":\"true\",\"query_var_slug\":\"\",\"menu_position\":\"\",\"show_in_menu\":\"true\",\"show_in_menu_string\":\"\",\"menu_icon\":\"\",\"supports\":[\"title\",\"editor\",\"thumbnail\",\"custom-fields\",\"revisions\"],\"taxonomies\":[],\"labels\":{\"menu_name\":\"People\",\"all_items\":\"\",\"add_new\":\"\",\"add_new_item\":\"\",\"edit_item\":\"\",\"new_item\":\"\",\"view_item\":\"\",\"view_items\":\"\",\"search_items\":\"\",\"not_found\":\"\",\"not_found_in_trash\":\"\",\"parent_item_colon\":\"\",\"featured_image\":\"\",\"set_featured_image\":\"\",\"remove_featured_image\":\"\",\"use_featured_image\":\"\",\"archives\":\"\",\"insert_into_item\":\"\",\"uploaded_to_this_item\":\"\",\"filter_items_list\":\"\",\"items_list_navigation\":\"\",\"items_list\":\"\",\"attributes\":\"\",\"name_admin_bar\":\"\"},\"custom_supports\":\"\"}}<\/pre>\n
This will set up the People post type, and a new People menu item should display in the admin sidebar. The next step is to create custom fields associated with this post type. You can create whatever fields you need, but for this example we are using a Title<\/strong> field and Menu Order<\/strong> field. The Menu Order field is used to specify the exact order of each person in the post grid, but you can leave this out if you don’t want custom sorting.\u00a0 If you want to copy my ACF fields exactly, you can import my configurations: acf-export-people.zip.<\/a> Unzip the file and use the JSON file to import into ACF.<\/p>\n
Now that we have the basic data structure set up, you’ll want to populate some People records.\u00a0 Be sure to add featured images to each person so they will display in the post grid.<\/p>\n
Create a file in your theme named staff.php. In my example, the file is located in the {theme root}\/library directory, but you can place it anywhere in your theme.<\/p>\n
<?php\r\nfunction myprefix_staff_init() {\r\n  add_action( 'wp_enqueue_scripts', 'myprefix_staff_scripts_and_styles', 999 );\r\n}\r\nadd_action( 'after_setup_theme', 'myprefix_staff_init' );\r\n\r\n\/\/ Enqueue staff Javascript file\r\nfunction myprefix_staff_scripts_and_styles() {\r\n  wp_enqueue_script( 'myprefix-staff', get_stylesheet_directory_uri() . '\/library\/js\/staff.js', array( 'jquery' ), '1.0', true );\r\n}\r\n\r\n\/* Set up AJAX function for loading staff popup template *\/\r\nfunction myprefix_ajax_staff_person() {\r\n  $slug = trim($_GET['slug']);\r\n  if (!empty($slug)) {\r\n    $args = array(\r\n      'name'        => $slug,\r\n      'post_type'   => 'people',\r\n      'post_status' => 'publish',\r\n      'numberposts' => 1\r\n    );\r\n    $people = get_posts($args);\r\n    if ($people) {\r\n      $person = $people[0];\r\n      include('staff-popup-template.php');\r\n    }\r\n  }\r\n  exit();\r\n}\r\nadd_action('wp_ajax_myprefix_staff_person', 'myprefix_ajax_staff_person');\r\nadd_action('wp_ajax_nopriv_myprefix_staff_person', 'myprefix_ajax_staff_person');\r\n\r\n\/* Return info for multiple people using slugs *\/\r\nfunction myprefix_ajax_staff_people() {\r\n  $slugs = trim($_POST['slugs']);\r\n  if (!empty($slugs)) {\r\n    $data = array();\r\n    foreach (explode(',', $slugs) as $slug) {\r\n      $args = array(\r\n        'name'        => $slug,\r\n        'post_type'   => 'people',\r\n        'post_status' => 'publish',\r\n        'numberposts' => 1\r\n      );\r\n      $people = get_posts($args);\r\n      if ($people) {\r\n        $person = $people[0];\r\n        ob_start();\r\n        include('staff-popup-template.php');\r\n        $html = ob_get_clean();\r\n        \r\n        $data[$slug] = array(\r\n          'ID' => $person->ID,\r\n          'name' => esc_html($person->post_title),\r\n          'html' => $html\r\n        );\r\n      }\r\n    }\r\n    echo json_encode($data);\r\n  }\r\n  exit();\r\n}\r\nadd_action('wp_ajax_myprefix_staff_people', 'myprefix_ajax_staff_people');\r\nadd_action('wp_ajax_nopriv_myprefix_staff_people', 'myprefix_ajax_staff_people');\r\n\r\n\/\/ Disable the Admin Columns plugin, if available, on the People admin page since it conflicts with the sort order plugin\r\nfunction myprefix_ac_post_types_remove_people($post_types) {\r\n  if (isset($post_types['people'])) {\r\n    unset($post_types['people']);\r\n  }\r\n\r\n  return $post_types;\r\n}\r\nadd_filter( 'ac\/post_types', 'myprefix_ac_post_types_remove_people' );\r\n\r\n\/\/ Show dropdown filter by department taxonomy on admin people list\r\nfunction myprefix_filter_people_by_taxonomy() {\r\n  global $typenow;\r\n  $post_type = 'people';\r\n  $taxonomy  = 'people_departments';\r\n  if ($typenow == $post_type) {\r\n    $selected      = isset($_GET[$taxonomy]) ? $_GET[$taxonomy] : '';\r\n    $info_taxonomy = get_taxonomy($taxonomy);\r\n    wp_dropdown_categories(array(\r\n      'show_option_all' => __(\"Show All {$info_taxonomy->label}\"),\r\n      'taxonomy'        => $taxonomy,\r\n      'name'            => $taxonomy,\r\n      'orderby'         => 'name',\r\n      'selected'        => $selected,\r\n      'show_count'      => true,\r\n      'hide_empty'      => true,\r\n    ));\r\n  };\r\n}\r\nadd_action('restrict_manage_posts', 'myprefix_filter_people_by_taxonomy');\r\n\r\n\/\/ Filter admin people list by department taxonomy\r\nfunction myprefix_convert_id_to_term_in_query($query) {\r\n  global $pagenow;\r\n  $post_type = 'people'; \/\/ change to your post type\r\n  $taxonomy  = 'people_departments'; \/\/ change to your taxonomy\r\n  $q_vars    = &$query->query_vars;\r\n  if ( $pagenow == 'edit.php' && isset($q_vars['post_type']) && $q_vars['post_type'] == $post_type && isset($q_vars[$taxonomy]) && is_numeric($q_vars[$taxonomy]) && $q_vars[$taxonomy] != 0 ) {\r\n    $term = get_term_by('id', $q_vars[$taxonomy], $taxonomy);\r\n    $q_vars[$taxonomy] = $term->slug;\r\n  }\r\n}\r\nadd_filter('parse_query', 'myprefix_convert_id_to_term_in_query');\r\n?><\/pre>\n
The code in this file handles multiple functions to support the Staff page. One of the main features is that it handles the AJAX calls that load a single person or multiple people.\u00a0 The AJAX call for loading multiple people is used to pre-load data for the staff pop-up, which improves performance compared to loading data for each person on the fly.<\/p>\n
To get this file to load, simply add a require_once statement in the theme’s functions.php file:<\/p>\n
require_once( 'library\/staff.php' );<\/pre>\n
We need to create some template files to support display of each person’s info. We will create a template for the pop-up, as well as a standard full-page template for the people post type that will handle the case where users don’t have JavaScript enabled.<\/p>\n
In the library directory, create staff-popup-template.php<\/strong>:<\/p>\n
<div class=\"staff-popup\">\r\n  <div class=\"staff-thumb\"><?php echo get_the_post_thumbnail($person, 'medium'); ?><\/div>\r\n  <div class=\"staff-title\">\r\n    <?php echo esc_html($person->post_title); ?>\r\n    \r\n    <?php\r\n    $person_title = get_field('people_title', $person->ID);\r\n    if (!empty($person_title)) {\r\n    ?>\r\n      <span class=\"staff-position\"><?php echo esc_html($person_title); ?><\/span>\r\n    <?php\r\n    }\r\n    ?>\r\n    \r\n  <\/div>\r\n  <div class=\"staff-bio\"><?php echo apply_filters('the_content', strip_shortcodes($person->post_content)); ?><\/div>\r\n<\/div><\/pre>\n
In the theme root directory create single-people.php<\/strong>. This will automatically become the template for displaying a single record of the people post type.\u00a0 The best way to do this is to copy single.php from your theme, and then insert the following in to the content section of your template.\u00a0 It would look something like this:<\/p>\n
<?php get_header(); ?>\r\n<div id=\"content\">\r\n  <div id=\"inner-content\" class=\"container\">\r\n    <div class=\"row\">\r\n      <div id=\"main\" class=\"col-md-12\" role=\"main\" itemscope itemprop=\"mainContentOfPage\" itemtype=\"http:\/\/schema.org\/Blog\">\r\n        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>\r\n          <article id=\"post-<?php the_ID(); ?>\" <?php post_class('cf'); ?> role=\"article\" itemscope itemprop=\"blogPost\" itemtype=\"http:\/\/schema.org\/BlogPosting\">\r\n            <div class=\"staff-thumb\"><?php the_post_thumbnail($person, 'medium'); ?><\/div>\r\n            <div class=\"staff-title\">\r\n              <h1 itemprop=\"headline\" rel=\"bookmark\"><?php the_title(); ?><\/h1>\r\n              \r\n              <?php\r\n              $person_title = get_field('people_title');\r\n              if (!empty($person_title)) {\r\n              ?>\r\n                <span class=\"staff-position\"><?php echo esc_html($person_title); ?><\/span>\r\n              <?php\r\n              }\r\n              ?>\r\n            <\/div>\r\n            <div class=\"staff-bio\"><?php the_content(); ?><\/div>\r\n          <\/article>\r\n        <?php endwhile; ?>\r\n        \r\n        <?php else : ?>\r\n          <article id=\"post-not-found\" class=\"hentry cf\">\r\n            <header class=\"article-header\">\r\n              <h1><?php _e( 'Oops, Person Not Found!', 'mytheme' ); ?><\/h1>\r\n            <\/header>\r\n            <section class=\"entry-content\">\r\n              <p><?php _e( 'Uh Oh. Something is missing. Try double checking things.', 'mytheme' ); ?><\/p>\r\n            <\/section>\r\n          <\/article>\r\n        <?php endif; ?>\r\n        <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<?php get_footer(); ?><\/pre>\n
You will need to adjust the HTML to fit your site’s theme.<\/p>\n
Now we can add the JavaScript required to handle the functionality on the Staff page. The staff.php page already attempts to enqueue this file.\u00a0 In this example, staff.js<\/strong> is located in {theme root}\/library\/js.<\/p>\n
jQuery(document).ready(function($) {\r\n  var staff_grid_class = 'people-grid';\r\n  var staff_loaded_once = false;\r\n  if ($('.' + staff_grid_class).length > 0) {\r\n    $(window).on('grid:items:added', function(e, element) {\r\n      element = $(element);\r\n      if (element.hasClass(staff_grid_class)) {\r\n        element.off('click');\r\n      }\r\n      if (!staff_loaded_once) {\r\n        open_staff_from_url();\r\n      }\r\n      staff_loaded_once = true;\r\n    });\r\n    \r\n    var slugs = [];\r\n    $('.' + staff_grid_class + ' .vc_grid-item a').each(function(key, person_link) {\r\n      person_slug = get_grid_link_slug($(person_link));\r\n      slugs.push(person_slug);\r\n    });\r\n    $.post('\/wp-admin\/admin-ajax.php?action=myprefix_staff_people', {slugs: slugs.join(',')}, function(data) {\r\n      localStorage.setItem('myprefix_people', data);\r\n    });\r\n    \r\n    \r\n    $('body').on('click', '.' + staff_grid_class + ' .vc_grid-item a', function(e) {\r\n      e.preventDefault();\r\n      title = $(this).attr('title');\r\n      person_slug = get_grid_link_slug($(this));\r\n      people_data = localStorage.getItem('myprefix_people') ? JSON.parse(localStorage.getItem('myprefix_people')) : null;\r\n      if (people_data && people_data[person_slug]) {\r\n        person = people_data[person_slug];\r\n        if ($('#myprefix_person_info').length == 0) {\r\n          $('body').append('<div id=\"myprefix_person_info\" style=\"display:none;\"><\/div>');\r\n        }\r\n        $('#myprefix_person_info').data('popup-title', person.name);\r\n        $('#myprefix_person_info').html(person.html);\r\n        myprefix_popup('myprefix_person_info');\r\n      }\r\n      else {\r\n        url = '\/wp-admin\/admin-ajax.php?action=myprefix_staff_person&slug=' + person_slug;\r\n        myprefix_popup_ajax(url, title, 800);\r\n      }\r\n      return false;\r\n    });\r\n  }\r\n  \r\n  function open_staff_from_url() {\r\n    url_hash = location.hash;\r\n    if (url_hash.length > 0) {\r\n      person_link = $('.' + staff_grid_class + ' .vc_grid-item a[href$=\"\/people\/' + url_hash.replace('#', '') + '\/\"]');\r\n      if (person_link.length > 0) {\r\n        person_link.click();\r\n      }\r\n    }\r\n  }\r\n  $( window ).on( 'hashchange', function( e ) {\r\n    open_staff_from_url();\r\n  });\r\n  \r\n  function get_grid_link_slug(url) {\r\n    link_parts = url.attr('href').split('\/people\/');\r\n    slug = link_parts[link_parts.length - 1].replace('\/', '');\r\n    slug_parts = slug.split('?');\r\n    return slug_parts[0];\r\n  }\r\n});\r\n\r\nif (typeof myprefix_popup == 'undefined') {\r\n  function myprefix_popup(element_id) {\r\n    if (jQuery('#'+element_id).length > 0) {\r\n      jQuery(\"#myprefix-popup-modal .modal-body p\").html(jQuery('#'+element_id).html());\r\n      var title = jQuery('#'+element_id).data('popup-title');\r\n      if (title && title.length > 0) {\r\n        if (jQuery('#myprefix-popup-modal .modal-header h5').length > 0) {\r\n          jQuery('#myprefix-popup-modal .modal-header h5').html(title);\r\n        }\r\n        else {\r\n          jQuery('#myprefix-popup-modal .modal-header').prepend('<h5 class=\"modal-title\">' + title + '<\/h5>');\r\n        }\r\n      }\r\n      else {\r\n        jQuery('#myprefix-popup-modal .modal-header h5').html('');\r\n      }\r\n      jQuery('#myprefix-popup-modal').modal(\"show\");\r\n    }\r\n  }\r\n}\r\n\r\nif (typeof myprefix_popup_ajax == 'undefined') {\r\n  function myprefix_popup_ajax(url, title, width) {\r\n    if (url.length > 0) {\r\n      if (typeof title !== 'undefined' && title.length > 0) {\r\n        if (jQuery('#myprefix-popup-modal .modal-header h5').length > 0) {\r\n          jQuery('#myprefix-popup-modal .modal-header h5').html(title);\r\n        }\r\n        else {\r\n          jQuery('#myprefix-popup-modal .modal-header').prepend('<h5 class=\"modal-title\">' + title + '<\/h5>');\r\n        }\r\n      }\r\n      var popup_width = (typeof width !== 'undefined') ? width : 500;\r\n      jQuery('#myprefix-popup-modal .modal-dialog').css('width', popup_width+'px').css('maxWidth', '90%');\r\n      jQuery(\"#myprefix-popup-modal .modal-body p\").html('loading...').load(url);\r\n      jQuery('#myprefix-popup-modal').modal(\"show\");\r\n    }\r\n  }\r\n}<\/pre>\n
The bottom part of the JS file includes functions to open a Bootstrap modal.\u00a0 These can be changed to use any modal\/dialog\/pop-up supported by your theme.\u00a0 In this case, if you want to use Bootstrap, then you’ll need to add the following to your footer.php file, before the <\/body> tag:<\/p>\n
<div class=\"modal fade\" id=\"myprefix-popup-modal\" role=\"dialog\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n          <span aria-hidden=\"true\">&times;<\/span>\r\n        <\/button>\r\n      <\/div>\r\n      <div class=\"modal-body\">\r\n        <p class=\"error\"><\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
The modal div should be hidden by default using CSS in the Bootstrap styles. Next we’ll want to add custom styles for our modal.\u00a0 In your theme’s CSS file, add the following.<\/p>\n
\/* Staff popup *\/\r\n\r\n.modal-header {\r\n  padding-bottom: 0!important;\r\n  border: none!important;\r\n}\r\n\r\n.modal-header .close {\r\n  width:auto;\r\n}\r\n\r\n.modal-body {\r\n  padding-top: 0!important;\r\n}\r\n\r\n.modal-body h3{\r\n  margin-bottom: 0;\r\n}\r\n\r\n.modal-title{display: none!important}\r\n\r\n\/* Staff Details page*\/\r\n\r\n.people_departments-staff{\r\n  padding-top: 2rem;\r\n  padding-bottom: 2rem;\r\n}\r\n\r\n@media (min-width: 576px){\r\n  .modal-dialog {\r\n    max-width: 1080px!important;\r\n    width: 80%!important;\r\n    margin-top: 3rem;\r\n  }\r\n}\r\n\r\n@media (min-width: 768px){\r\n  .staff-popup img{\r\n    float: left;\r\n    margin: 8px 25px 10px 0;\r\n  }\r\n}\r\n\r\n@media (min-width: 992px){\r\n  .modal-body {\r\n    padding: 3rem!important;\r\n    padding-top: 0!important;\r\n  }\r\n}\r\n\r\n@media (min-width: 1280px){\r\n  .modal-dialog {\r\n    margin-top: 5rem;\r\n  }\r\n  \r\n  .people_departments-staff{\r\n    padding-top: 4rem;\r\n    padding-bottom: 4rem;\r\n  }\r\n}\r\n\r\n\/* Popup *\/\r\n\r\n.modal-backdrop {\r\n    background-color: #C9B390!important;\r\n  opacity: .8!important\r\n}\r\n\r\n.modal-content {\r\n    border-radius: 0;\r\n  border: 2px solid #be0a26;\r\n}\r\n\r\n.close {\r\n    font-size: 2.5rem!important;\r\n    font-weight: 400!important;\r\n    color: #be0a26!important;\r\n    opacity: 1!important;\r\n}\r\n\r\n.staff-popup img,\r\n.people_departments-staff .staff-thumb img{\r\n  border-radius: 250px!important;\r\n  border: 4px solid #be0a26;\t\t\r\n}\r\n\r\n.staff-popup h2{\r\n  font: 24px\/1 \"Open Sans Condensed\", sans-serif;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.staff-popup h4{\r\n  font: 400 18px\/1.5 \"Karla\", Arial, Helvetica, sans-serif;\r\n  text-transform: uppercase;\r\n  margin-bottom: 2.5rem;\r\n}\r\n\r\n.staff-thumb img{\r\n  float: none;\r\n}\r\n\r\n.staff-title {\r\n  font-family: \"Open Sans Condensed\", sans-serif;\r\n  font-size: 24px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.staff-title span.staff-position{\r\n  font-family: \"Karla\", Arial, Helvetica, sans-serif;\r\n  font-size: 16px;\r\n  display: block;\r\n}\r\n\r\n.staff-bio{\r\n  padding-top: 2rem\r\n}\r\n\r\n.single-people .staff-title h1 {\r\n  font-size: 24px;\r\n}\r\n\r\n.single-people .staff-title {\r\n  padding-top:0;\r\n}\r\n\r\n@media (min-width: 768px){\t\r\n  .staff-title span.staff-position:after{\r\n    margin: 30px 0 0!important;\r\n  }\r\n  \r\n  .modal-body{\r\n    padding: 0 3rem 2.5rem!important\r\n  }\r\n  \r\n  .staff-thumb {\r\n    float: left;\r\n    width: 30%\r\n  }\r\n  \r\n  .staff-title {\r\n    float: right;\r\n    width: 65%;\r\n    padding-top: 1.5rem;\r\n    font-size: 30px;\r\n  }\r\n  \r\n  .staff-bio{\r\n    clear: both;\r\n  }\r\n  \r\n  .people_departments-staff .staff-title,\r\n  .people_departments-staff .staff-bio{\r\n    clear: none!important;\r\n    float: none!important;\r\n    width: 100%!important;\r\n    padding: 0!important;\r\n  }\r\n  \r\n  .people_departments-staff .staff-thumb{\r\n    margin-right: 2rem;\r\n    margin-bottom: 1rem;\r\n    width: auto;\r\n  }\r\n  \r\n  .people_departments-staff .staff-thumb img{\r\n    margin-bottom:1rem;\r\n  }\r\n  \r\n  .people_departments-staff .staff-title span.staff-position:after {\r\n    margin: 30px 0 25px 332px!important;\r\n  }\r\n}\r\n\r\n@media (min-width: 992px){\r\n  .staff-thumb {\r\n    width: 40%\r\n  }\r\n  \r\n  .staff-title{\r\n    width: 55%;\r\n    padding-top: 4rem;\r\n    font-size: 36px;\r\n  }\r\n  \r\n  .staff-title span.staff-position{\r\n    font-size: 20px;\r\n  }\r\n  \r\n  .people_departments-staff .staff-thumb{\r\n    width: auto;\r\n  }\r\n  \r\n}\r\n\r\n@media (min-width: 1200px){\r\n  .staff-thumb {\r\n    width: 300px;\r\n  }\r\n  .staff-title {\r\n    width:calc(100% - 350px);\r\n    padding-top: 4rem;\r\n  }\t\r\n  .staff-title span.staff-position{\r\n    font-size: 20px;\r\n  }\r\n  .staff-title span.staff-position:after{\r\n    margin: 50px 0 0!important;\r\n  }\r\n  \r\n  .people_departments-staff .staff-thumb{\r\n    width: auto;\r\n  }\r\n  \r\n  .people_departments-staff .staff-thumb {\r\n    \tmargin-right: 4rem;\r\n  }\r\n  \r\n  .people_departments-staff .staff-title span.staff-position:after {\r\n    margin: 30px 0 25px 360px!important;\r\n  }\r\n}\r\n\r\n@media (min-width: 1280px){\r\n  .modal-body {\r\n    padding: 0 5rem 4.5rem!important;\r\n  }\r\n  .staff-title {\r\n    font-size: 48px;\r\n  }\t\r\n  .staff-title span.staff-position{\r\n    font-size: 24px;\r\n  }\r\n  \r\n}\r\n\r\n@media (max-width: 767px){\r\n  .staff-popup *{\r\n    text-align: center!important;\r\n  }\r\n  .staff-popup img{\r\n    display: block;\r\n    margin: 0 auto 2rem;\r\n  }\r\n  \r\n  .people_departments-staff .staff-thumb,\r\n  .people_departments-staff .staff-title,\r\n  .people_departments-staff .staff-bio{\r\n    text-align: center\r\n  }\r\n}<\/pre>\n
Still with me? Now we get to the part where we actually show the post grid. We need to create a new Page and enable the WP Bakery builder in the editor.\u00a0 Then add a new Post Grid element to the page. In the settings for the post grid:<\/p>\n