Part 7 - WordPress Theme Development - Use the WordPress Media Uploader

hey what's up guys Alex here thank you for checking this video and welcome to lesson number seven of the series of tutorial on how to build a premium theme for WordPress welcome again in this tutorial we're going to take a look on how to use the built-in media plotter to upload a custom picture to put on top of our sidebar like we did in our design here we want to apply a picture we won't apply a small style to make border-radius of 50% and then put everything centered online so really quickly and really in an elegant way we could do a different things actually we could customize a standard plotter like a normal select form of each tml and then save this changes it and save that whatever file upload manually the file inside a custom folder inside the castle meta box that we just created but because we have the media plotter built in and we have a lot of nice functionalities media plotter was introduced in version 3.5 it's really great to use all the functionalities that we have in this media folder especially the selection files and all the options to customize the output are really well built so let's use that and let's not do some useless amount of work so let's get right into it and let's open our text editor and in order to use the media uploader of wordpress we have to include some specific file in our administration page these files are JavaScript files because the media plotter WordPress is built and maintained with JavaScript and mostly with jQuery luckily the guy is home from WordPress released a lot of different hooks and different functionalities an API is directly available inside jQuery so we can dynamically call all the functions of the media player without using we're PHP stuff first of all let's go inside our folder structure and inside the Jes structure I want to create a new file called sunset dot admin dot yes and inside here I want to simply open a jQuery document ready function so let's write jQuery super brackets document dot ready bracket again function bracket again dollar sign and curly brackets semicolon at the end and inside here we can write all the functions that we want basically if you don't know anything about jQuery don't worry I'm going to tell you exactly what's right and I'm going to explain a little bit of jQuery to basically what we're doing we are checking if the jQuery is loaded in the document and the document is ready so this jQuery document is binding the jQuery to the generation of the document maybe if I write document in the proper way it's gonna I don't know how to write document that's it let's use the complete document yes that's good anyway jQuery is binded to the document the document is the actual HTML or PHP page the actual file that it's loading and if this document is ready we can use this function with the dollar sign to use all the jQuery functions that we want so first thing first we have to create a variable called bear the var var is the generic statement to create an empty variable and in my case I want to create a variable called media uploader and then semicolon idea and for now let's leave it like that we will be back later to complete this entire file now what we have to do we have to include these new generated file this sunset at mindle Jes inside the administration panel inside our custom page so let's use the WP underscore register underscore script and here we can use the handle that is sunset admin script and the string of research is exactly like I did before for the style is the death template directory URI to point my directory inside my my theme and then / yes / Santa and main dot J yes the array if I have some dependencies I will stated that these dependencies is jQuery because I need these dependencies to work by default jQuery is loaded inside the administration panel of WordPress so we don't have to worry about including or loading jQuery but it's always better to state dependencies of a specific file so jQuery WordPress will know that this file cannot work without jQuery the version of my file is usual the 1.0.0 and if I want this one in the footer I want to state it true I want this one in the footer and semicolon Yun and then WP underscore in queue script and instead of repeating everything we just refer the ID the unique name that we specify for our script save it let's go back in our administration panel let's refresh it let's check if we have our the GS file and we have our sunset admin J's file at version 1.0.0 so it's working it's great we don't have to worry about this thing the other thing that I want to put inside the function to in queue scripts in the administration panel is the actual native script of the media uploader so the media uploader as I said works with JavaScript and jQuery and everything is inside packed for us to use wherever we want inside a function that we can call in the backend in the front-end we can call whatever we want to do that we have to just use a pre-built hook of WordPress as usual calling WP underscore in Q underscore media this function the WP e in q media will automatically handle the calling and the activation process of all the scripts and all the source code that we need to use the media plotter so this one it's cool it's powerful and it's super easy to implement because as you notice here it's just a function without these no matter what you do the media player won't work because you need these to trigger the source code of the media uploader so always remember to in queue DS in whatever page you want to use the media plotter now we have to create an actual file an actual input file to click maybe a button to click and upload a picture and call the media uploader with that specific click so we have to create a register settings like we did in the past few lessons so let's access our function - admin dot PHP and inside here maybe before the first name because it actually is the first thing that I want a user to upload is the profile picture so let's register our new settings in the same settings group we don't want to change it call profile underscore picture and inside here we can add another settings field for that specific profile picture so let's go sidebar profile - picture that's called the name is profile picture as usual let's change the callback function to sunset sidebar profile and let's leave the same page ID and the same options ID so I don't want to change the last two parameters what I have to do I have to create or maybe duplicate a pre-existing function and change the parameters to use my newly generated profiting so the profile picture calls the function sunset sidebar profile is change it to sunset sidebar profile let's remove one variable we need just one and can be profile or maybe instead of profile let's use picture maybe it's more clear and let's call the parameter settings that we just generated with the ad so it's profile picture and its profile picture and here we can do some nice things so I don't want actually in my administration panel to see the input field we the URL of the picture that could be PNG whatever jpg I don't want to see the URL I want that URL to be hidden in to unhidden input that then has to be saved automatically by WordPress I wonder also other than the hidden input i want up button that the user can click to launch the media uploader so what i have to do i have to convert this input type instead of text and 1 and hidden input type the name has to be exactly the same as the Adid i defined and here we can remove all the parameters that we don't need we don't need a placeholder we don't need the second input here and the value has to be picture instead of first name so now we have this hidden input if we save and we go back in our nutrition plan and we refresh we notice that we have here the feel but we don't have anything because we defined in these an input field that doesn't have any value because we didn't upload anything but this is input so now I have to create a button for the user to use to launch the mini uploader open another input let's use the type this input has to be a button because I want to be a button element to be clickable we can use value to specify the name of the button the text that the user will see in the button and upload profile picture and then we can use a unique ID that we actually we definitely need to properly bind the action of opening the media plotter to this specific button and the button ID that I want to use is upload - button and that's it let's save it let's go back in our back-end let's refresh it we have this ugly ugly button pre-built button of HTML that never changed since the 90s I don't know why we still have this ugly thing from HTML 2.1 i don't know which version was it but it's still the same it's never going to change but we can style it by applying some pre build classes of wordpress so let's just after the type button' let's open the class attribute and let's put inside some button class and button secondary let's save it go back here refresh and now we have the preview button that it's kind of similar to the media uploader button of wordpress so now that we have this we have the actual button that we can use to click and open the media plotter but of course is not working because we didn't bind any JavaScript or reaction to G uploader so let's fix that right away let's access back our sunset admin dodged Jes and I start write some magical jQuery so underneath the declaration of the variable let's use the dollar sign to invoke jQuery and inside the brackets let's use single quote and let's specify an hash symbol and then upload - button so I'm calling the ID and saying - jQuery bind whatever action I want to these ID disease from CSS this is how you define an ID in CSS and jQuery has the same attribute elements to bind a specific element in the Dom of your page so upload button is the ID I define hash upload button is what I want to do and I want to bind this to a click function let's right click and inside brackets that's right function open again the brackets and inside we put e the e is a generic symbol a generic variable that is going to be banded to DS element and the action that the element is triggering basically inside these e are going to be collected or the information that comes with this button so the destination of the button the classes of the button named ad so these is a really important item of course you can define a w-whatever bar you can't know maybe for not but like element you can write whatever you want e is kind of generic because is the single letter that stands for element so we usually in jQuery it's usually used that one let's open the curly brackets let's always close the semicolon before opening the function that's something I usually do I call I close the semicolon immediately before opening and writing type because sometimes happens or happens all the time that I forget the semicolon at the end so I put it right on Anna think about it anyway so on the click of these element if' to before e dot prevent default this function is a prebuilt javascript function that it's blocking whatever action is bounded to the button to be triggered so if this button it's pushing your form somewhere or is reloading your page or is submitting your form with this e dot prevent default you may be fair right prevent default okay I don't know how to write today's sorry anyway this function is preventing the upload button to do whatever action is bonded to that action so it doesn't matter how many times you're going to click that button nothing's going to happen so now we have to check if our media uploader is defined that is the variable that we define at the end if this is true is minutes defined we can open our media player and to open the media uploader of WordPress is just calling the media uploader JavaScript variable dot open function that's it and then we put a return because if we're opening this after a click we don't want the script to continue and to do something else that we don't want so let's just leave like that so now that we created this function we could potentially use it but actually we didn't define anything about the media player these media uploader variable is still empty so these won't work if we save it and we go into the administration panel and we click here nothing's going to happen of course because the media floater is empty so now we have to actually define the media plotter and hook the media plotter to the actual media uploader have WordPress the actual function so let's call the variable media uploader and this variable is going to equal to WP dot media dot frames Reims dot file on the score frame that is going to be equal to WP dot media open brackets inside open curly brackets and here we can specify some custom options so don't get scared by this piece of code I know that can it can be like hard to remember but you don't have to remember because this code is stated inside the WordPress codex so this is a code that you need to access the different stages of the media plotter so we are calling the WP global variable we are getting into the media plotter we are accessing the frame and we are accessing the file frame that manages all the options of our custom media plotter and then we are customizing a bunch of media options for data plotter as I say you don't have to remember these because you can find these in the Codex of WordPress so no worries about that if you don't remember this passage you can always check the Codex and everything's going to be fine now here inside the WP dot media function we can specify some text some custom text for our media plotter so let's specify first the title and I want to use the same title that I used in my button so upload profile picture or instead of upload choose a profile picture because of course a user could also pick something already uploaded inside the media library comma to separate D attributes the second attribute is the button attribute and inside we have to specify an array of attributes that is the first array is the text of this attribute that is choose picture just random and then here we can comma the last parameter is multiple and I want to state it folds so these multiple parameter here it means that a user cannot select multiple files because as you know probably if you open the media plotter if you have already a bunch of different file so you are uploading multiple files then you can select all those files all together and then put all those files inside a page of a post or whatever in our case we want to just the ability to select just one picture because we want to allow the user to use just one picture so we have to specify folds as a multiple options so as you can see here I slightly customized with this function the WP media function the options of the media plotter let's refresh and check if it's actually working so if we click upload profile picture you will notice here the media uploader appeared and we have our custom option of course the media plotter is the default we can upload a file we can access the media library of course in my case now it's empty we have the title that we specified choose a profile picture and here we have choose picture if you notice and we go into the media section if we click a new or maybe post is better we click add media we have the title this intermedia we have the sidebar option for the post and we have insert into post so these options are different and with the script that we just wrote we can customize the options of the media uploader so this is pretty handy right am i right yeah it totally right anyway let's keep going now because now of course we can upload a picture but when we select a picture nothing is going to happen that we can try just opening that select a file of course the image will be uploaded and we have our options here we have everything we uploaded and we can click choose picture but after we click choose picture nothing actually happens and if we access the source code and we check the input field the hidden field we notice that the value is still empty what we want we want that when we click choose picture that URL that we have inside our newly uploaded picture inside a picture from the media library has to be dynamically pasted inside the value here so every time we save our changes these value is passed inside the updated options of WordPress so let's do that let's access again our text editor let's keep going and if you notice here I'm still inside the click options and just as you know this year probably you missed it because ie I edited the video because my recording just jumped a little second but I changed this format from it was like that it was quick oops he was click and I change it from click to unclick it doesn't remember that the previous version is kind of old and sometimes could prevent you to have a fully functional thing especially if the jquery options is to update it if wordpress switches to a jquery to point something or major - to probably the click function won't work so it's better used on and then click combine then the function and the code is exactly identical so let's use this format that is safer inside still remaining inside this click function here after the generation of the media plotter and maybe the opening of the media plotter we can bind another option to the media uploader like we do to open it we can use it to check if something has been selected so let's put dot on open the brackets select this is a binding action to the media player if the user selects a picture and clicks on select this picture comma function just open close bracket curly brackets and semicolon at the end let's open the curly brackets and inside here we have to retrieve the attachment URL that we wanted the actual image URL so to do that we have to define a variable called attachment and it's variable it's equal to the media uploader now we have to navigate inside the media plotter so we have to access the immediate loader go inside this state function get what we want to get the selection of what a user just selected and we want just the first element the first input that is inside the selection and then we want to convert these into a JSON format a JSON format is a string a conversion of a variable an array to something that we can extrapolate inside jQuery a I'm going to do maybe in the future a lesson or a series of tutorial only for jQuery but for now also this part of code you can totally find inside a codex of WordPress so you don't have to remember you don't have to use your memory to remember this portion of code you can just check the Codex out WordPress and use this one to retrieve the attachment URL so we're going inside the uploader we're getting the selection of the user and we are retrieving the first element converting into a JSON string with the JSON string we can put the value of the JSON string inside the input so let's use jQuery with dollar sign and let's call the input field that we want to apply our code so let we check the source code of these ID this input field here we don't have any ID so what we have to do we have to specify the ID so we can easily access that ID let's go back in our word functions function - admin dot PHP and in the generation in the sunset sidebar profile function where we created input we can specify after the type hidden' we can specify ID equal profile - picture let's save this and now we can use it inside our sunset admin dot yes we can retrieve these hash profile - picture and here we can put dot Val open brackets and we wanna print the attachment dot URL and semicolon at the end basically what we're doing we are we're scanning with the dollar sign our Dom and we are looking for the input ID profile picture and then we are applying a value to this element that is the value is the URL inside the attachment variable here so these attachment variable is a an array a JSON array with all the information that comes from the picture the user selected so we want to retrieve just the URL so we're going to do a catchment dot URL and at the end we can put the media uploader dot open because if the media plotter is defined we can open the media plotter and stop the function but if the media plotter is not defined we have to define here and after we define it we can open it so we need these open at the end otherwise we have to double click the button to first generate the media uploader variable and then open it with this one we can provide the double-click issue let's save it go back in our back-end refresh it let's click upload profile we have our profile picture open it and let's keep an eye on this ID input profile picture that I define here if I select this and I click Choose picture look what happen the value here was updated now we have the full URL that if I copy and paste it here in a new tab this is the picture that I just uploaded and it's inside I provide so if I save the changes it's been saved signing save everything is reloaded and if I check here now yes still these values so what I can do I can do exactly the same daddy here so I can print that magical value that I just saved so let's open the templates folder and Santa admin and let's write here before the full name div class image container and here we can put a div class profile picture and here we can put image sirs let's close the image and let's duplicate one of these option at the beginning let's use picture variable and this one has to be the same ID that i define a year so profile picture profile picture and let's print the profile picture URL save it let's get back in the backend refresh and now I have the profile picture so what I have to do with the CSS file I have to style a little bit this thing to make it look good so let's do that save it let's go back in our refresher and that's the result that we have so here we have a little bit styling problem because we define the container with the proper border-radius hainan height and we want the picture to be always at the center always filling the container but unfortunately because it's an image and the image has not the same ratio of the container it most likely will happen that I picture won't fit properly but because we cannot control the size of the image that a user uploads we can do a little bit of trick with a background element so let's go back here and instead of printing the picture URL inside image element let's cut this let's remove the image element and inside here we can put an style background - image column URL brackets and inside we print this save it and inside our CSS we can totally remove the profile picture image we don't need here and here we can put a background position Center and center so we're going to be sure that our background is centered every time then background-repeat:no-repeat so we don't want the picture to be repeated infinitely inside the container and then background size cover the background size cover will expand the picture as a background as big has the container to fill all the pieces of this space that the container has so it's gonna read a p-- automatically based on the container size let's go back here let's refresh and now we have as you notice here beautiful beautiful profile picture and our preview of the thing now we want to show off the sidebar that we're building it the last thing that I want to do is another trick basically if happen that I want to change my picture also I want to upload a pro another profile picture and I select this and maybe a select second picture this one here where I'm smiling with the beautiful round face and choose the picture the picture is of course refreshed inside my input file here but it's not refresh as you know this year after the photo - this is the photo one but it's not refreshed here so that could be misleading for the user so if I save the changes of course the page is refreshed and the picture is uploaded but as I say could be misleading for the user because if upload a picture select the picture and doesn't change here said that could be confusing then oh my god did it work it didn't work what we have to do and so on and so on so the good thing that we can do with jQuery is swap the element here the background element that we put here dynamically every time a user selects a picture so what we can do is remember first what class we apply to profile picture and maybe define an ad to dis and define profile picture preview and use these ID to dynamically replace this string or replace just this style attribute so let's go back Network javascript file handy in here after the applying of the attachment URL to the actual input that we need we can use pretty much the same function so let's go back here let's use dollar bracket single quote hash and not this one let's copy the profile picture preview ad that we just defined and here instead of value because this is not an input we have to access the CSS property of our element and let's put aside the CSS bracket single quote we have to access the property that we define before the background - image after the single quote comma single quote again we have to open the URL open the bracket then after the single quote we put a plus and we put the attachment URL variable that we have here and we put another plus and single quote and we close the bracket so what we did here with the CSS property the styling property of this ID element we are accessing the background image option that we define here inside our template background image and then we have to define the URL of this background image we define the URL and then with the plus button the plus button is the equal identical of the dot button in PHP so the plus button in JavaScript if a variable plus a string is connecting this to string to form a single string so it's sprinting this element has a string and it's connecting everything at like a single screen so we're going to have the URL the brackets and then the actual URL inside and then we have to close the bragging so semicolon at the end of course save it let's go back in our administration panel we have this picture here if we click a plot picture we click the other picture the one super-serious and i look really smart let's click choose picture and automatically order than changing the hidden input here also this picture has been automatically replaced without the refreshing of the page so of course if we save the change of course this picture is now saved but this gives the ability to the user to upload as many pictures as you want and see immediately the preview of what is going to look like his beautiful face or his logo is Hyken inside the sidebar without the necessity of saving the changes every time and also for today's lesson is pretty much it hope you enjoy it and if you did please give it a thumbs up or subscribe to my channel and if you really really like what I'm doing please think about clicking the first link that you can find in the description below and take a look on how you can support me and support my channel to help me to make better video more videos more tutorials and lots of cool stuff that can improve a lot your life and make you a better developer so thank you again guys and until the next video as usual happy coding

Channel: Alessandro Castellani

Views: 45,073

Keywords: tutorial, wordpress, help, web development, wordpress theme, wordpress from scratch, create a theme, php

Id: _uk_clTGWlE

Length: 38min 18sec (2298 seconds)

Published: Thu Nov 12 2015