How to Build a Single Page Portfolio Theme – Part 2 – About Us Section

For the about us section, we’re going to create a custom_post_type with custom meta boxes to create the various section required for a about us section. The custom meta boxes we’re adding will contain Name, Description, Skills, Email & a Phone number.

Custom Post Type

Open your functions.php and go to line 80. Under the add_theme_support(“post_thumbnails”); add a new thumbnail size a 200px by 200px square image.

add_image_size( 'about-us-thumbnail', 200, 200, true );

Now lets register out custom post type. At the bottom of our functions.php add this code.

/*
 * ABOUT US POST TYPE
 **************************************************************/
 // Register Custom Post Type
function about_us_post_type() {

	$labels = array(
		'name'                => 'About Us',
		'singular_name'       => 'About Us',
		'menu_name'           => 'About Us',
		'parent_item_colon'   => 'Parent Item:',
		'all_items'           => 'All Staff',
		'view_item'           => 'View Item',
		'add_new_item'        => 'Add New Member',
		'add_new'             => 'Add New',
		'edit_item'           => 'Edit Item',
		'update_item'         => 'Update Item',
		'search_items'        => 'Search Item',
		'not_found'           => 'Not found',
		'not_found_in_trash'  => 'Not found in Trash',
	);
	$args = array(
		'label'               => 'about-us',
		'description'         => 'Where you tell people about yourself',
		'labels'              => $labels,
		'supports'            => array( 'thumbnail' ),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
		'show_in_admin_bar'   => true,
		'menu_position'       => 5,
		'menu_icon'           => ' ',
		'can_export'          => true,
		'has_archive'         => false,
		'exclude_from_search' => true,
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
	);
	
	register_post_type( 'about-us', $args );

}
// Hook into the 'init' action
add_action( 'init', 'about_us_post_type', 0 );

Custom Meta Boxes

If you want to get some in depth knowledge about custom meta boxes then I could recommend this article on the themefoundation.com Great article here on creating custom_meta type boxes http://themefoundation.com/wordpress-meta-boxes-guide/

Then to keep things clean we’ll need to create a new directory in out theme for our custom meta boxes.
theme-folder/about-us

Then in this new about-us folder we’ll add 3 new files;

1. about-us/about-us.css
2. about-us/about-us.php
3. about-us/about-us-meta.php

about-us.css

give our metaboxes some style to make’em look nice. You’ll notice at the top, I’ve imported an icon from dashicons, this is for the new menu item we’re adding “About Us”.

/* Also add an icon to our menu. Using WP built in icon font http://melchoyce.github.io/dashicons/ */
#adminmenu .menu-icon-about-us div.wp-menu-image:before {
			content: "\f307";
}
		
.wptricks_meta_control .description {
	display: none;
}

.wptricks_meta_control label {
	display: block;
	font-weight: bold;
	margin: 6px;
	margin-bottom: 0;
	margin-top: 12px;
}

.wptricks_meta_control label span {
	display: inline;
	font-weight: normal;
}

.wptricks_meta_control span {
	color: #999;
	display: block;
}

.wptricks_meta_control hr {
	margin: 20px 0;	
}

.wptricks_meta_control textarea,
.wptricks_meta_control input[type='text'] {
	margin-bottom: 3px;
	width: 99%;
}

.wptricks_meta_control h4 {
	color: #999;
	font-size: 1em;
	margin: 15px 6px;
	text-transform: uppercase;
}

about-us.php

This creates the section that we’ll see when we add a new “about us” item. You could modify this to include twitter, skype, facebook… anything you’d like or think will be relevant to your needs. Again I am using icons provided by http://melchoyce.github.io/dashicons/ which are the default icon fonts used by WordPress.

