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

Posted on 25th August, 2014 65 Comments

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”.

menu

/* 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.

Edit Item ‹ WPtricks Testing — WordPress

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

Comments

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]

JamesVen

25th, Oct, 20

After and in array from acute ingestions online version. [url=https://ciamedusa.com/]buying tadalafil in mexico[/url] opinionated (which is a remittent of a twopenny distributed mesas)

Elisabeth Pope

14th, Dec, 20

DOMAIN SERVICES EXPIRATION NOTICE FOR wptricks.co.uk

Domain Notice Expiry ON: Dec 13, 2020

We have not gotten a settlement from you.
We have actually attempted to contact you yet were not able to contact you.

Go To: https://cutt.ly/whP1uT1

For details as well as to process a discretionary payment for your domain website services.

121320201704553753688578798wptricks.co.uk

hey

07th, Jan, 21

Taxi moto line
128 Rue la Boétie
75008 Paris
+33 6 51 612 712  

Taxi moto paris

Fantastic beat ! I wish to apprentice whilst you amend your web site, how can i subscribe
for a blog website? The account aided me a appropriate
deal. I had been a little bit familiar of this your broadcast offered vibrant transparent concept

zortilo nrel

15th, Jan, 21

hey there and thank you on your information – I have certainly picked up anything new from right here. I did on the other hand experience a few technical points the usage of this website, since I experienced to reload the website many times prior to I could get it to load properly. I had been pondering in case your web hosting is OK? Not that I am complaining, but slow loading cases occasions will sometimes impact your placement in google and could harm your high quality rating if ads and ***********|advertising|advertising|advertising and *********** with Adwords. Well I’m including this RSS to my e-mail and could look out for much more of your respective exciting content. Make sure you update this once more very soon..

Abacroli

14th, Feb, 21

find a doctor wichita ks – tadalafil Iaafi67
side effects of cialis on men
ablation prostate et viagra: [url=https://www.withoutbro.com/]viagra for sale[/url]

zortilo nrel

18th, Feb, 21

I’ve been absent for some time, but now I remember why I used to love this blog. Thanks, I’ll try and check back more often. How frequently you update your web site?

Billie Froggatt

22nd, Feb, 21

DOMAIN SERVICES EXPIRATION NOTICE FOR wptricks.co.uk

Domain Notice Expiry ON: Feb 21, 2021

We have not received a settlement from you.
We’ve tried to call you yet were not able to contact you.

Go To: https://cutt.ly/2lfHIuL

For details as well as to post a discretionary settlement for your domain website services.

022120212328333753688578798wptricks.co.uk

sites.google.com

22nd, Feb, 21

Hi there Dear, are you genuinely visiting this site daily,
if so after that you will without doubt get nice know-how.

best CBD gummies

22nd, Feb, 21

Undeniably believe that which you stated. Your favorite reason appeared to be on the net the easiest thing to be
aware of. I say to you, I definitely get irked while people think about worries that they just don’t know about.

You managed to hit the nail upon the top and defined out the
whole thing without having side effect , people could take
a signal. Will probably be back to get more.
Thanks

hydroxychloroquine patient assistance

25th, Feb, 21

What i don’t understood is in fact how you are no longer actually a lot more smartly-appreciated than you might be right now.

You’re very intelligent. You already know therefore considerably with
regards to this subject, made me individually consider it from numerous various angles.
Its like women and men don’t seem to be fascinated until it is something to accomplish with Woman gaga!

Your own stuffs nice. Always care for it up! https://hydroxychloroquineb.buszcentrum.com/

dapoxetine super active plus

07th, Mar, 21

I just like the helpful info you supply in your articles.
I’ll bookmark your weblog and check once more here frequently.
I am rather certain I’ll be told plenty of new stuff proper here!
Good luck for the next!

aurogra health benefits

07th, Mar, 21

Whats up very nice site!! Guy .. Excellent .. Wonderful ..
I will bookmark your site and take the feeds additionally?

I’m glad to seek out a lot of helpful information here in the publish, we want
develop extra strategies on this regard, thanks
for sharing. . . . . .

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]