7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Final Touches

Hey, welcome to the final lesson of this course. Now, our framework is almost complete. We just need to add the CSS and also some finishing touches. And the first thing we're going to do is show the logo. And if we take a look in our code here, in header.php you can see that we have a div with a class of site-logo with an anchor tag. So we're gonna use the logo as a background image. And for that we need to open functions.php, and right here I'm gonna write function number 9, that says, Include the generated CSS in the page header. So we're gonna create a function here called alpha_load_wp_head and as always, we're gonna check if it exists first. So if not function_exists( 'alpha_load_wp_head',) then we're gonna declare it and we're gonna hook it to the wp_head function. So add_action( 'wp_ head', 'alpha_load_wp_head' ), okay. And inside we're gonna use this function to output some inline CSS in the head of our page. And the first thing we've got to do is get the logos, so, Get the logos. And I'm gonna start with this, $logo = IMAGES, which is our constant, /logo.png. So let's take a look at the files here. Images, we have logo.png and logo@2x.png for the retina version. So, '/logo.png'; and then we're gonna copy this, and we're gonna say $logo_retina = IMAGES '/logo@2x.png';. Okay, now, next up we gotta get the logo size. And we'll use it in just a bit. For that we're gonna use the getimagesize function from PHP. And we're gonna put in $logo. Once we're done with this, I'm gonna close the PHP tag, and then I'm gonna open it again here. And in between, I'm gonna write some in-line styles. So I'm gonna say Logo CSS, and then I'm gonna start with a style tag type="text/css" and inside, I'm gonna say this, .site-logo, anchor tag. I'm gonna do background: transparent url, and we're gonna set the logo url, so I'm gonna do a I'm gonna say, echo $logo. Okay? And then I'm gonna say, 0, 0, no repeat, so the logo is on the top left, and it doesn't repeat itself. Then, we gotta set a width and we're gonna say ?php echo $logo_size, which is this variable right here, which actually is an array because getimagesize gives us both width and height. So logo_size[0] is gonna give us the width. And then I'm gonna say ?>px; here, and then the height will be $logo _size[1]. Okay, so now if we save, refresh our page, let's see on line 250. Oh, I made a small mistake here, okay. Refresh, and now we can't actually see the logo because we also need to set display, set to inline-block. So now, refresh, and there it is. That is our logo. Now, for the retina logo, we've gotta do a media query. So, right here I'm gonna say media only screen and, now there are different ways to target screens with retina resolutions or high dpi resolutions. So I'm gonna target each one individually. First one is for WebKit, then it's gonna be for Mozilla, then we gotta do for Opera, this is a bit different, and then a default version. So (min-device-pixel-ratio: 1.5). Okay, so, this is a media query, it targets high dpi screens or retina screens. And inside I'm gonna target site-logo a, and I'm gonna set the background to transparent url( ?php echo $logo_retina; 0 0 no-repeat. But the only difference is now we're gonna set a background size, instead of width and height. And,the background size has the role of resizing the logo to the dimensions it needs to be. Because the retina logo is twice as big, we have to set the background size to the size of the original logo. So I'm going to set it to ?php echo $logo_size[0]; ?>px. And then ?php again, echo $logo_size[1]; and then ?>px again. And that's all there is to it really. Now refresh. Of course, you won't see the retina version on this screen because it's a normal display. But if you check it on your phone or tablet, if you have an iPad or some other tablet with a high dpi screen, you're gonna see the logo sharp. So it's not gonna be blurred. Okay so with the logo complete let's go ahead and add the CSS that I explained in the previous video. And all the other scripts. For that I'm gonna create the final function here, function number 10. Load the custom scripts for the theme. And we're gonna use a function called alpha_scripts. So if function doesn't exist, then we're gonna declare it function alpha_scripts. And then we're going to hook it to the wp_enqueue_scripts functions. So add action, oops, so add_action ('wp_enqueue_scripts', 'alpha_scripts');. And this is the recommended way, and the best way, to load scripts in a WordPress theme. You can't go into header.php and load everything in here, even style.css, this is not needed. So, we're gonna delete this. Okay, so close the header. And inside, I'm gonna start with something that every theme should have which is, support for pages with threaded comments. That means when you're viewing a comment and you click on the reply link, the comment form will show up right there instead of having to scroll all the way to the bottom. So, Add support for threaded comments. Actually, Add support for pages with threaded comments. So we're gonna say if ( is_singular() && comments_open () && get_option( 'thread_comments' ) ). Then we're simply gonna say wp_enqueue_script( 'comment-reply' ). So let's go ahead and test it. If we go to, let's see, template, some, blog that has a comment. So this one, for example if I hit reply, notice this reply form is gonna move up. If I cancel it, it's going to move back in its place. And if we check out, let's see, a page with lots of comments. So you can see what I'm talking about better. Okay, we have, right here, yeah? The reply form is all the way to the bottom, but if I click this link here, it's gonna bring it up. Cancel, it's gonna bring it back down. So that's what this script right here does. Okay, next let's register our own scripts. Adding a script is a two step process. You've gotta register first, and then you have to enqueue it. And if you remember from the previous lesson, I said I included Bootstrap. So I register scripts here. So Bootstrap, you can get it at Getbootstrap.com. And I'm gonna include the JavaScript only here. All right, so JavaScript is this bit right here. So copy it, and then I'm going to say wp_register_script. I'm gonna give it a handle or an id, I'm gonna say bootstrap-js. And then I'm gonna put the actual link with an http in front, in case you're working locally. And then after this, I'm gonna create an array of dependencies, which means scripts that need to be loaded first, in order for this script to work properly. In our case, we use jquery. And then we have false and true. Now these two parameters refer to the version and whether or not the script should be placed in the footer. So we don't need an actual version for the scripts, so I'm just gonna say false here. And true, because I want it to be displayed in the footer. Okay, so close this. And then I'm gonna register another script. I'm gonna call this alpha_custom, and actually we can use a dash here. And then the path to the script. I'm gonna say scripts.js and I'm not sure if it's created yet. No it's not, but we're gonna do that in just a bit. And then I get, again, the array of dependencies. And I also need jquery for this. False and true again, to place it in the footer. So let's go ahead and create this js/scripts.js. And this will contain functions and scripts related to the theme. If you need something, this is the place you gotta put it. Okay, you load these, once you register them, sorry, you gotta load them. So let's say, Load the custom scripts. For that, you can use wp_enqueue_script. And then you just pass in the handle. In my case, it's bootstrap-js. And then I'm gonna do it again for alpha-custom. Okay, and, that will load all of the JavaScript files that we need. Finally, we gotta load the style sheets. And let me just show you real quick. And, the SaaS file, the master.scss file was compiled into, the master.css, which is placed in the CSS folder. On top of that, I have the font-awesome.min.css file. And this relates to the files inside the fonts directory, which I've just downloaded. And you can download both of these from fontawesome.io. You hit on Download, and you'll have all the necessary files there. Okay, so to load the style sheets, we gotta use a different function. So, Load the style sheets. We gotta use wp_enqueue_style, yeah, instead of script. And this, we gotta give it a handle as well, so I'm gonna name this font-awesome. I'm gonna point to THEMEROOT /css/font-awesome.min.css. And then I'm gonna copy this, and I'm gonna name it alpha-master, THEMEROOT css/master.css. So, save this, and once we refresh our page, you can see that it's completely changed. We now have a proper style loaded from Bootstrap. We have different colors, different fonts here. The menu is working. You can see the drop-down menu. So it's an entirely different page. If we go to the bottom, we can see that the four widgets are now in columns, so there you go. That's basically your framework, this is what you have to work with. Now, the very final thing I wanna show you is about translating this theme. And if you remember, in some of these files we used stuff like this, _e and a string. And I told you this is a translatable string. Now to get all of these and create translation files, you gotta do something like this. Go to Poedit.net, it's a free application. Go ahead and download it. So you can download it for OS X or Windows, and also for Linux. And you can also get it in the Mac App Store, but it's a paid version there. So, once you download it, the application looks something like this. You're gonna need some po, .po and .mo files to edit, and those files will come bundled with the framework. But if you don't have them, you're gonna need the pro version of Poedit, it costs about $20. And once you do that, you click on this button, Translate WordPress theme or plugin, you find your site, wb_content > Themes > Alpha-framework, and hit Open. And then you select the language of the translation you wanna create, hit OK. And here in this list you're gonna have all of the translatable strings in the theme. You can see right here, and this is where you enter your translation. You save it, and Poedit will create the .po and .mo files for you, inside the languages folder. So hit Save. And now if we check out our document here, languages .po and .mo. Now going back to the code, if you remember, in functions.php, one of the first things that I wrote was this. Make the theme available for translation. Get the language directory, which is languages. And then load_theme_textdomain( 'alpha', and $lang_dir );. Now this will load those translated values and basically show the theme in the desired translated language. And after that, I need to go to the installation of WordPress, open wp-config let me just do that real quick. And you need to go to WPLANG, and say the desired language. So if the, let me just open those again, alpha-framework > Languages. So if these files say en_US, here you're gonna say en_US. Basically the same thing, but without the .po or .mo. And that is how you translate a theme. Okay, thank you very much for watching. This was the last lesson.

Back to the top