WordPress Custom Editable Theme Content (Image & Text) Tutorial

it's been almost two years without any updates but yes the series lives on my friends in this lesson we are going to learn how to add custom options and content fields to our themes customize admin screen it's hard to explain with words so let's just jump right into a demo of the finished product that we will be building together alright so down in the footer I want you to pay attention to this new light grey box it's a call-out that links to the about page but let's imagine that I want it to link to the portfolio page instead and use different text and a different image but let's also imagine that this is my website but I'm not a web developer someone else coded this site for me and I just used the WordPress admin panel to manage the site well all I would need to do to make those changes happen is jump over to the admin dashboard and under the appearance menu click on customize now in our previous lesson we set up this standard color section to allow for customizable colors and now in this lesson you'll notice that we have a brand new footer call-out section so if I click on that we can begin customizing the grey call-out box let's begin by editing the headline to say view our portfolio instead so in this field view our for folio we can see that the live preview gets updated on the fly we can also update the paragraph text so let's delete this and say example portfolio text there we have it next let's swap out this image of the elephants for an image of a dog so within this image field let's just click on change image I'm going to upload an image file from my computer's hard drive once the image is uploaded we then click this select button and now WordPress will even let us crop the image and it will keep the perfect aspect ratio of height and width for us that looks good I'll click crop image there we have it and then finally let's adjust this linked field this is where we define what page the visitor should be taken to when they click on this link or this link so if we click on this field we can choose from any of our pages in WordPress let's change this to portfolio and we can even test that link out within the live preview so we can see that that took us to the portfolio page perfect so this looks good to me I'm just going to click Save and publish and we're done so if I jump back over to my other tab that's simply viewing the website and isn't in the admin panel if i refresh we see our latest changes have taken place alright so now that we've seen an example of the finished product let's learn how to code a theme to have an editable area like this so behind the scenes I just reset my theme files back to the way they were from our previous lesson so you and I are now on the same page so let's code together to add back in the custom footer call-out box let's begin by adding static dummy HTML content and styling it with CSS then once that's done we can write PHP to actually make it dynamic so let's jump in to our text editors go ahead and open up your WordPress theme folder and let's begin by hopping into the footer dot PHP file right below this opening footer element let's drop down to a new line and let's create a new div we could give it a class of anything but let's call it footer call out be sure to close that div and within this new div let's create another div for the image so let's give it a class of footer call out image and let's create another div for the text content so div we'll give it a class of footer call out next and within this new text div let's add a heading level to element and let's just say placeholder heading and let's also add a paragraph element with a bit of dummy lorem ipsum content let's go ahead and save this file and if we refresh in the browser we can see that that content desperately needs a bit of CSS attention it could use a bit of styling so at this point let's jump back into our text editor and open up the style dot CSS file and let's scroll down to the very bottom of the file and let's create a new comment just to stay organized and say footer call-out section let's begin by selecting the overall div it had a class of footer call-out let's go ahead and give it a background color of gray so background color let's use the hexadecimal value of ddd let's see how that looks in the browser I think we could use a bit of extra spacing here so let's give ourselves a bit of padding say padding 20 pixels and let's also use margin to push up on the top so that there's a vertical gap between this div and the content above it so let's say margin 30 pixels on the top and we don't need any on the other three directions that looks better next let's set up the two column layout so we want to use a selector that targets the two column divs so remember the first one had a class of footer call out image so let's float that to the left and give it a width of 30% let's select the other column it had a class of footer call out text let's float it to the right and give it a width of 67% and if both of these children divs are floated we need to make sure that our parent div clears the floats so back in our footer PHP with our HTML on the main footer call out div let's give it a secondary class of clear fix let's save this and also our CSS file and if we check out the browser we see a two column layout so the image will take up this space once we add an image and our text is here looks good let's fine-tune these font sizes just a bit so let's create a new rule and target footer call out text h2 so let's say that the heading should have a font size of 1.7 r m and let's also make sure that its bottom margin isn't too large so let's say margin we don't need any on the top or the right but on the bottom let's just say 0.35 Ram and we don't need any on the left that looks better let's increase the size of the paragraph text a bit so let's create a new rule that targets footer call out text any paragraph elements let's say font size 0.9 Ram that's a bit easier to read now that's enough HTML and CSS for now let's change gears and begin writing the PHP to make this content pull dynamically from WordPress data to do that let's jump back into our text editor and hop in to our functions PHP file let's scroll down to the very bottom and just to stay organized let's add a comment that says add footer call out section to admin parents customize screen the first thing we want to do is create a new function we can name the function anything we'd like but it's a good idea to prefix the function name with our theme name so that way the function doesn't conflict with any wordpress or plugin functions so my theme name is learning wordpress so I'll begin with L WP for short and then I'll include an underscore and say footer call-out open up a pair of parentheses and then a pair of curly brackets and before we even write anything within the body of this function let's first drop down to a new line and tell WordPress a exactly when we want it to run this new function so on our new line let's say add action this takes two arguments the first is the word press action that we want to hook on to and the second argument is the name of the function that we want to run at that particular moment so for the first argument we want to tack on to the customize register action hook that's a built in WordPress native name and then the second argument is simply the function that we just created so we just type out the name of the function alright now we are ready to begin actually writing our function so let's ask ourselves what's the first thing that we want to do here well we want to add a new section to the customize screen so for example in the WordPress admin dashboard if we go back to appearance customize we can see that there are currently five sections and we want to add another one for the footer call out so back in our code everything that we do is going to be tied to a WordPress native object named WP underscore customize this is an object that the WordPress system ships with by default and it contains a method that we can leverage named add section we want to pass this two arguments the first is the short name or variable name for the new section we want to create and the second argument is an array with a few additional options so first let's provide a variable name for the new section I will name it L WP footer call out section alright and then let's add a comma and the second argument is an array so let's open up an array and in between the arrays parentheses let's drop down to a new line just to stay organized and within this array the only property we need to set is the title property this is the name of the section that will visually display in the admin panel so let's just call it footer call out and that's all we need to create a section but we don't want the section to be empty we want there to be a field for the headline another field for the paragraph text another field for the image so on and so forth now in terms of our code for each field that we want to create we'll need two things a setting and a control think of those two things as a pair the setting is where data will be stored in our database for a field and the control is the textbox that users actually see in the admin panel and type text into so for example let's begin by creating a setting and control pair for this headline so in our code let's drop down to a new line let's begin with the WP customize object once again and this time we want to leverage a method that it contains named add setting we will also want to pass this method two arguments the first argument is the variable name that we want to create for this setting let's just call it el WP footer call out headline and the second argument is an array with a few additional options within the parentheses for the array let's drop down to a new line to stay organized and within this array we can provide a few properties so if we want we can provide a default value so when the user first sees this field and the customize screen we can set things up so the field already has a value so we could say example headline text alright that's all we need for the headline setting now let's create the headline control so again we want to begin with the WP customize object and this time we want to leverage a method that it has named ad control the code for creating a control is a bit different so in this case we want to create a new instance or a new object that is based on the WP customize control class so open up a pair of parentheses and this constructor function takes three arguments the first argument is simply the WP customize object the second is the variable name that we want to give this control so I will name it L WP footer call-out headline control and the third argument is an array with a few additional options so let's create an array open up a new pair of parentheses in between that new pair of parentheses let's drop down to a new line to stay organized and within the array the first property that we want to create is named label so this is the text that will label the headline field so we want it to say headline the next property we want to set is named section obviously we want this control to live within the section that we just created a few minutes ago so we will reference that section variable name so down here we just type in lwp footer call out section let me scroll down a bit so we can see what we're doing and then we want to add a comma and add a third property named settings and this is where we tell WordPress that the value that the user enters into this field or this control should be saved into this setting in the database so for the setting property we just set it to equal L WP footer call out headline because that's the name of the setting that we created just a moment ago alright now before we save this file and test what we have so far if we are going to use the WP customize object we need to make sure that we can actually access it from within our function to be able to access it all we need to do is pass it as a parameter within our main functions parentheses so here we just include dollar sign WP customize alright now let's save this file and jump back in to our admin dashboard and revisit the appearance customize screen so here we see that we successfully added the new footer call out section and if we click on it there's the headline field and it even has the default value that we set now currently if I change this to the field we see that in the live preview the headline text did not update and that's because we never updated our footer.php file our HTML to tell it to pull from the database so our next step is to simply jump in to footer dot PHP here is that headline element and let's hollow out its value so let's delete this and instead drop into PHP and we can use the WordPress function named get theme mod and then we just supply the variable name of the setting that we want so remember we named it L WP footer call out headline now this get theme mod function will successfully retrieve that value but we don't just want to store the value in memory we want to actually echo it out onto the page so let's save this and if we refresh in the admin panel now if we go into footer call out and attempt to change this testing one two three the live preview actually updates perfect so that takes care of the headline now let's work on the paragraph so back in our text editor let's jump back into functions PHP so we created a setting and control pair for the headline now we want to create a setting and control pair for the paragraph now we can save ourselves a ton of typing by just copying and pasting this pair that we just wrote and then simply modifying a few things here and there so let's copy the setting in control that we just setup copy it to our clipboard and then let's drop down a few lines and then just paste it in again alright so within the new copy of the setting that we just pasted let's change the variable name from headline to text it's not really necessary but we can change the default value to example paragraph text alright let's adjust the control so we want to change the variable name so instead of being called headline control we can just call it text control let's change the label to just be texts we can leave the section value as is because we want it to live in the same section but let's be sure to update the settings value so let's change this from headline to text and let's actually add a comma here because we want to include another property named type now by default a control will be a single line text field but for this paragraph text we want a multi-line text area so we can just set the type to text area let's save this file but before we test things out in the admin panel let's first jump into footer dot PHP and update our HTML so let's remove this entire paragraph element that is static and instead let's drop into PHP and echo out the results of the git theme mod function and we want to retrieve the setting that is named lwp footer call out text let's go ahead and save this file and then jump back in to our admin so now if we jump into footer call-out we see our paragraph field testing the paragraph field so in the live preview we see that that is successfully updated but that text looks especially small and that's because it currently isn't being wrapped in P or paragraph tags so to fix that we can just jump back to our HTML and we can wrap this within a built in WordPress function that will parse plain text and return it as HTML that uses paragraph tags so let's wrap this and a function named WP auto P be sure to include an extra closing parenthesis here and then let's save this file and refresh in the admin panel we can see that text is now a bit larger because it's successfully using paragraph tags so if we go back into that field you can add a bit of extra text and then even if we drop down to a new line it will be converted to HTML without any problems all right so that takes care of the heading and the paragraph next let's create a linked field that will let the admin choose which page visitors should be taken to if they click on this text or the image so back in our text editor let's jump into functions.php to avoid as much typing as possible let's just copy this last setting and control pair copy it to our clipboard drop-down paste it in again let's change this setting from text to link in this case we actually don't need to provide a default value so let's delete that and if that's the case we actually don't even need to provide this array argument so we can delete that all right let's adjust this control for our link field so let's change the variable name from text control to link control change the label to link section can stay the same let's be sure to change settings so it saves to the right place in the database change this from text to link and perhaps most importantly let's change the type to drop-down pages if we use this exact type name WordPress will take care of everything else so let's save this file and then jump back into footer dot PHP and let's turn our headline element into a link so within the h2 let's open up an a tag with an href attribute for now we can leave a blank and then right before the closing h2 tag let's add a closing a tag now let's go ahead and fill out the HR F value so let's drop into PHP and then we want to echo out the value of get theme mod and the setting name was lwp footer call out link let's go ahead and save this file and then refresh our admin panel to test it out so if we go back into footer call out here's the new link field and we can choose between any of our WordPress page entries just to test things out let's set it to the contact us page and let's click on this link just to test it out we see no content found so it looks like something isn't working quite right if we hover over this link if you look in the bottom left corner of my browser you can see the status bar that tells us where this link is pointing to and we can see that it's really just returning a value of 6 and that's because the post or page ID of the Contact Us page is the number 6 so all we need to do to convert that ID number into a usable link is go back into our code and wrap this get the mod function in another function named get permalink be sure to include the extra closing parenthesis here let's go ahead and save this file and refresh in the admin and now if we click on the link it successfully takes us to the page that we specified the Contact Us page next let's work on adding a field so users can upload an image so back in the text editor let's jump into the functions PHP file let's copy and paste the last setting in control pair so we don't have to type it all out again so copy drop down a few lines and paste it in again let's change this copy from link to image let's change the control variable name from link to image update the label section can stay the same be sure to update the settings from link to image and we want this to be an image upload field not a drop-down pages field so let's delete this line entirely and WordPress actually has a dedicated class for creating image upload controls so instead of using this generic WP customize control class let's delete that and replace it with WP customize cropped image control in this class will even let us specify an exact width and height aspect ratio for the image so it will force admin users to crop the image to meet the ratio we set so for example we can say width 750 and height 500 you could set any width and height aspect ratio you want this is just an example but let's save this file and refresh the admin panel here we can see the new image field let's select an image I'll upload a new image from my computer I'll use this photo of the beach once I select the photo WordPress will ask me to crop it to match the aspect ratio that looks good now we just need to update our footer template to actually output that image source so back in our text editor let's jump into footer dot PHP remember we set up this empty div column for the image so within that div let's create an image element let's fill out the source attribute to do that will drop into PHP and we want to echo out the result of git theme mod the name of the image setting is lwp footer call out image now on its own this function will return a numerical ID value for the image or media object that we just uploaded but in this case for the image source attribute we don't want an ID number we want the actual URL to the JPEG file so what we can do is wrap this function within another function named WP get attachment URL be sure to add the extra closing parenthesis here let's save this file and refresh the admin panel and there's the image and finally before we bring this lesson to a close what if the admin user decides that they don't want to display this footer box at all so to address that let's create one final field that asks the user do you want to display this section and then they can choose between values of yes or no so to set that up back in our text editor let's jump into functions PHP and let's scroll up to the top of the section that we've been working on in this lesson so here's the comment that we added to stay organized and here is our main overall function just below that here's our first pair of a setting and a control let's go ahead and copy and paste this setting and control pair and then let's add a few new lines above that pair and paste our clipboard in let's update the setting name from headline to let's just call it display it controls whether the user wants to display the section or not let's set the default value to no next let's update the control variable name from headline to display let's also update the label to display this section question mark section can stay the same let's update settings from headline to display and most importantly let's add another property that tells this control what type it should be so type equals a select element a drop down and then we want to add another property that lists the available choices so let's create an array of choices the first option is no which will have a value of no and the second option is obviously yes so that's the label and it has a value of yes let's go ahead and save this file and then jump in to our footer dot PHP and we only want to display this footer call-out content if the user answers yes to that display field question so let's just wrap this entire bit of content in a PHP if statement so drop into PHP only if the value of get theme mod remember the field name was lwp footer call-out display so only if the value of that equals yes do we want to display any of this markup so let's add an opening curly bracket here and then this is where the content ends so on this line let's drop into PHP again and close out that curly bracket and that will do the trick so let's save this and refresh in the admin panel here is the new field so by default it's set to no and we no longer see the footer box but as soon as we set this to yes we see that the footer box is displayed once again perfect and that's actually going to bring this lesson to a close in our next lesson we'll learn how to create and about the author box for single blog post and page screens should be a lot of fun to set up and I'll see you then I also want to let you know that just last week I published a new video course the purpose of the course is to bridge the gap between a basic understanding of HTML and CSS and the skill set that employers are looking for when hiring web developers I've pasted the tempo of the course so that just about anyone can follow along the only prerequisite is basic HTML and CSS knowledge and here's what we are going to learn get in github so we can collaborate with other developers node.js tools like NPM and gulp you may already have a strong understanding of CSS but we are going to take it to another level mobile first performance so our sites will load super quickly javascript will cover es6 basics and how to use tools like babel and web pack we'll learn about the basics of object-oriented programming with JavaScript and we'll also cover the popular module pattern finally we'll talk about jobs how to get more interviews how to interview well and how to continue progressing in your career if this sounds like something you're interested in there's a link to the course in the description if not as always stay tuned for more wordpress and web development tutorials

Channel: LearnWebCode

Views: 88,741

Keywords: wordpress, tutorial, theme development, custom content, editable content, upload image, crop image, text fields

Id: YzNfIM_9TaM

Length: 30min 10sec (1810 seconds)

Published: Tue Sep 06 2016