Help integrating php tutorial into Genesis

[jbculp]

I'm trying to implement a Team Page by following this tutorial on CSS-Tricks.

The front end was no problem. Used plugin to create custom fields. Registered custom post type in Functions.php etc.

When I use the final step - "loop to display team posts" things go wrong. I have a template-team.php per instructions and I see the loop but (a) there is no WordPress page background (header, footer, content frame etc.) and (b) no CSS. When I put the code in my functions.php the site breaks (white page only).

I don't know if the integration is complicated due to Genesis needing special syntax so I'm posting here so Genesis folks can help. Here is the php code that is giving me the problem:

<?php

/**
 * Template Name: Team
 */

the_post();

// Get 'team' posts
$team_posts = get_posts( array(
	'post_type' => 'team',
	'posts_per_page' => -1, // Unlimited posts
	'orderby' => 'title', // Order alphabetically by name
) );

if ( $team_posts ):
?>
<section class="row profiles">
	<div class="intro">
		<h2>Meet The Team</h2>
		<p class="lead">&ldquo;Individuals can and do make a difference, but it takes a team<br>to really mess things up.&rdquo;</p>
	</div>
	
	<?php 
	foreach ( $team_posts as $post ): 
	setup_postdata($post);
	
	// Resize and CDNize thumbnails using Automattic Photon service
	$thumb_src = null;
	if ( has_post_thumbnail($post->ID) ) {
		$src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'team-thumb' );
		$thumb_src = $src[0];
	}
	?>
	<article class="col-sm-6 profile">
		<div class="profile-header">
			<?php if ( $thumb_src ): ?>
			<img src="<?php echo $thumb_src; ?>" alt="<?php the_title(); ?>, <?php the_field('team_position'); ?>" class="img-circle">
			<?php endif; ?>
		</div>
		
		<div class="profile-content">
			<h3><?php the_title(); ?></h3>
			<p class="lead position"><?php the_field('team_position'); ?></p>
			<?php the_content(); ?>
		</div>
		
		<div class="profile-footer">
			<a href="tel:<?php the_field('team_phone'); ?>"><i class="icon-mobile-phone"></i></a>
			<a href="mailto:<?php echo antispambot( get_field('team_email') ); ?>"><i class="icon-envelope"></i></a>
			<?php if ( $twitter = get_field('team_twitter') ): ?>
			<a href="<?php echo $twitter; ?>"><i class="icon-twitter"></i></a>
			<?php endif; ?>
			<?php if ( $linkedin = get_field('team_linkedin') ): ?>
			<a href="<?php echo $linkedin; ?>"><i class="icon-linkedin"></i></a>
			<?php endif; ?>
		</div>
	</article><!-- /.profile -->
	<?php endforeach; ?>
</section><!-- /.row -->
<?php endif; ?>

Hopefully someone can help me close this.

[Sridhar Katakam]

I am on it.

View post on imgur.com

Instructions to follow..

---

Genesis Tutorials | Follow me on Twitter

[Sridhar Katakam]

1) Create a file named page_team.php having this code in the child theme.

2) Create a file named team.css in /css under child theme directory having this code.

3) Add this in functions.php.

For anyone else going along this way, the tutorial in question is http://css-tricks.com/creating-meet-team-page-wordpress/.

---

Genesis Tutorials | Follow me on Twitter

[Gary Jones]

* use a prefix for your function.
* document your code.
* use get_stylesheet_directory_uri().
* don't uppercase boolean constants.
* consider breaking out the contents of loops into their own smaller functions.
* ensure code standards are followed.
* escape everything.
* don't include redundant HTML comments.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[Sridhar Katakam]

Thanks for the advice Gary. Have a few questions.

When you say "don't use uppercase boolean constants", are you referring to TRUE in

add_image_size( 'team-thumb', 100, 100, TRUE );

?

I have copied it from Minimum Pro's functions.php.

consider breaking out the contents of loops into their own smaller functions.

I have not written the actual code in page_team.php. It was from the css-tricks article. Being a non-coder, if I were to do this from scratch, I would just take the easy way and do it using Types & Views.

use get_stylesheet_directory_uri()

I copied the following line from Minimum Pro's functions.php and modified it:

