How To Create A Custom Author Bio

 

In today's tutorial we will be recreating my author bio that you see at the bottom of every post. To this we will be make use of the ability to use PL5 section shortcodes inside of posts.If you are not aware at the top of the post editor is a button called shortcodes that will give you access to all the sections in shortcode form.

The cool stuff

Open the shortcode window and select the option that says PageLines Section and select the embed section. It is recommended that you give it a unique id before inserting it into your post.

embedgif

 

The result should look similar to this.

[pl_section section="embed" id="my-embed"]

After the code has been place in your post I recommend you copy and paste it somewhere for future use on the site. Note that if you paste this shortcode on another post or page the settings you set for it will all be linked. So in other words if you where to change the background from red to green it changes them all which is pretty cool.

The cool stuff continues…

Update the post and view it on the front end with the builder activated and will notice that you can use the builder on the embed section within the post. This is the html markup we will be using so copy and paste it in the embed section.

<div id="ihp-author">
<div class="ihp-content"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem quam,
hendrerit id purus at, iaculis congue nulla. Fusce dignissim viverra tellus,
in laoreet turpis. Proin a purus mi. Praesent in ligula elit. Mauris placerat
tempor risus, vehicula tristique dui mollis nec</p>
<div id=ihp-social><a class="ihp-facebook" href="">Facebook</a>

<a class="ihp-twitter" href="">Twitter</a>

<a class="ihp-google" href="">Google+</a>

</div></div>

<div class="ihp-img"><img src="image link here
" alt="alt text" >

</div>
</div>

And the CSS to make it look good: /***************************************/ /* author global styles */ /***************************************/

/*author img style*/ .ihp-img img { width: 187px; border-radius: 50%; border: 7px solid #F0F0F0; } /*author solial links*/ a.ihp-facebook { background: #3b5998; } a.ihp-twitter { background: #00aced; } a.ihp-google { background: #d34836; } #ihp-social a { color: white; padding: 4px 8px; text-decoration: none; } /*author background*/ #embed_my-embed { background: white; border-radius: 6px; } /***************************************/ /* author media query desktop only */ /***************************************/

@media (min-width: 768px) { /*author styles */ .ihp-content { float: left; width: 70%; margin-right: 5%; } .ihp-img { float: left; } div#ihp-social a { margin-right: .3em; } /* change this id*/ #embed_my-embed { -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.13); -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.13); box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.13); } } (Be sure to change the section id for the box-shadow and the author background)

Notice that there is a media query style along with some global styles that we want to be seen on both mobile and desktop and some that we don't want to be seen on mobile devices.

The not so cool

At the time of this post there is currently no way to see a list of the shortcodes created to reference back to. So the only option is to save it to notepad with a description of what it is. It’s a bit tedious but currently it is the only way keep track of them.

Ideally it would be great to have a drop down of the generated shortcodes so you wouldn’t have to copy and paste from your notes.

Alternative method to showing author info on posts

If you are not comfortable with html you could use one of the hundreds of author plugins in the WordPress Repository.

I hope you have enjoyed this tutorial leave any questions in the comments.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


iheart pagelines

How To Create A Custom Author Bio

Published on by | Add Comment

 

In today's tutorial we will be recreating my author bio that you see at the bottom of every post. To this we will be make use of the ability to use PL5 section shortcodes inside of posts.If you are not aware at the top of the post editor is a button called shortcodes that will give you access to all the sections in shortcode form.

The cool stuff

Open the shortcode window and select the option that says PageLines Section and select the embed section. It is recommended that you give it a unique id before inserting it into your post.

embedgif

 

The result should look similar to this.

[pl_section section="embed" id="my-embed"]

After the code has been place in your post I recommend you copy and paste it somewhere for future use on the site. Note that if you paste this shortcode on another post or page the settings you set for it will all be linked. So in other words if you where to change the background from red to green it changes them all which is pretty cool.

The cool stuff continues…

Update the post and view it on the front end with the builder activated and will notice that you can use the builder on the embed section within the post. This is the html markup we will be using so copy and paste it in the embed section.

<div id="ihp-author">
<div class="ihp-content"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem quam,
hendrerit id purus at, iaculis congue nulla. Fusce dignissim viverra tellus,
in laoreet turpis. Proin a purus mi. Praesent in ligula elit. Mauris placerat
tempor risus, vehicula tristique dui mollis nec</p>
<div id=ihp-social><a class="ihp-facebook" href="">Facebook</a>

<a class="ihp-twitter" href="">Twitter</a>

<a class="ihp-google" href="">Google+</a>

</div></div>

<div class="ihp-img"><img src="image link here
" alt="alt text" >

</div>
</div>

And the CSS to make it look good: /***************************************/ /* author global styles */ /***************************************/

/*author img style*/ .ihp-img img { width: 187px; border-radius: 50%; border: 7px solid #F0F0F0; } /*author solial links*/ a.ihp-facebook { background: #3b5998; } a.ihp-twitter { background: #00aced; } a.ihp-google { background: #d34836; } #ihp-social a { color: white; padding: 4px 8px; text-decoration: none; } /*author background*/ #embed_my-embed { background: white; border-radius: 6px; } /***************************************/ /* author media query desktop only */ /***************************************/

@media (min-width: 768px) { /*author styles */ .ihp-content { float: left; width: 70%; margin-right: 5%; } .ihp-img { float: left; } div#ihp-social a { margin-right: .3em; } /* change this id*/ #embed_my-embed { -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.13); -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.13); box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.13); } } (Be sure to change the section id for the box-shadow and the author background)

Notice that there is a media query style along with some global styles that we want to be seen on both mobile and desktop and some that we don't want to be seen on mobile devices.

The not so cool

At the time of this post there is currently no way to see a list of the shortcodes created to reference back to. So the only option is to save it to notepad with a description of what it is. It’s a bit tedious but currently it is the only way keep track of them.

Ideally it would be great to have a drop down of the generated shortcodes so you wouldn’t have to copy and paste from your notes.

Alternative method to showing author info on posts

If you are not comfortable with html you could use one of the hundreds of author plugins in the WordPress Repository.

I hope you have enjoyed this tutorial leave any questions in the comments.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match