WordPress.org

Ready to get started?Download WordPress

Forums

Simple Staff List
[resolved] link to Staff Member page (29 posts)

  1. mpmchugh
    Member
    Posted 1 year ago #

    So, I notice that in the admin, when you View Staff Member you get a page displayed using single.php.

    Is there a way to set a template instead? (like :single-{posttype}.php)

    What is the Staff Member post-type?

    If so, are there template tags to pull in the other data fields? By default it only shows the image and the title. Can this be done with standard post-type template tags?

    I'm trying to figure out a way of using Easy Fanybox's iframe ability to show the Staff Member's page when their image is clicked. (we're already using Easy Fancybox for a few other things).

    I guess I'd also need a [staff-page-url] tag too somehow, then.

    I was thinking of using Easy Fancybox's ability to show inline content instead, but it requires each hidden div to be shown to have a different ID, though I guess I could use the [staff-name-slug] for the div ID.

    Just thought of that, but I'm curious if the iframe method described above would also work somehow with a custom template.

    Thanks,
    Michael

    http://wordpress.org/extend/plugins/simple-staff-list/

  2. mpmchugh
    Member
    Posted 1 year ago #

    Actually, I was able to fully implement this using the following template, loading the bios via inline fancybox overlays:

    [staff_loop]
    <a href="#[staff-name-slug]" class="fancybox staffBox"><img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">
    	<div class="staff-member-info-wrap">
    		[staff-name-formatted]
    		[staff-position-formatted]
    	</div></a><div style="display:none" class="fancybox-hidden"><div id="[staff-name-slug]" style="width:640px;">
    <h3 class="staff-member-name">[staff-name] <span> — [staff-position]</span></h3>
    <img class="staff-member-photo-overlay" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">[staff-bio-formatted]
    </div></div>
    [/staff_loop]
  3. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    Awesome. Glad you got that worked out. But yes, you should be able to use a single-{posttype}.php as a template for a single staff member. You should also be able to piece together a link to a single staff member using something like: http://{your-website-name}/staff-members/[staff-name-slug].

    I'm about to post on your other question in a few minutes.

  4. mpmchugh
    Member
    Posted 1 year ago #

    Thanks! Just posted a review too. This plugin saved me a lot of work.

  5. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks! I really appreciate it!

  6. alex94040
    Member
    Posted 1 year ago #

    I'm not quite following how this actually was done. The reason why I'd like to see individual pages working is because this is also important for site search (i.e. WordPress site search brings up the staffers, and I'd like the staff landing page to look good). Can you give the detailed instructions on how to get this done? I'm very comfortable with PHP, but not very knowledgeable about WordPress.

  7. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Alex,

    What you'll need to do is duplicate your theme's single.php file and name it single-staff-member.php and then when someone accesses a single staff member page it'll use that template (template hierarchy).

    Then, to access and display the Staff Member data inside single-staff-member.php, you'll need to do something like:

    $custom = get_post_custom();
    $name = get_the_title();
    $name_slug = basename(get_permalink());
    $title = $custom["_staff_member_title"][0];
    $email = $custom["_staff_member_email"][0];
    $phone = $custom["_staff_member_phone"][0];
    $bio 	= $custom["_staff_member_bio"][0];

    ,etc

    You can always just use print_r($custom) to see all the custom fields.

    Let me know if this helps.

  8. alex94040
    Member
    Posted 1 year ago #

    Thank you! It worked like a charm. I was also able to easily add the custom properties I added to the schema to that page.

    The only remaining question is how to get the photo to render on that page - can you help out?

  9. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    Hey alex,

    You can get the photo url like this:

    if(has_post_thumbnail()){
    	$photo_url = wp_get_attachment_url( get_post_thumbnail_id() );
    	$photo = '<img class="staff-member-photo" src="'.$photo_url.'" alt = "'.$title.'">';
    }
  10. alex94040
    Member
    Posted 1 year ago #

    Worked like a charm! Thank you!!

  11. ussailing
    Member
    Posted 9 months ago #

    Hey mpmchugh,

    I used the code you provided on my template and when I click on the name it pops up but if i X out and then try, it actually brings up a screen shot of the screen I'm on...any idea? Check it out at http://dev.ussailing.org/index.php/about-us/board-of-directors/

  12. AJ
    Member
    Posted 7 months ago #

    Hi, i got the plugin to read the single-staff-member.php page but im having problems displaying the information. Can anyone paste their single-staff-member.php ?

  13. AJ
    Member
    Posted 7 months ago #

    Ok Nichelabs posted this in another thread, thanks mate
    >> http://wordpress.org/support/topic/custom-post-template-for-single-staff-member?replies=3

    I havent tried it yet though but it looks good so far.

    <?php
    		global $post;
    		$custom 	= get_post_custom();
    		$name 		= get_the_title();
    		$name_slug	= basename(get_permalink());
    		$title 		= $custom["_staff_member_title"][0];
    		$email 		= $custom["_staff_member_email"][0];
    		$phone 		= $custom["_staff_member_phone"][0];
    		$fax 		= $custom["_staff_member_fax"][0];
    		$bio 		= $custom["_staff_member_bio"][0];
    		$prof 		= $custom["_staff_member_prof"][0];
    		$fb_url		= $custom["_staff_member_fb"][0];
    		$tw_url		= 'http://www.twitter.com/' . $custom["_staff_member_tw"][0];
    		$li_url		= $custom["_staff_member_li"][0];
    		if(has_post_thumbnail()){
    
    			$photo_url = wp_get_attachment_url( get_post_thumbnail_id() );
    			$photo = '<img class="staff-member-photo" src="'.$photo_url.'" alt = "'.$title.'">';
    		}else{
    			$photo_url = '';
    			$photo = '';
    		}
    		$email_mailto = '<a href="mailto:'.antispambot( $email ).'" title="Email '.$name.'">'.antispambot( $email ).'</a>';
    ?>
  14. h2ofilters
    Member
    Posted 7 months ago #

    Thanks AJ. You save my day. I have been really frustrated with this but looks like I am getting close. I have successfully created the single staff page. But still having trouble modifying the staff default template.

    Here is my overall template:

    <?php get_header(); ?>
    
    	<div id="page-full">
    
    		<?php while (have_posts()) : the_post(); ?>
    
    			<?php if ( has_post_thumbnail() ) { ?>
    
    				<?php the_post_thumbnail('staff-full', array( 'class' => 'shadow' ) ); ?>
    
    			<?php } ?>
    
    			<h1><?php the_title(); ?></h1>
    
    global $post;
    		$custom 	= get_post_custom();
    		$name 		= get_the_title();
    		$name_slug	= basename(get_permalink());
    		$title 		= $custom["_staff_member_title"][0];
    		$email 		= $custom["_staff_member_email"][0];
    		$phone 		= $custom["_staff_member_phone"][0];
    		$fax 		= $custom["_staff_member_fax"][0];
    		$bio 		= $custom["_staff_member_bio"][0];
    		$prof 		= $custom["_staff_member_prof"][0];
    		$fb_url		= $custom["_staff_member_fb"][0];
    		$tw_url		= 'http://www.twitter.com/' . $custom["_staff_member_tw"][0];
    		$li_url		= $custom["_staff_member_li"][0];
    		if(has_post_thumbnail()){
    
    			$photo_url = wp_get_attachment_url( get_post_thumbnail_id() );
    			$photo = '<img class="staff-member-photo" src="'.$photo_url.'" alt = "'.$title.'">';
    		}else{
    			$photo_url = '';
    			$photo = '';
    		}
    		$email_mailto = '<a href="mailto:'.antispambot( $email ).'" title="Email '.$name.'">'.antispambot( $email ).'</a>';
    
    			<?php } ?>
    
    			<?php the_content();?>
    
    				<?php endwhile; ?>	
    
    	</div><!-- #page-full -->
    
    <?php get_footer(); ?>

    Question now is where does this code go in the following default staff template? Here is what I have but still could not apply:

    [staff_loop]
        <strong><a href="http:{mywebsite}"></a></strong><div class="staff-member-info-wrap">
    		[staff-position-formatted]
    	<img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">
    		[staff-name-formatted]
    		[staff-bio-formatted]
    		[staff-email-link]
    	</div><strong></strong>
    [/staff_loop]

    My additions are in bold letters. Any help will be appreciated.

  15. mpmchugh
    Member
    Posted 7 months ago #

    Hi h2ofilters,

    This has nothing to do with the default template. That's for the shortcode.

    For the single Staff Members page itself, you need to use the variables defined in the template itself, so save the code below as "single-staff-member.php" in your template directory.

    Note the areas I commented. The variables can be dropped into the loop using snippets like <?=$bio?>. Just replace the variable name for each and wrap in what ever containers and classes you need to define your layout.

    Note I added t_ in front of a few of the variable names to prevent conflicts in my theme, but either should work.

    -Michael

    <?php get_header(); ?>
    <?php
    		global $post;
    		$custom 	= get_post_custom();
    		$t_name 		= get_the_title();
    		$name_slug	= basename(get_permalink());
    		$title 		= $custom["_staff_member_title"][0];
    		$email 		= $custom["_staff_member_email"][0];
    		$phone 		= $custom["_staff_member_phone"][0];
    		$fax 		= $custom["_staff_member_fax"][0];
    		$bio 		= $custom["_staff_member_bio"][0];
    		$prof 		= $custom["_staff_member_prof"][0];
    		$fb_url		= $custom["_staff_member_fb"][0];
    		$tw_url		= 'http://www.twitter.com/' . $custom["_staff_member_tw"][0];
    		$li_url		= $custom["_staff_member_li"][0];
    		if(has_post_thumbnail()){
    
    			$t_photo_url = wp_get_attachment_url( get_post_thumbnail_id() );
    			$t_photo = '<img class="staff-member-page-photo" src="'.$t_photo_url.'" alt = "'.$title.'">';
    		}else{
    			$t_photo_url = '';
    			$t_photo = '';
    		}
    		$email_mailto = '<a class="staff-member-email" href="mailto:'.antispambot( $email ).'" title="Email '.$name.'">'.antispambot( $email ).'</a>';
    ?>	
    
    	<div id="page-full">
    
    		<?php while (have_posts()) : the_post(); ?>
    
    			<h1><?php the_title(); ?></h1> <!-- This is the Standard page title -->
    
    			<h3><?=$title?></h3> <!-- This is the Staff Memeber Title -->
    
    			<?=$t_photo?> <!-- This is the Staff Memeber Photo -->
    
    			<p><?=$bio?></p>  <!-- This is the Staff Memeber Bio -->
    
    			<?php the_content();?>
    
    				<?php endwhile; ?>	
    
    	</div><!-- #page-full -->
    
    <?php get_footer(); ?>
  16. h2ofilters
    Member
    Posted 7 months ago #

    Thanks for taking the time to look into this. I removed all the t_ and saved the code as a staff-page.php but I encountered the following server error:

    Internal Server Error
    The server encountered an internal error or misconfiguration and was unable to complete your request.

    I checked all the codes and I couldn't not see any unclosed tags.

  17. mpmchugh
    Member
    Posted 7 months ago #

    I just tested it in an install of mine, and it worked as is.

    There was no need to remove the "t_"s at all. Perhaps you deleted something else?

    Try using it as is.

  18. h2ofilters
    Member
    Posted 7 months ago #

    Thank you again Michael. It does not give any more error messages. However, I am very reluctant to ask and being holding it all day. Anyway, shedding my fear and pride ;)

    I still don't know how to incorporate this code with the staff page. I already have a list of staff members and I want each to open in a single page. So, my challenge now is to use this single page with what I already have.

    Thank you and sorry for the trouble.

  19. mpmchugh
    Member
    Posted 7 months ago #

    The links in your staff page should work using something like this URL format:

    <a href="http://yoursite.com/staff-members/[staff-name-slug]>[staff-name-formatted]</a>

    -Michael

  20. h2ofilters
    Member
    Posted 7 months ago #

    Great! Worked now. I really appreciate your kindness. Have a good evening.

  21. Mike Sinkula
    Member
    Posted 7 months ago #

    This whole thread was incredibly helpful. Thanks to all of you!

  22. jpod
    Member
    Posted 6 months ago #

    I came up with this simple class to simplify my single-staff-member.php. Maybe it's useful for somebody else too.

    class StaffMember {
    	protected $record;
    	protected $record_prefix = '_staff_member_';
    	protected $class_prefix = 'staff-member-';
    
    	public function __construct() {
    		$this->record = get_post_custom();
    	}
    
    	public function __get( $field ) {
    		return $this->record[ $this->record_prefix . $field ][0];
    	}
    
    	public function show( $field, $markup = null, $class = null ) {
    		$content = $this->record[ $this->record_prefix . $field ][0];
    
    		if ( !$content ) return;
    		if ( !$markup ) $markup = 'span';
    		if ( !$class ) $class = $this->class_prefix . $field;
    
    		echo '<' . $markup . ' class="' . $class . '">' . $content . '</' . $markup . '>';
    	}
    
    	public function mailto( $class = null ) {
    		if ( !$class ) $class = $this->class_prefix . 'email';
    		echo '<a href="' . antispambot( $this->email ) . '" class="' . $class . '">' .
    			antispambot( $this->email ) . '</a>';
    	}
    }
  23. h2ofilters
    Member
    Posted 6 months ago #

    Nice and thanks for your efforts. Can you explain how you used it. My website was crashing with the one I copied from here and I had to remove it. I will appreciate your assistance.

  24. jpod
    Member
    Posted 6 months ago #

    Sorry, I forgot to check e-mail notification. I think the crash may be related to the class name. I tend to prefix all my classes and variables, but removed the prefix before I posted the code, so there's likely a namespace conflict. Try renaming the class to MyStaffMember or whatever suits you.

    The class is intended to be used to retrieve information about a single staff member for use in the single-staff-member.php, it will not work in other contexts.

    What it does is that it allows you to access the data about your staff member (e.g., phone number, email etc.) via class properties, so rather than saying, e.g.:

    $custom 	= get_post_custom();
    $title 		= $custom["_staff_member_title"][0];

    You can say:

    $member = new SomePrefix__StaffMember();
    $title = $member->title;

    Of course, the great thing is that there is no longer a need to define a variable for each field.

    There are also some convienience functions, namely, show() and mailto():

    show() will print the requested field, inside a <span> tag (or another tag which you can specify as 2nd argument), assigning a DOM (not PHP) class of the form "staff-member-$FIELD" where $FIELD is replaced with the name of the field printed (you can pass a third argument to show() to assign a different DOM class name).

    mailto() will simply print out a mailto link with the email address "encrypted" by WordPress' antispambot() function. If you access the email address via show() or the email property of the StaffMember class, it will not be "encrypted".

    So to give you an example, this is how my single-staff-member.php looks like (note the prefixes).

    <?php
    /**
     * The Template for displaying staff members
     *
     * See http://wordpress.org/support/topic/link-to-staff-member-page
     */
    
    $rockingthevorstand__single_staff_member_obj = new rockingthevorstand__StaffMember();
    
    get_header(); ?>
    	<div id="primary" class="site-content">
    		<div id="content" role="main">
    			<article class="staff-member staff-member-single type-staff-member">
    				<header class="entry-header staff-member-header">
    					<h1 class="entry-title"><?php echo get_the_title(); ?></h1>
    					<?php $rockingthevorstand__single_staff_member_obj->show( "title", "div" ); ?>
    				</header>
    				<div class="entry-content">
    					<?php if(has_post_thumbnail()): ?>
    						<div class="staff-member-photo">
    							<img class="staff-member-photo" height="180" width="150"
    								src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>"
    								alt="<?php echo get_the_title(); ?>" />
    						</div>
    					<?php endif; ?>
    					<div class="staff-member-content">
    						<?php if($rockingthevorstand__single_staff_member_obj->email) :?>
    							<div class="staff-member-email"><strong>E-Mail:</strong>
    								<?php $rockingthevorstand__single_staff_member_obj->mailto(); ?>
    							</div>
    						<?php endif; ?>
    						<?php $rockingthevorstand__single_staff_member_obj->show( "bio", "div" ); ?>
    					</div>
    				</div>
    			</article>
    		</div><!-- #content -->
    	</div><!-- #primary -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
  25. jbrew30
    Member
    Posted 6 months ago #

    I've done all the above and still can't get this to work. I have a single-staff-member.php in my theme folder and my (page-templates folder). Slug and everything works fine. Just when I click the read more button everything messes up.

    Please Help

    http://giveching.com/dev/about-us/

  26. h2ofilters
    Member
    Posted 6 months ago #

    Same with me but just switched to paid plugin. I did all as directed but never worked but luckily I found a pretty low cost plugin

  27. jbrew30
    Member
    Posted 6 months ago #

    Dude, at this point I don't care if it cost money. Post up the link where you got your paid plugin.

  28. mpmchugh
    Member
    Posted 6 months ago #

    @ jbrew30 looks like your dev Team page is working. Did you figure it out?

  29. peggyst
    Member
    Posted 5 months ago #

    I just wanted to chime in that I read and re-read this thread several times, and gathered some additional information, and was able to get this working per the instructions. So THANK YOU! Great plugin.

    To (try to) clarify, for the less WP savvy and other newbies out there (like me), here is what I did. My goal was to have a single page with staff photos/name/positions and be able to click on the name to go to a single bio page for each person.

    1. Created a single-staff-member.php file in my theme folder, by duplicating single.php and dumping in the code that AJ refers to from http://wordpress.org/support/topic/custom-post-template-for-single-staff-member. I did need to modify this .php file to incorporate some of the divs from my theme's single.php, so the page would look consistent with other pages.
    2. Modified the Staff Loop template (in WordPress) to include the link to the slug-name so that both the name and photo were linked:

    [staff_loop]
    <div class="staff-member-container">
    <a href="http://mywebsite.com/staff-members/[staff-name-slug]"> [staff-name-formatted]
    <img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]"></a>
     <div class="staff-member-info-wrap">
     [staff-position-formatted]
     </div>
     </div>
    [/staff_loop]
    <div style="clear:both;"></div>

    3.Modified the Staff Page CSS (in WordPress) per so that the staff listing page would be multi-columned:

    div.main_inner {
      display: table;
    }
    
    div.staff-member {
    float:left;/*fix for buggy browsers*/
    display:table-column;
    width:230px;
    height:250px;
    text-align: center;
    vertical-align: middle;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.