wp_enqueue_script( 'minimum-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

I do remember this same suggestion from you in the past. But seeing the usage in a theme that directly came from StudioPress, I thought it is okay to use

get_bloginfo( 'stylesheet_directory' )

instead of

get_stylesheet_directory_uri()

Again, thank you for sharing your expertise.

---

Genesis Tutorials | Follow me on Twitter

[Gary Jones]

re TRUE - yes - true is sufficient. While it doesn't make any difference to the actual code, and it's not mentioned in the WPCS (though http://make.wordpress.org/core/handbook/coding-standards/php/#naming-conventions does cover lowercase naming conventions, and there are examples of lowercase at http://make.wordpress.org/core/handbook/coding-standards/php/#self-explanatory-flag-values-for-function-arguments), point 2.5 of http://www.php-fig.org/psr/psr-2/ also says that keywords should be in lowercase.

I have copied it from Minimum Pro’s functions.php

The quality of code in SP child themes, in terms of documentation and code standards, can be woeful at times, and I wouldn't ever recommend it as a great example to follow.

I have not written the actual code in page_team.php. It was from the css-tricks article. Being a non-coder,...

If you're posting code improvements for others, you're a coder.
There doesn't need to be a reliance on third party bits here though - it's just a case of refactoring the existing code (again, the code given in the css-tricks article isn't great) so that the functions become as small as possible, to do a single task only.

I copied the following line from Minimum Pro’s functions.php and modified it...I do remember this same suggestion from you in the past. But seeing the usage in a theme that directly came from StudioPress, I thought it is okay to use

See above. There are a ton of ways that SP child themes could be improved by a coder, to give a "better" technical solution, without affecting the visual end-result. (That's why everyone and their dog seems to have their own starter theme that improves upon Sample).

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[Brad Dalton]

Not an effecient way to create a user profile/team page in my opinion when you can use all the built in WordPress user profile fields and simply create a widgetized page template which you populate with the Genesis User Profile widget or any other type of profile widget.

---

Tutorials for StudioPress Themes.

[jbculp]

Sridhar and Gary,

This is great guys, thank you. I get more help and learn more from this forum than virtually anywhere else. This alone makes Genesis a premium value. That said, I'm still settling into my 1st cup of coffee so I'm not sure I'm running on all cylinders so my initial pass was mostly successful. I now have all my team showing up on a page within the WordPress container (big improvement) but css isn't working.

My initial question for Sridhar is this: Why did you choose to call the php page "page_team.php" instead of the tutorial's "template_team.php"? Was it because page is more reflective of what's going on or because it distinguishes this as a fork of the original and could then be put onto github?

Will test and report back. THANKS AGAIN

john c
"and all this science I don't understand, it's just my job five days a week..." Rocket Man - Elton John

Doing this project has made me want to add some rock lyrics to my signature title

[Sridhar Katakam]

I now have all my team showing up on a page within the WordPress container (big improvement) but css isn’t working.

URL?

Why did you choose to call the php page “page_team.php” instead of the tutorial’s “template_team.php”?

There are two Page Templates inside the parent genesis theme: page_archive.php and page_blog.php.

For consistency, I like to name custom Page templates in the same manner. Hence I named it "page_team.php".

---

Genesis Tutorials | Follow me on Twitter

[jbculp]

This reply has been marked as private.

[jbculp]

Brad,

Perhaps that's true however I looked around for an example and didn't find one. In fact I think I actually asked on this forum but don't quote me on that. Then Woo put out a plugin for this purpose with no CSS so it was a dog fight to identify all the elements and still there were no social media links. Then in my regular visits to css-tricks I found this tutorial. It fell into my immediate need as a solution. Knowing that you are an active blogger and solution author, it might be great for the community to see an alternate approach. We can never have too many solid examples and in my case, I learn more each time I do a project like this.

Regards,

john

[jbculp]

Sridhar,

GOT IT. If I paste the css into my style.css I get what I need so my "call" to the css in the functions.php is what's not working. I have a bad path.

[jbculp]

Brad,

Read your post on css-tricks. Since I'm a big picture guy, I'm going to summarize my understanding of the different approaches and perhaps you and others can correct, comment and refine.

The Tutorial:
The css-tricks tutorial sets up a custom post type and template system that creates a user interface for adding team members that populate on a dedicated page.
-advantages: Users will easily be able to add new members and delete former members without technical training.
-disadvantages: The use of custom code at the function.php and page_team.php level make adding new elements (e.g. a social media link) a technical project. Also, the info cannot be easily replicated in whole or part on another page within the site if needed.

Brad Dalton Approach:
(Please correct if I incorrectly summarize the approach)
Create a widgetized page template where you pull team members into the page via widgets such as the Genesis User-Profile widget.
-advantages: Adding and removing team members is easy via the widget and does not create duplicate entities in the database (presuming that some team members are also authors or users).
-disadvantages: The use of a widgetized page still relies on a technical person to make modifications to the core. Also, one is reliant on the widget itself for the data (e.g. if using Genesis User-Profile, one needs to create a user for that individual). The User-Profile widget allows custom html but if one needed to rely on that, they could simply lay out the page without all the custom code.

Other approaches not listed here:
Woo recently released a plugin for Meet the Team. It works out of the box BUT they provided NO CSS and it's weary work to identify all the elements and create the css from scratch. Furthermore, if one deploys it on a page, and in sidebar widgets, the css needs to handle different styling. I'm not sure if making those styles would be easily accomplished. Also, the plugin has very little by way of social media links and adding them to a vendors plugin would be difficult.

Connections
Another good approach would be the plugin Connections. It has a robust database structure which is good but it relies on theme templates which limit layout without a lot of custom css.

All of these approaches seem to have up's and down's. I'd appreciate any insights you have to my summary and invite alternate approaches.

john

[Brad Dalton]

Hi John

Try this http://wpsites.net/web-design/team-members-staff-authors-or-user-profile-page-template-for-genesis/

Answers To Your Points

-disadvantages: The use of a widgetized page still relies on a technical person to make modifications to the core. Also, one is reliant on the widget itself for the data (e.g. if using Genesis User-Profile, one needs to create a user for that individual).

1. No techinal modifications to the core are required.

2. Users can be created by admin or the user. This gives you far more flexibility and control than a custom field which relies on use of a plugin which theme developers cannot do unless they code the meta boxes manually. Coding HTML for the links is very basic and the only modification that needs to be made.

The User-Profile widget allows custom html but if one needed to rely on that, they could simply lay out the page without all the custom code.

An excellent example of a team/community style page template is here http://www.studiopress.com/genesis-developers

---

Tutorials for StudioPress Themes.

[jbculp]

Thanks Brad, At the end of the day I want to make something that lives beyond my involvement, is highly flexible and not a nightmare to style. I'll check out the link. As I stated earlier, this forum is great. I've learned a bunch form you and Sridhar and really appreciate all of your efforts to add value to the community.

jc

[jbculp]

This reply has been marked as private.

[Author]

Posts