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

Posted on 25th August, 2014 95 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. . . . . .

THC vape juice UK

27th, Apr, 21

Hi there, You have done a great job. I’ll certainly digg it and in my opinion suggest to my friends. I’m sure they will be benefited from this site.

THC juice

27th, Apr, 21

My spouse and I stumbled over here by a different web page and thought I should check things out. I like what I see so now i’m following you. Look forward to going over your web page yet again.

AWA Refiners

28th, Apr, 21

Can I just say what a relief to find someone who actually knows what theyre speaking about on the internet. You undoubtedly know the best way to bring a difficulty to light and make it important. Extra people have to learn this and understand this facet of the story. I cant consider youre not more well-liked since you positively have the gift.

link

28th, Apr, 21

I believe you have noted some very interesting points, appreciate it for the post.

visit

28th, Apr, 21

Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across. It extremely helps make reading your blog significantly easier.

url

28th, Apr, 21

Hi there! I’m at work surfing around your blog from my new iphone 3gs! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the outstanding work!

url

28th, Apr, 21

Heya i’m for the first time here. I came across this board and I find It really useful & it helped me out much. I hope to give something back and help others like you aided me.

web page

28th, Apr, 21

Heya i am for the first time here. I came across this board and I find It really useful & it helped me out much. I hope to give something back and help others like you aided me.

here

29th, Apr, 21

What i do not realize is in fact how you’re now not really a lot more neatly-appreciated than you might be now. You’re very intelligent. You already know thus considerably in the case of this topic, made me personally believe it from so many numerous angles. Its like women and men don’t seem to be interested until it?¦s something to do with Girl gaga! Your own stuffs outstanding. Always maintain it up!

site

29th, Apr, 21

I¦ll immediately take hold of your rss feed as I can not find your email subscription hyperlink or e-newsletter service. Do you’ve any? Kindly permit me understand in order that I may subscribe. Thanks.

url

29th, Apr, 21

Definitely, what a fantastic blog and informative posts, I surely will bookmark your website.Best Regards!

site

29th, Apr, 21

Hmm is anyone else encountering problems with the pictures on this blog loading? I’m trying to determine if its a problem on my end or if it’s the blog. Any feedback would be greatly appreciated.

click

29th, Apr, 21

I was more than happy to seek out this web-site.I needed to thanks to your time for this glorious read!! I positively enjoying each little bit of it and I’ve you bookmarked to take a look at new stuff you weblog post.

food essentials list for emergency

30th, Apr, 21

hey there and thank you in your info – I’ve definitely picked up something new from right here. I did then again expertise some technical points using this website, as I skilled to reload the web site lots of times prior to I may get it to load correctly. I were wondering in case your web hosting is OK? Now not that I am complaining, but sluggish loading instances occasions will sometimes impact your placement in google and can injury your high-quality score if advertising and ***********|advertising|advertising|advertising and *********** with Adwords. Well I am adding this RSS to my e-mail and could look out for a lot more of your respective interesting content. Make sure you update this once more soon..

affiliate

30th, Apr, 21

Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how could we communicate?

btc to usd

04th, May, 21

Wow, superb weblog layout! How lengthy have you ever been blogging for? you make blogging glance easy. The full glance of your website is fantastic, as well as the content!

buy delta 8 flowers uk

05th, May, 21

The next time I learn a blog, I hope that it doesnt disappoint me as much as this one. I imply, I do know it was my option to read, however I actually thought youd have one thing interesting to say. All I hear is a bunch of whining about one thing that you possibly can repair should you werent too busy searching for attention.

buy delta 8 distillate in UK

05th, May, 21

We are a group of volunteers and starting a new scheme in our community. Your site provided us with valuable info to work on. You’ve done an impressive job and our whole community will be grateful to you.

gym water bottle

05th, May, 21

of course like your website but you need to test the spelling on several of your posts. A number of them are rife with spelling problems and I find it very troublesome to tell the truth nevertheless I will certainly come again again.

Google

08th, May, 21

Google

We came across a cool site that you simply might delight in. Take a search when you want.

hosting

10th, May, 21

Some times its a pain in the ass to read what blog owners wrote but this internet site is real user friendly! .

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]