Create Byline Exhibit with airSlate SignNow

Single byline

so we've just had a question come in and someone has asked how you can add an author by line to the twenty fourteen theme and wordpress because it currently it doesn't have one so let's just check out a post and sort of in this area here below the content around about the content or post navigation area is typically where an author bio line would would appear so to do this you need to have access to your wordpress server and ideally you should be working with the child theme that's what we'll be doing today and further to that having a little bit of knowledge of HTML CSS and PHP would be extremely beneficial so what we first want to do is just go into the WordPress dashboard and check out our user profile I'm just going to show mine here and as you can see I've got my name specified as well as a website google+ URL twitter username and a facebook URL as well as a short bio there you can naturally change that to whatever you like or use whatever you've got at the moment so what we now need to do is connect to a server I've already done that and navigate through the folders to the thing that we're modifying and we're actually using a child theme of 2014 at the moment because using a child theme is the best way to modify an existing theme but what we need to do is copy a file out of the 2014 folder first because without that will not be able to do this so the file that we want to copy is single dot PHP because this is what's actually generating the post so what I'm going to do is just open that up copy the contents of that file and then back in the 2014 child folder I'm going to name that single dot PHP and then I'll just paste that content in and hit save now right now nothing is actually going to change so we can actually go back to our WordPress website just open any post and you can see that it displays exactly as I did before so what we first want to do is just make sure that this change is working so we're going to make a small modification now and just below here where it says get template part as that's actually where the content is being generated and above the post navigation as you can see there I'm just going to say ago and which go testing make sure you put a semicolon after that as well so if we refresh the page now we should see that text and there you go so it's over on the left but it's there it's working excellent so back in your text editor of choice there's a few things we need to do here first we're going to delete where it says echo testing what we're going to do now is use get template part and in here what you should write is author and single get template part is probably new to most people having a look at this unless you've played around with WordPress development before so we'll just save that file now to make the change and what we need to do is make another file and we'll do this now and we're going to call it author single dot PHP and just in this file we want to do a test similar what we did before so who's opening PHP tags and let go again we're up testing and close that off with the closing tags will refresh and we've got testing over there on the left-hand side so this is basically what the get some to pop function allows you to do it allows you to create themes and parts of their more modular so you're actually going to keep the similar PHP file nice and clean and you can pop all your code into another file so what we're going to do now is just get rid of that testing function that we just wrote and what I want to do ideally is generate a little bit of the content that is stored in that author profile in the backend of WordPress so we can use another function to do this is very very simple so what I'm going to do again is opening PHP tags echo we're going to use get the author meta and in here let's just for the sake of this put in the description we'll go back here refresh and there you go the description is correlated with the author bio so we've got that functioning just fine that's awesome it's not formatted yet but we'll get to that in a little bit what we want to do is get all of this data populating first and then we'll come back and deal with the rest so back in the file or the single to PHP we've got the description and what we probably also want to do is pull in the author avatar so we're going to use echo again and then a function called get avatar and in here we use get the automat again but this time we need to give a few values so what we going to do is use the ID so that when this actually execute as part of the post being generated it captures the author's ID to pull that out and we also need to provide the size and pixels that we want that image to come through it so I'm just going to choose 64 because it's not too big it's not too small you're still get to see the picture and we also want well we'll probably wanna put in the Twitter Facebook and Google+ URLs because those are the ones that we've specified in there so we'll just copied that a few times you're right Twitter Facebook Google+ and what we also might do here as well is we're putting the website as well so we go for that one its user URL these are all available on the wordpress codex you don't need to remember them by heart but just in case you do need to assess that later on you can so but those changes in mind we'll just save that file and we'll hook back here and refresh there you go so you can see all of that data has populated in there again it's not formatted yet we'll get to that though so don't worry about it for now but we've got the base of it working so back in our text editor once again we need to start adding a little bit of structure to this so this is where we're going to start writing a little bit of HTML but within the PHP so if this is a little bit confusing that's ok we'll we'll get to that so what I'm going to do first is use an article tag because we want to section that content off just nicely and if we go back into the video post and we use a a web inspector for instance such as Chrome's with inspector and just choose inspect element there we can see that all of the content we have is nice and centered just like that and you can see if you look in developer tools that it belongs to a class of entry content so just to save a little bit of time i'm going to add that class here entry content and if we jump back into their and refresh then we've actually got that all nice and centered just as we did before and now we need to go back into the tax data once again of course and sort of something I noticed back here is that the text is right there against the image which is it's okay it's probably not idea although it could look a little bit better so what I want to do here is add a little bit of formatting to some of this so just on the line when we're getting the author metaphor the description or the bio whichever you would like to call that we're going to add a little bit of HTML in here so what we do is we use just a single single quotes and what we're going to put in here is paragraph tag and I'm going to give this a class because we ideally will be writing a little bit of page tml to fix this up and I'm going to call that class say off the description or the desk Ishod and we just want to close that off and you can see here we've got a full stop and when you use a full stock within an echo function it'll actually join these two together so anything that's output in that get the matter or the tag when we put after we've put the paragraph opening tag there it's just important that you also put anything you want to print out as text to HTML in single quotes so then of course we need to close this off so you've probably already figured this out but we just need to add another dot there this is also called concatenation and then opening single quotes and a closing paragraph tag so we'll just go back here now and check that out and you can see it's now appearing below the image there because we haven't signed any CSS properties to that that's okay for now though let's jump back into the text at it up and what I want to do now is start adding formatting to these URLs that again I will appear here so what I'm first going to do is use our once again and this time I'm going to create a list and naturally that means we also need to close the list so do that just make sure we add the semicolons after there otherwise it won't work and what I'm going to do is give this a class as well i'm going to call it both links or author link to the bullet author links to keep it in line and then what we naturally need to do is to these properties here we need to add this tag so we can do is depending on your text editor here you should be able to do this way so what we'll do is we'll go single quotes open and opening this tags and then close those single quotes add in a full stop and then we jump over to after they get off the matter area add in another dot to make it all join up together nicely more opening single quotes again and then we just want to close off those this tags and just to show as we go able to save that now and refresh so this is a good start we're generating the content we've added just a little bit of formatting to it but these are currently just the URLs as you can see and in the case of the Twitter content it's only generating the user name because that's all that WordPress asked you to actually specify in the user profile area so I think we'll probably keep working on those links just for the moment so what we need to do is jump back into all the single dot PHP and what we need to do here where we've got these lists tags is open up link tag so what we'll do is putting the a and then you know head chef to generate that link and then we just have the opening double quote of that tag there so what we now need to do is jump back into over here and after that dot there where we've got the list tag happening again what we want to do is close off the a tag or the Oh close the opening a tag and then we want to put in the closing part of it so what we can do here is we can say website and then we can say twitter facebook finally Google+ but what we just need to be mindful of regarding where it's generating the Twitter URL is that it's not actually going to put in any of the required details like the HTTP so we're just going to put those in now and at https on / / twitter com /and will save those changes now and we've done back into WordPress here and refresh so that's a good start we've got the links happening now just to rehash on there what we've done is added the opening anchor tags within their initial echo just after the list and you can see it's generating just as regular HTML on the front end there so ultimately we've got all of the content that we want generating pretty nicely but it's time that we change that up a little bit so what we're going to do is jump into our style sheet now and hopefully you remember the classes that we've added to those there before and just go back here you can see you know we've got off the description author links for the opening unordered list tag and that's that's really about it that's all we really need to to get this happening so back in style that CSS what I want to do is start with we'll stop with all the description and what probably ought to do is float that to the left and there's no padding there next to the image so what we're going to do is add some padding to the left there and we'll just put in 10 pixels it's not a huge value and we'll jump back here and refresh and unfortunately can't see that because we need to actually make the image float over to the left as well unless of course you want it on the right hand side so we just use the web inspector and inspect element and you can see here it's actually going to class of avatar avatar 64 photo so we can only can get away with just using the avatar class so what we going to do is jump back into the CSS file and use that class avatar and put in a float of left we save jump back into WordPress refresh there you go so the image is on the left the bio is there as well it's in the spot that we wanted it out there's a tiny little bit of a gap there between that and image to make it look a bit clean but now we've got the problem that all of the links are coming up and it looks very cluttered and disorganized and I probably wouldn't be looking to use a website that would like that myself so let's go and fix that up straight away so we're going to do is use you are author links to target that very specific element and what we want to do here is put in a float I love left and we jump back in check it out and see how it looks and that's that's it's a rad i mean it's it's not really a hearing where we will ideally want it to be so we want to do is jump back into our CSS now and put in clear bar and that makes it appear underneath that general area there but with of the problem or to put I've personally see that as a problem that all the links are indeed in a list and given the nature of this area it's sort of a bit too long I feel it should be horizontal so we're going to jump back into our text edit an hour and go author links li for the list items and we want to display those in line so they're all left to right so we'll save and refresh so that's partially working but they're all right next to each other so we can just simply jump back into our CSS add say padding right of maybe 20 pixels you can obviously change that as you see fit there we go so that's nice and separated and a little bit broken up now you'll note that there's a small margin here though so if you go inspect element again you can actually find out what's causing that so you can go to the author links item there and if you look over here in the right hand side the actual default style for this type of element in this theme is that it has some padding as you can see just just over here so what we can do is jump back into our CSS and on the CSS we just before the UL author links we go margin 0 save jump back here and refresh so there we go we have the author avatar showing we also have the author biography there and we also have three links for website Twitter Facebook and Google+ so we don't currently have the author name displaying that's pretty easy to get up there though so what we do back in Austin good or PHP we will put any head show tags to make it a little bit bigger I'll say about and then we use PHP to open this up so again we need to use echo get the author better and were caught we'll want to call in the display name their save I can hear what refresh and there you go so we've got about off the name so the display name I've just got my name there at the moment we've got the text that fills out the bio and we've also got the links there and that's just a really basically styled or the area if you're building a theme or you want to modify that I probably recommend adding some more CSS there to make it a bit prettier you might want to make this list move down a little bit further so there's a bit more margin between the author avatar and that you might want to move it up here as well that's totally acceptable just so long as you're happy with it and if it's your theme but no really that's that's all you need to know to add the author profile or the byline whichever you'd like to call it to the twenty fourteen theme so just to recap what we've done there is get back into the dashboard to start this off so if we go into profile you can see that we've given a first name last name and the display name and I'm just choosing first name last name we've defined the website Google+ URL twitter username and facebook URL as well as well as some bio text there and to make that all come together what we've done is we've used a child theme the first thing we've done is copied single to PHP from the original twenty fourteen theme and we use github apart author single so that we've then created the author single dot PHP file so that when this page is loaded it will call that inappropriately and we just really just use some pretty simple PHP there by the use of a curve to output some HTML and then to pull in the data from you know get off and meta there you can see the Google+ Facebook Twitter user URL description pretty straightforward stuff and finally we just tied it up by writing a little bit of CSS there so hopefully this isn't too confusing it's pretty straightforward and generally in line with what a lot of working WordPress is like in terms of you know coupling functions with HTML to get the desired output if you have any questions about what we've done or child theming or anything here please feel free to ask in the comments below