This page template for Genesis, displays exactly what you see in the screenshot below. A grid of avatars with the name of the person which is linked to their Twitter account. The avatar is pulled using a encrypted URL which has been MD5 hashed from each contributors Gravatar email address.
The solution includes CSS & CSS for Media Queries so the contributors display perfectly in columns which are adjusted for different sized screens & mobile devices. Here’s the video demonstrating how the responsive CSS works when the screen width is varied.
Mobile Responsive – Video Demo
Resizes nicely on smaller screens
The code also includes the PHP function shuffle(); which randomizes the order of each person every time the page loads.
Simple Code Installation
- Step 1 : Upload the contributors.php file to your child themes root directory.
- Step 2 : Copy & paste the CSS & CSS for Media Queries from the style.css file to the end of your child themes style.css file, before your themes existing Media Queries.
- Step 3 : Using a code editor, copy the PHP code from the functions.php file to your child themes functions.php file ( Excluding the opening PHP tag ). Another option is to add this code to the contributors.php file.
You can easily change the name, Twitter link and Gravatar URL in the functions.php code.
Here’s the code for logged in members:
Leave a Reply
You must be logged in to post a comment.