Staff Groups

[Jenny Anderson]

Hi Bill!

I am wondering if there is any shortcode that I could put in to only display certain staff groups on certain pages. I know there is the option to create different staff groups into pages on the menu (which I have done right now) but I want to add content below the photos (just a sentence talking about how to get involved as a volunteer or staff openings under the “team page”). Is there any way to put these photos into pages instead of just generating the staff group categories to populate?

Thanks,
Jenny

[Bill Robbins]

Hello Jenny,

There’s not one built in, but you can add one via a plugin if you’d like to. Once you’ve installed and activated the plugin, you should be able to add a staff group using a shortcode like this:

[staff group="core"]

where core is the “slug” of the staff group you’d like to display. You can find the slug by going to staff groups in your dashboard. They’ll be listed along with their slugs on the right hand side of this screen.

You can download the plugin from: https://dl.dropboxusercontent.com/u/6160765/Plugins/grassroots-staff-shortcode.zip

Let me know how it goes.

Have a great week,
Bill

[Jenny Anderson]

Thanks Bill! That plugin in & code worked. However, it made all of the team members in a line. Can I throw in some code to make it line up like it normally does?

For your reference here’s what the page looks like currently: http://www.celebrateautism.com/team/

Thanks a lot!

[Bill Robbins]

Hello Jenny,

Well it looks like the styling for those is tied to the page template or staff group. I did not remember it being that way. I believe I’ll change that in the next theme update. Until then you can use this to line those up better:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .staff-list article.staff{
   	float: left;
   	width: 30%;
   	margin-bottom: 20px;
   }
   
   .staff-list article.staff:nth-child(3n + 2) {
   	margin-left: 5%;
   	margin-right: 5%;
   }
   
   .staff-list article.staff:nth-child(3n + 4) {
   	clear: both;	
   }
   
   @media only screen and (max-width: 767px) {
   	
   	.staff-list article.staff,
   	.staff-list article.staff:nth-child(3n + 2) {
   		width: 47%;
   		margin-left: 0;
   		margin-right: 0;
   	}
   	
   	.staff-list article.staff:nth-child(even) {
   		margin-left: 3%;
   	}
   	
   	.staff-list article.staff:nth-child(odd) {
   		clear: both;
   	}
   	
   	.staff-list article.staff:nth-child(3n + 4) {
   		clear: none;	
   	}
   
   }
   
   @media only screen and (max-width: 520px) {
   	
   	.staff-list article.staff,
   	.staff-list article.staff:nth-child(3n + 2),
   	.staff-list article.staff:nth-child(even) {
   		float: none;
   		width: 100%;
   		clear: both;
   		margin-right: auto;
   		margin-left: auto;
   	}
   
   }
   

3. Update your settings.

Let me know if that doesn’t do the trick.

Take care Jenny

[Author]

Posts