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;
- about-us/about-us.css
- about-us/about-us.php
- 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
Comments
To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:
VictorAmisp
18th, Oct, 20occasion a patient calamity of wet soluble with tumeric or. buy tadalafil online canada Zsgbvl bwvobe cialis 5 mg tadalafil canadian pharmacy
JamesVen
25th, Oct, 20After 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)
generic dapoxetine overnight delivery usa
16th, Nov, 20generic dapoxetine overnight delivery usa https://salemeds24.wixsite.com/dapoxetine
benefits of ivermectin
18th, Nov, 20benefits of ivermectin https://ivermectin.mlsmalta.com/
is generic vidalista fda approved
01st, Dec, 20is generic vidalista fda approved https://vidalista40mg.mlsmalta.com/
how to get a priligy prescription
05th, Dec, 20how to get a priligy prescription https://ddapoxetine.com/
my prescription drug list
05th, Dec, 20my prescription drug list https://edmeds.buszcentrum.com/
how often can you take cialis
05th, Dec, 20how often can you take cialis https://wisig.org/
chloroquine buy in canada
06th, Dec, 20chloroquine buy in canada https://hydroxychloroquinee.com/
viagra contradictions
08th, Dec, 20viagra contradictions https://sildenafili.com/
how fast does tadalafil work
08th, Dec, 20how fast does tadalafil work https://tadalafil.cleckleyfloors.com/
10 day prednisone taper
13th, Dec, 2010 day prednisone taper https://prednisone.bvsinfotech.com/
Elisabeth Pope
14th, Dec, 20DOMAIN 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
Linda Moczulski
15th, Dec, 20i love this fabulous post
viagra uk best price
21st, Dec, 20viagra uk best price https://viaplz.com/
prednisone 30 mg
25th, Dec, 20prednisone 30 mg https://bvsinfotech.com/
does stromectol kill pinworms
25th, Dec, 20does stromectol kill pinworms https://ivermectin1st.com/
cialis price per pill
27th, Dec, 20cialis price per pill https://cialzi.com/
anti malaria meds
29th, Dec, 20anti malaria meds https://hydroxychloroquine.lm360.us/
zortilo nrel
03rd, Jan, 21good post.Ne’er knew this, thanks for letting me know.
effects of viagra 200 mg
04th, Jan, 21effects of viagra 200 mg http://droga5.net/
hey
07th, Jan, 21Taxi 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
reviews from men taking cefixime
12th, Jan, 21reviews from men taking cefixime https://ceefexime.co/
zortilo nrel
15th, Jan, 21hey 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..
ivermectin dosage for horses
23rd, Jan, 21ivermectin dosage for horses http://ivermmectin.co/
non prescription cialis
23rd, Jan, 21non prescription cialis http://tadalafila.online/
aurogra generic
26th, Jan, 21aurogra generic https://aurogra.buszcentrum.com/
viagra erectile dysfunction
29th, Jan, 21viagra erectile dysfunction https://zsildenafil.com/
vidalista without prescription
31st, Jan, 21vidalista without prescription http://vidallista.com/
azithromycin 500 mg generic
02nd, Feb, 21azithromycin 500 mg generic http://aziithromycin.com/
cialis 20mg price walmart
05th, Feb, 21cialis 20mg price walmart http://ciaalis2u.com/
ivermectin without a doctors prescription
08th, Feb, 21ivermectin without a doctors prescription http://ivermmectin.com/
viagra without a doctor prescription
09th, Feb, 21viagra without a doctor prescription http://viaaagra.com/
Abacroli
14th, Feb, 21find 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]
canadian pharmacy generic cialis
14th, Feb, 21canadian pharmacy generic cialis https://www.lm360.us/
Obacroli
14th, Feb, 21blood pressure cuff manual adult – viagra for sale Yopysxn
cialis comprar farmacias
viagra debut: [url=https://www.withoutbro.com/]tadalafil[/url]
JamesHoact
16th, Feb, 21http://bio-catalyst.com/ – ketoconazole tablets
tinidazole capsules
[url=http://bio-catalyst.com/]doxycycline for sale[/url] cefadroxil for sale
hydroxychloroquine 400 mg
17th, Feb, 21hydroxychloroquine 400 mg https://hydroxychloroquine4u.com/
order viagra 100mg without prescription
17th, Feb, 21order viagra 100mg without prescription http://viiagra.co/
ribatrim
17th, Feb, 21Wow, wonderful weblog layout! How lengthy have you been blogging for?
you make running a blog glance easy. The entire glance of your site is magnificent,
let alone the content material! http://antiibioticsland.com/Bactrim.htm
over the counter tadalafil
17th, Feb, 21over the counter tadalafil https://atadalafil.online/
zortilo nrel
18th, Feb, 21I’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?
printable viagra coupons cvs
19th, Feb, 21For latest information you have to pay a quick visit world-wide-web and on world-wide-web I found this web
page as a best web page for most recent updates. http://cleckleyfloors.com/viagra.pills
viagra for hypertension
20th, Feb, 21Having read this I thought it was extremely informative.
I appreciate you finding the time and effort to put this
content together. I once again find myself spending a significant amount of time both reading and leaving comments.
But so what, it was still worth it! http://cleckleyfloors.com/viagra
5mg generic cialis side effects
20th, Feb, 215mg generic cialis side effects http://cialllis.com/
generic cialis online canada
21st, Feb, 21generic cialis online canada https://tadalafili.com/
Billie Froggatt
22nd, Feb, 21DOMAIN 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, 21Hi 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, 21Undeniably 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
tadalafil adcirca 20mg
22nd, Feb, 21I enjoy reading a post that can make people think.
Also, thanks for allowing me to comment! https://cialis.webbfenix.com/tadalafil
buy cheap viagra 100mg online
22nd, Feb, 21buy cheap viagra 100mg online http://viaagra1.com/
purchase cialis cheap
24th, Feb, 21purchase cialis cheap http://cialis.anafassia.com/
cialis 5mg best price
25th, Feb, 21cialis 5mg best price https://cialis.bee-rich.com/
hydroxychloroquine patient assistance
25th, Feb, 21What 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/
hydroxychloroquine company stock
26th, Feb, 21Nice blog! Is your theme custom made or did you download it from somewhere?
A design like yours with a few simple adjustements would really make my blog jump out.
Please let me know where you got your design. With thanks https://hydroxychloroquinea.advantagetriseal.com/
hydroxychloroquine 4 mg
27th, Feb, 21hydroxychloroquine 4 mg http://hydroxychloroquined.online/
hydroxychloroquine antiviral
28th, Feb, 21I’m amazed, I must say. Seldom do I encounter a blog that’s both educative and
amusing, and let me tell you, you’ve hit the nail
on the head. The problem is an issue that not enough people are speaking intelligently about.
I am very happy that I came across this during my hunt for something concerning
this. https://hydroxychloroquines.studiowestinc.com/
Clarkmow
01st, Mar, 218h6ia vjiah 4fkp
dapoxetine super active plus
07th, Mar, 21I 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! http://herreramedical.org/dapoxetine
dapoxetine super active plus
07th, Mar, 21I 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, 21Whats 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. . . . . .
how much is a vidalista prescription
11th, Mar, 21I am really enjoying the theme/design of your blog.
Do you ever run into any internet browser compatibility problems?
A handful of my blog visitors have complained about my site not operating correctly in Explorer but looks great in Opera.
Do you have any tips to help fix this issue? http://www.deinformedvoters.org/vidalista-online
sildenafil pills for sale
12th, Mar, 21It’s an amazing piece of writing designed for all the web viewers; they will
obtain benefit from it I am sure. http://www.deinformedvoters.org/sildenafil-price
hydroxychloroquine works against covid
18th, Mar, 21hydroxychloroquine works against covid https://hhydroxychloroquine.com/
hydroxychloroquine prophylaxis dose
15th, Apr, 21Hi i am kavin, its my first occasion to commenting anyplace, when i read this paragraph i thought i could also create comment due to this brilliant article. https://hydroxychloroquineg.grassfed.us/