<div class="wptricks_meta_control">
	<!-- AGAIN... USING DASH ICONS -->
	<label><div class="dashicons dashicons-groups"></div> Name</label>

	<p>
		<input type="text" name="_wptricks_about_meta[name]" value="<?php if(!empty($aboutmeta['name'])) echo $aboutmeta['name']; ?>"/>
		<span>Enter your first and last name.</span>
	</p>

	<label><div class="dashicons dashicons-testimonial"></div> Describe Yourself<span>(optional)</span></label>

	<p>
		<textarea name="_wptricks_about_meta[description]" rows="3"><?php if(!empty($aboutmeta['description'])) echo $aboutmeta['description']; ?></textarea>
		<span>Enter in a short description about yourself.</span>
	</p>
 <hr>

	<label><div class="dashicons dashicons-welcome-learn-more"></div> Skills</label>
	<p>
		<input type="text" name="_wptricks_about_meta[skills]" value="<?php if(!empty($aboutmeta['skills'])) echo $aboutmeta['skills']; ?>"/>
		<span>Enter in your skills above, seperate them how you like (ex. "| / - ,"). </span>
	</p>
<hr>
	<label><div class="dashicons dashicons-email-alt"></div> Email</label>

	<p>
		<input type="text" name="_wptricks_about_meta[email]" value="<?php if(!empty($aboutmeta['email'])) echo $aboutmeta['email']; ?>"/>
		<span>Enter your email addresss.</span>
	</p>
<hr>
	<label><div class="dashicons dashicons-smartphone"></div> Phone</label>

	<p>
		<input type="text" name="_wptricks_about_meta[phone]" value="<?php if(!empty($aboutmeta['phone'])) echo $aboutmeta['phone']; ?>"/>
		<span>Enter your phone number.</span>
	</p>

</div>

We can now open up WordPress and take a look at our hard work, you will see “About Us” added below our “Posts” label. Click on “Add New” and take a look at our new custom post type.

Finally for the about-us/ folder lets add another file.

meta-boxes.php

The function of the meta-boxes.php is to save our metadata to the database so we can use it later in our theme.

<?php

define('ROOT',$_SERVER['DOCUMENT_ROOT']);
define('WPTRICKS_STARTER_THEME',str_replace('\\','/',dirname(__FILE__)));
define('WPTRICKS_STARTER_PATH','/' . substr(WPTRICKS_STARTER_THEME,stripos(WPTRICKS_STARTER_THEME,'wp-content')));

/* ABOUT META BOXES ADDED BELOW */
add_action('admin_init','wptricks_about_meta_init');

function wptricks_about_meta_init()
{

	wp_enqueue_style('wptricks_about_meta_css', WPTRICKS_STARTER_PATH . '/about-us/about-us.css');

	foreach (array('about-us') as $type) 
	{
		add_meta_box('wptricks_about_meta', '<div class="dashicons dashicons-id"></div> Enter Your Details', 'wptricks_about_meta_setup', $type, 'normal', 'high');
	}
	
	add_action('save_post','wptricks_about_meta_save');
}

function wptricks_about_meta_setup()
{
	global $post;
	$aboutmeta = get_post_meta($post->ID,'_wptricks_about_meta',TRUE);
	include(WPTRICKS_STARTER_THEME . '/about-us/about-us.php');
 
	echo '<input type="hidden" name="wptricks_about_meta_noncename" value="' . wp_create_nonce(__FILE__) . '" />';
}

/* SAVE ABOUT META FOR LATER */
function wptricks_about_meta_save($post_id) 
{
	if (!wp_verify_nonce($_POST['wptricks_about_meta_noncename'],__FILE__)) return $post_id;
	if ($_POST['post_type'] == 'page') 
	{
		if (!current_user_can('edit_page', $post_id)) return $post_id;
	} else {
		if (!current_user_can('edit_post', $post_id)) return $post_id;
	}

	$current_data = get_post_meta($post_id, '_wptricks_about_meta', TRUE);	
 
	$new_data = $_POST['_wptricks_about_meta'];

	wptricks_meta_clean($new_data);
	
	if ($current_data) 
	{
		if (is_null($new_data)) delete_post_meta($post_id,'_wptricks_about_meta');
		else update_post_meta($post_id,'_wptricks_about_meta',$new_data);
	}
	elseif (!is_null($new_data))
	{
		add_post_meta($post_id,'_wptricks_about_meta',$new_data,TRUE);
	}

	return $post_id;
}


