0

So I've put together a website locally on my computer and I've been turning it into a custom theme for wordpress. My boss wants the site to be easily managed by people who aren't fond of looking at code. Most of the pages are simple enough to edit for the average user, however I have some pages that I'm not quite sure how to approach making editing simpler. One page lists out team members using a table, and when their name is clicked on, a full screen overlay with the team member's bio slides down.

The challenge I'm facing is how do I set things up so that the person managing the site, if they need to add or remove a team member, just needs to type out the person's name and bio, and it will automatically wrap the name and bio in the correct tags, and place the name in the table correctly?

I was thinking maybe a plugin, but I looked through what was available through wordpress and didn't really find what I was looking for. I thought maybe writing my own plugin would work, but I wasn't sure where to start as I've only written very basic plugins.

Here's the relevant part of the code. Let me know if there's any other info that would help.

HTML

 <div class="main TeamPage">
    <div id="username1" class="overlay">
       <div class="overlay-content team_member">
          <a class="closebtn" href="javascript:void(0)" onclick="closeNav('tgaffney')">x</a>
          <p class="name">Name</p>
          <p class="title">Title</p>
          <p class="description">...</p>
       </div>
    </div>

    <table class="team">
       <tr>
          <td>
             <span class="teamName" onclick="openNav('username1')">Name</span>
             <span class="team">...</span>
          </td>
          <td>
             <span class="teamName" onclick="openNav('username2')">Name</span>
             <span class="team">...</span>
          </td>
       </tr>
    </table>
 </div>

Overlay Javascript

 $(document).ready(function() {
   openNav(id);
   closeNav(id);
 });
   function openNav(id) {
       document.getElementById(id).style.height = "100%";
   }

   function closeNav(id) {
       document.getElementById(id).style.height = "0%";
   }

Overlay CSS

 /**** 15. Overlay Styling ****/

 .overlay {
   height: 0%;
   width: 100%;
   position: fixed;
   z-index: 1;
   top: 0%;
   left: 0%;
   background-color: rgb(255,255,255);
   background-color: rgba(255,255,255,0.75);
   overflow-y: hidden;
   transition: .75s;
   margin: auto;
 }

 .overlay-content {
   position: relative;
   top: 30%;
   max-height: 50%;
   max-width: 60%;
    margin-left: auto;
    margin-right: auto;
   text-align: left;
   overflow-y: auto;
   background-color: white;
 }

 .overlay-content p.description {
    font-size: 85%;
 }

 div.team_member {
   padding: 20px;
   line-height: 1.5em;
   border: 2px solid black;
 }

 div.team_member p.name {
   font-size: 1.5em;
   font-weight: bold;
   padding-bottom: 2px;
 }

 div.team_member p.title {
   font-size: 1em;
   font-style: italic;
   padding-bottom: 5px;
 }

Any and All help is appreciated, thanks!

0

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.

  • Don't forget to escape the user input when displaying it and we can indent the code by 4 spaces to get a proper multiline code blocks – birgire Mar 17 '17 at 9:22
  • This was extremely helpful, thank you! One thing I noticed though was that, only the shortcode that was going to have other shortcodes nested in it needed the do_shortcode(). So the second shortcode should only have $content rather than do_shortcode($content). – SEF Mar 22 '17 at 14:50
  • Glad it gave you some ideas. It depends on whether you think people will ever need to use a shortcode inside of the person's bio. If so, go ahead and use do_shortcode($content) - this will work with or without shortcodes. For simplicity's sake I left it off expecting that your non-tech users would probably not paste additional shortcodes inside, which would nest them 3 levels deep. – WebElaine Mar 23 '17 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.