You’re on the right track. One option: create your own plugin which creates shortcodes, which are easy for non-tech-savvy users to paste into the editor (and even work when pasted into the Visual Editor). You can also replace your table with floated divs.
The table-to-div conversion will be easier if you are already using a framework such as Foundation or Bootstrap. Both of these use a grid system so you don’t have to figure out where <tr> tags begin and end – you can just wrap each person in a <div> with the correct classes. In Foundation, you would use something like
<div class="row team small-up-2 medium-up-3 large-up-4">
<div class="column" onclick="openNav('username1')">Person 1's name</div>
<div class="column" onclick="openNav('username2')">Person 2's name</div>
</div>
This is called the Block Grid, and it’s nice because you can wrap however many people you want inside the single row – they will float down beneath each other according to the numbers you set in small-up-2 etc.
As far as the plugin that creates shortcodes, here’s a basic example which you can start with and then customize further. Inside your plugin file:
<?php
/*
Plugin Name: Team Member Overlay
Description: Creates shortcodes so content editors don't have to copy code
Version: 1.0
*/
add_shortcode('teamwrapper', 'outer_wrap_team_code');
function outer_wrap_team_code() {
return '<div class="row team">' . do_shortcode($content) . '</div>';
}
add_shortcode('teammember', 'wrap_team_member_code');
function wrap_team_member_code($atts, $content = null) {
$a = shortcode_atts(array(
'id' => '1',
'name' => 'Empty Name'
), $atts);
return '<div class="column" id=' . $a['id'] . '>' . $a['name'] . '</div><div class="overlay" id="' . $a['id'] . '">' . do_shortcode($content) . '</div>';
}
?>
Key info here:
- The first shortcode serves as the outer wrapper. This keeps content from going full-width across the screen, like
<table>tags would, except it’s also responsive so you zoom in more on smaller screens. - The second shortcode will be wrapped around each person. The ID you’ll use to trigger the correct overlay needs to be input by the content manager. Since they are entering this in the content editor, there isn’t a way of incrementing automatically with PHP.
do_shortcode()is required when nesting shortcodes – if you forget it, then only the outer wrapper will work, and the nested[teammember]will not work.- The markup here doesn’t quite match up to your original, so you’ll need to adjust and see what works best.
Once the plugin is activated, when someone edits the page where everyone is listed, they will type in:
[teamwrapper]
[teammember id="username1" name="Person 1's name"]Person 1's bio[/teammember]
[teammember id="username2" name="Person 2's name"]Person 2's bio[/teammember]
...
[/teamwrapper]
The [teamwrapper] [/teamwrapper] shortcode should wrap around however many team members you have.