function wptricks_meta_clean(&$arr)
{
	if (is_array($arr))
	{
		foreach ($arr as $i => $v)
		{
			if (is_array($arr[$i])) 
			{
				wptricks_meta_clean($arr[$i]);

				if (!count($arr[$i])) 
				{
					unset($arr[$i]);
				}
			} else {
				if (trim($arr[$i]) == '') 
				{
					unset($arr[$i]);
				}
			}
		}

		if (!count($arr)) 
		{
			$arr = NULL;
		}
	}
}

?>

home-page-template.php

Open your home-page-template.php add this below the strapline.

<?php 

		/* INCLUDE OUR ABOUT-US SECTION
		 *****************************************************/
?>
	
<section class="about-us">
    	<header>
			<div class="wrapper">
            	<h2>About Us</h2>
        	</div>
        </header>
			<div class="wrapper">
	 			<ul class="clearfix">
					
<?php
	// select our about-us post types
	$wptricckspost = array( 'post_type' => 'about-us', );
	// Create the new loop
	$loop = new WP_Query( $wptricckspost );
	?>
	
	<?php // Make sure we're on the correct post type
		 while ( $loop->have_posts() ) : $loop->the_post();?>
				<li class="about-me">
                    <article id="post-<?php the_ID(); ?>">
                        <header>
                            <?php // Output the featured image
                                 the_post_thumbnail('about-us-thumbnail'); ?>
                                 
                            <?php // Check we have the content 
                                $my_about_meta = get_post_meta($post->ID,'_wptricks_about_meta',TRUE); ?>
                                    
                            <h3><?php // Output the users name, description, skills, phone number and contact email address  
                                     echo $my_about_meta['name']; ?></h3>
                        </header>
                        <section>
                        
                            <p><?php echo $my_about_meta['description']; ?></p>
                            <p><?php echo $my_about_meta['skills']; ?></p>
                        
                        </section>
                        <footer>					
                              <i class="fa  fa-envelope"></i> <a href="mailto:<?php echo $my_about_meta['email']; ?>"><?php echo $my_about_meta['email']; ?></a>
                              <br>
                            <i class="fa  fa-phone"></i>  <a href="tel:<?php /* Remove everything except the numbers */ echo preg_replace('/[^0-9]/','', $my_about_meta['phone']) ?>"><?php /* Replace spaces with hyphens */ echo str_replace(' ','-', $my_about_meta['phone']) ?></a>
                            
                        </footer>
                    </article>
				</li>	 
				<?php endwhile; ?>
				<?php wp_reset_query(); ?>
				
				 </ul>
			</div><!-- /.wrapper -->
		</section> <!-- /.about-us -->

<?php 

		/* END ABOUT US SECTION
		 *****************************************************/
?>

Style.css

finally for our about section we can add some styles to the themes style.css. Basically what I want to do is change the width of the about us boxes with some clever CSS, this’ll check for the amount of li’s in view and adjust the widths accordingly.

/* About Section
-------------------------------------------------- */
[class*=icon] {text-decoration: none;}
.about-me article > * {
	padding: 12px 18px;
}
#about-us img {
	border-radius: 50%;
	overflow: hidden;	
	padding: 3px;
	border: solid #444 3px;
	display: inline-block;
	background: #f1f1f1;
	line-height: 0;
}
.about-me {
	float:left;
	text-align: center;
}
.about-me section,
.about-me footer {
	background: #eee;
}
.about-me > article {
    border: 1px solid #ccc;
	border-bottom: 6px solid #444;
}

#about-us ul {
	padding: 0;
}
/* one item */
#about-us li:first-child:nth-last-child(1) {
	width: 100%;
}

/* two items */
#about-us li:first-child:nth-last-child(2),
#about-us li:first-child:nth-last-child(2) ~ li {
	width: 50%;
	padding: 0 3.7%;
}

/* three items */
#about-us li:first-child:nth-last-child(3),
#about-us li:first-child:nth-last-child(3) ~ li {
	width: 33.3%;
	padding: 0 2.7%;
}

/* four items */
#about-us li:first-child:nth-last-child(4),
#about-us li:first-child:nth-last-child(4) ~ li,
/* Every item after the fourth will also use this width */
#about-us li:nth-last-child(n+5) {
	width: 25%;
	padding: 0 1.7%;
}

Portfolio Grid Section

Go there now… Click Here