Transcripts
1. Introduction : Hi, my name is Victoria Anna, and I'm a visual communication designer. I design logos, corporate identities, website, and I illustration. In this Skillshare class, I'd like to show you how to customize the default 2019 theme and transform it from this to this. This process is valid for transforming and customizing other WordPress themes. I hope you're going to find inspiration and start work on some customizations. We are going to take a look at the template files and how they work together to build a WordPress theme, and we're going to make some changes to them. We are going to change the header, the footer, customize the logo, the menu, create content, embed Google Maps, install some plugins. I assume that you already have installed WordPress theme and WordPress and taken a look at the settings and that you have some experience with CSS and HTML. If you have any questions, reach out to me. You're going to find the resource files and exercises attached to some of the lessons. Now let's start.
2. WordPress Theme Files and Hierarchy: I've started FileZilla FTP client, which is my preferred. Let's have an overview over the WordPress installation files. Usually, we download from the WordPress site, the zip folder with WordPress with the newest version and ZIP it on to our computer, and send all the files up to our server to install it with installation of the database and all the other settings. Well, here in the WP Content, we have our themes also plug-ins. Lets take a look. This is our 2019 theme, and WordPress these days comes installed with 2017 and 2016 theme. Let's have a pick into our 2019 theme and to see what files are there. Usually, WordPress theme can function only with an index PHP file and style CSS. But functions PHP is also very nice. You might also want to have some nice interactions and some nice fonts. All these files are basically modular components that build up one thing. It's really important to understand the hierarchy of the WordPress template files. We have all these template files that I've shown you in FileZilla, and then of course, the style sheets and JavaScript images and other template files like functions PHP that build up the entire theme. All these template files are like little modules that you can combine to create the theme that you want to have. They are giving the structure for the information on your website. For example, in our theme, the sidebar PHP with widgets is actually a part of the footer PHP. You can combine all these little modules together to one big theme, and there is a special hierarchy, for example, the most specialized one of the templates is, for example, you have a page PHP for all those pages that we've created in our theme. But let's say we are going to need a contact page and it's going to look a bit different than all the other pages. So I'm going to create then a page, contact PHP. This is going to be the template only for the contact page. In case, for example, that I have created a contact page but not assigned contact page template to it, the WordPress is going to fall back onto the page PHP templates. So the more specialized one template is, like category or category shoes. Category shoes is more specialized than category. So WordPress is always going to show the more specialized template, and if it doesn't find it, it's going to fall back onto the less specialized one. Then ultimately, if it doesn't have any other templates in the theme, its going to show the index PHP file. So when you're changing a theme, when you're customizing it, you usually only work with style CSS, but sometimes there are parts that you want to change, and for this, you're going to have to have an FTP client to open up these files, edit them, and create the new structure that you want to have into your template files.
3. The Child Theme in Action: To start customizing our theme. We need to create a copy of it first. Because going from here, the default 2019 theme to this one that I already tried on for this business side is not recommendable to change all the original files of your WordPress theme installation. Because you might break something, make a mistake, or the theme is going to be updated and all your changes are going to be lost. You have to start all over again. There is a possibility, of course, to go to the customizer and upload the logo, change the colors, create menus, changed the widgets, and here is an additional CSS field, which you can fill in with your CSS. Let's say something really simple. Background color is going to be green, great. Now you save it and you have a green website, but 2019 gets updated and all these changes get lost. What to do? There is another possibility where as an administrator in the dashboard, you go to the Appearance Theme editor. I've shown you this before in the other video, so you can change all these theme files and edit them. But of course this might break your theme, you're original theme. The recommendation is always to create a child theme, and this is really great. It's called child theme because the parent theme is still there, and all the files, all the functions, all the JavaScript, etc is still there. The child theme can use them, but if you want to make changes you just copy one of the files, make changes in them and leave it in the child theme. Because it's going to overwrite the files that are here in the parent theme. It's way beyond our scope to create a child theme, and I found online that there is a great site which is called ChildThemeWP.com and the great team that works there, and some of them work for WordPress.org are creating the child themes for the known WordPress themes. Here is the download link. You're going to find it in the exercise files so you can download the child theme for yourself. I have already downloaded it, I just have to push it up to my server. It's unzipped, and so I just pulled a file up here onto my server and here it is. The child theme consists of functions PHP and style CSS and the screenshot, of course, for the theme, which I believe is blank, and some JavaScript. All of this, the great team from the ChildThemeWP.com has created. We don't have to worry about creating all these files. How does this function with the child theme? We have a parent theme here and the child here, and how do the files communicate with each other? Well, that's not a problem, I'll just open here the WordPress on my computer just to have an overview of the files and to explain. You see the child theme has very few files on the functions and style CSS. For example, if I want to change the header, I'm just going to copy the header PHP to my child theme and do the changes in that file. All the rest is going to come again, stay the same. All the template files are going to be from the parent theme. Everything you want to change in the child theme, you just copy that file and make your changes in the child theme. Of course, you have to keep also the structure of the folders in order to keep the linking between the different template parts. On the front side, installing a child theme is going to look like this. I'll go here in the dashboard and appearance themes and remember, I've told you the screenshot of the child theme is blank. We'll going to have to change this in a while. I'm just going to activate this theme and if I go back to our side, it's still the same. You see it works, it's basically a copy of this site. But if I want to change a file or just copy to the child theme and change it there instead of breaking the parent original theme.
4. Changing the Fonts: First of all, I want to change the typography. I have already looked for the font before. It's called Source Sans Pro. I liked it for this project. I'm going to select it here and choose the styles that I need; the regular, the Italic, and the bold. When I look here, I'm going to need this link in my function's PHP files because we're going to change the fonts via functions PHP as style link. After copying this link to the fonts that we've chosen, I'm heading to file dealer to open the 2019 child folder and edit the functions PHP file, because in the newer version of WordPress, the styles are on queued into the theme. They are not put in as a link, but on queued into the function file. Here, you see that the parent-css file is built into the theme, and here's the child-css file. If we write anything here in the child-css, it's going to overwrite the parent-css. The same goes for the child JavaScript file. If we have custom JavaScript in our child theme, it's going to overwrite the one of the parent theme. So here I'm just going to paste the link from Google fonts and then copy this WP on key style function here, and name my function child-googlefonts, make a comma and then paste this reference to the CSS of this font here inside and put a semicolon here, and of course delete this link. I'm just going to put a little comment here. Add Googlefonts. So that I know what I have changed in case something doesn't work. I'm going to save this, and yes, confirm. Now, let's see if anything has changed on our site. No, it hasn't. The reason is because if we use the Web Inspector from Firefox, we're going to see that this h1 still has the font family does is in the parent theme. So we have to overwrite this in our child-css file. So let's do that now.
5. Changing the Colors: If I'm going to change the colors, I'm going to need my file, my sketch of the website, and I have a little app which is called ColorSlurp. It's a free app which makes funny sounds when you choose a color. Well, I've turned that off because I have found it little bit irritating when I worked with it. I have already saved this background color here, which is a warm middle gray. I'm just going to copy this code, open my inspector, and find the body tag. Here it is. It says, background color body is white. I'm going to change that. Here it is. Looks a bit funny and weird, but not bad. Now I'm going to copy here everything because it includes also the color of the font. So Copy, open my CSS style file in the atom app and just paste it here. Of course, I have to delete this here and maybe also, this has m color. I could put white, but I don't think it's going to be correct, I think I need to choose a very, very light in gray. I'm going back here and using ColorSlurp, I'm going to choose this gray here. This is the lightest spot, and I'm going to copy this into my font color. This comes here. Save and then change the font family too. On this website in this project, I like to have as little as possible different fonts. Save, and then of course, saving font fill as well on the server. Go back, close this and let's see what happened. It looks nice. Of course the text is illegible here, but these are blocks and this is the nice part that I just have to basically change the body color, the font color. Maybe in some other occasions like links, I have to change a few colors, but otherwise all the rest I can just edit here in the block. Let us see that. Color settings. I'm going to put the text color white and the background light gray, update and check. Yes, that looks a bit more legible, but not really nicer. To make our theme a bit nicer and to customize it, we're of course going to need a lot of tweaking, and if I went to all of these links individually, it is going to take awhile to change their colors and hover states. I found on GitHub, that the developer Ann Pohl has put the 2019 custom color override out there to use. I'm just going to copy all of this and put it in our style sheet. Let me just check if you edit. I have already comment in here, the typography. I'm just going to put another comment to know where to look for things. Colors, override, and then paste all of it here. Then I have to look for the a, for the links. This is what we are working on at the moment. Just save it for a second. This is the links color. I have prepared the one I want here in my text file, copy this one, go back to code and enter it here. Most probably if I go back here, of course I have to save the file also on the server. Let's see in the browser what happened. You see nothing happens. Well, this is the trick with working with child themes that you have to use the important rule quite often to override many of the CSS settings. It doesn't feel good, it feels bit hacky and I don't really like it, but that's it. That's the work with the child themes. This is now the look of the links. Of course, when I hover over, not much is happening. I have to change also the hover cover, which I have prepared here, and it is this one. I think it's a corn yellow or something like that. Let's see, the hover states. I'm going to put it here. Not forget important, save, and check in the browser what happened. Here we go. Now, I wanted to have also the animation of the border underneath. Because here you can see there is a text decoration underline which actually cannot be animated. I'm going to add the animation now in the hover state. To change this hover transition, I am going to remove the underlined here and then add the border which I'm going to transition, not animate transition. I'm always using to homeward, and I found it better because transitioning underlying a text decoration is always resulting in some jitters. I'm heading back to the CSS file, and here in the hover state, I'm just going to copy this color because I want the border to have the same color, of course, as the text. I'm going to just add border color here. Save, and then go up to transition this. First I have to say, text decoration is none. After declared the Border button transition from two pixel solid transparent to the color that I've declared in the hover state. I'm going to put the transition or linear and the simplest, then 0.3 seconds. I found 0.3 seconds to fill the most natural of speeds. Some going to save this here and do the same in FileZilla and check what happened in the browser. Oh, apparently all the links now have that same transition. Well, the admin bar is not really my concern. Let's see here. We haven't removed the underlying decoration. Firstly, I forgot to write important. Was that the case? Go back. Now I can transition it. Let's see here, all the other links as well. Great. I also want to change the color of this element. It's some left border. Let's see which one it is, its entry content and blockquote. I want to put this the same color as the link color, and I'm heading to the CSS file. Let's see here is the link color, copying it, pasting it here with the blockquote, saving, confirming. Checking in the browser. What happened? It has changed the same color as the link before the hover state. But if I look at this in the big picture, I find these lines way too fine considering the typography. I want to make them a bit chunkier. I'm going to change that back here, adding the border width, and I'm going to start with the nine pixels just to exaggerate a bit, and confirm and refresh. Looks a bit more in harmony with the topography, but maybe a little bit too thick. Just to tone it down I'm putting eight pixels and fresh, that looks a bit more in sync. We have edited the colors of the theme, and now we're going to move to the footer area because I don't want to have these widgets in my footer.
6. Changing the Footer: To change the appearance of our footer, first, I want to change the background color. I'm going to here, check in the web tools, what is happening with the footer. There it is, there is no declaration of background color, and of course it's taking over the body background color declaration. I'm going to make one here, background color and check with my Color Slope App because I was playing with the colors and I wanted to have a less contrast in the footer, so the content area is a bit more visible, just subtly but with a little difference. Yes, I'm going back to the inspector, putting the color here. Yes, this is how it's supposed to look like. Then I have to remember that a footer ID is colophon and the class is site-footer, copy. Going to the style sheet, and somewhere up here, we have colors override. I see I have made a mistake, I'm going to delete that and paste the background color here. Make the brackets like so and footer-id of colophon and the class of site-footer. Now let me check if this is going to work, without declaring the important attribute. Refresh, yes, it's working. This is great and now we can work on the widgets. Every time you see Meta in WordPress, you can take a bet that this is a widget and I am going to check here with the Web Inspector. Yes, here is the aside element which is declared as a widget-area. In some WordPress themes, there was a sidebar on the left or on the right, which is also widgetized, where you can put these chunks of code, a very practical functional elements that are going to enhance your theme. I'm going to head to the dashboard because I don't need all of these widgets. Here in the appearance go to Widgets, and I'm going to remove all of these like so. Take a look at my sketch, now here I have four lists, lists of text, and some of them have links. What I need basically, I cannot find among these widgets here, I'm going to use the custom HTML, which is a very practical widget where you can create whatever content in HTML directly for your footer or the sidebars, depending where your Aside element is. For my footer with widget, I'm going to put in the custom HTML and widget, I don't need a title for it. Just going to declare a parent flex element, It's going to be very original, footer-flex. Then inside are going to have four div elements. The first is going to be Copyright, the second, Class, that's going to be the address. The third, just going to copy these to put them inside and then change this contact and languages because one day this page is going to be in German and English, going to save this in between and then declare the lists. This is not really what I wanted it to look like, so after much tweaking, I have played with this code and with the widgets around. I found a solution to have the footer look like a 1 and a 2, and that is here in the CSS code, I have to change several things. For example, here for the flex I have to create space between and I also have to decrease the font size. I'm going to put it a 0.7 EM. Also, the footer-flex div has a padding of 12 percent and it has a width. I'm going to put here 300 pixels, and also very important align-self to self-start. This is going to push the text in the div itself to be aligned with the top line and the footer-flex is going to have a line items in the center, the vertical center of the footer. Also here in the UL, I have to declare the width of the 200 pixels. I think have declared everything that I've forgotten. I'm going to save this, push it on the Server 2 and then refresh. It still needs a bit of tweaking, for example, it's not aligned with the start of the content here on the left. This is because this element, as well, I'm just going to inspect the element here. The copyright also has a padding on both sides, so I am going to remove that by going to CSS and declaring the footer-flex div, first-child is not allowed to have padding. First-child padding 00, let's refresh. Now this looks better, there is one problem though, which I was thinking about later on, and that is the responsiveness. If I watch this on the iPhone, on the smartphone, I'm going to see only two of the lists, so I'm forced to create two widgets with custom HTML. This is going to change here, so I'm just going to create another widget, custom HTML and copy these last two lists, which is, I believe contact and languages, yes. I have to close the div and then paste this here, but I'm missing this starting div, which is the footer-flex. The editor likes that, no errors, save and this is done so I'm going to refresh here. When I push this to the smartphone dimensions, you can see I have all four of the lists here stacked above each other. I just have to declare may be another class to this footer, and to do this, I'm heading to CSS again. Declaring another class footer-flex-1 which I'm going to apply to the first of the custom widgets. I have to prepare this here and copy footer-flex-1 into all declarations except this one. This is the first one which is not going to have the padding and footer-flex-1 UL. I believe I have covered everything now at the footer-flex-1, so I'm going to update this on the server and check what I've done here. Yes, I forgot to change the class in the widget, let's go in there and declare this here, footer-flex-1, save, done and voila. Now this is the footer the way I wanted It to look like. I'm going to add icons for the languages at some point, but for now, I want to get rid of this disclaimer here at the bottom, and I can only do that in the template. This is where we're going to see this purpose of the child theme. And what I've told you that you can change the structure of the theme by copying files from the parent theme into the child theme and changing the files there. I'm heading to FileZilla and opening the 2019 theme, which I have on my computer, otherwise, I would have to go up to my parent theme on the server while I like to have it here on my computer, so I can just easily copy my footer file up to the child theme. I'm going to edit that. Here it is, this is the footer Id, Colophon class site-footer. If I take a look, this disclaimer here, going to check in web tools, I'm going to put this back on the right side so I can have a better view. This element here is the aside we've just customized, but this is the site-info and within the site-info this the class site-name and then the class imprint. I think, this is what I have to remove, so div class site-info and the link-imprint, class-imprint. This is where the next function starts, I'm not going to touch that one. I'm just going to delete here, save it on the server and take a look here in the browser, perfect.
7. Bonus Tip: Footer Icons: Here's a bonus tip for those who, like me, need to implement icon flags or flag icons next to these two links or anywhere else in the code. I have search the internet and found here on GitHub, a great repository by lipis, who is a web developer at Wire app and Google, and he has created this package which is called flag-icon-css. You can install this package with your task management tools if you have a big project and if you work with JavaScript, but we're going to implement this really by foot because our project is not that huge and we can implement it just with one line of HTML code. I have downloaded this file, the zip file. It's here. I have unzipped it, and inside there is the CSS, which I'm going to need and the flags. Because I'm going to need only the rectangle ones, I'm not going to upload the whole folder. I'm going to create a copy here and call it flags, open and then upload a rectangle, flag icons, SVGs up there. In the meantime, I'm going to take a look at the CSS, and there it is. These are the icons, the SVGs, the square ones, and the rectangle ones. This line apparently only considers the square icons, so I'm going to copy only this. Copy and paste it in my child theme CSS file. Of course I'm going to comment this if I can find it later and paste it here and save. Then, I need the US flag, I'm going to find it here, and I don't need the square one, I need the rectangle one. Copy this. Well, SVG link and paste it into my CSS. Then I need a German flag, and I'm going to find it here, the rectangle one, copy and paste. This is the CSS style file, which I have to confirm that I've changed. Yes. Now we have the flags here. The CSS is in our style, and now we need that HTML line of code, which is here. The lower one, the one below is for the square flags. I need the rectangle flags. I'm heading to do widgets, and to my second widget where the links to the languages are, to the language versions. I'm going to paste the HTML here and change domination here to DE for Germany. Paste again and change to US for USA, because the readers of this page are also going to be in the United States of America, save, done. Let's see. Refresh. They're supposed to be here. You see how the link is extending, but they're not showing. What happened? I'm going to show you what I forgot to do. I can show you here. You see the URL? It's the same here. The path to the file. Of course, here, I have to get out of the folder here and go to the flag folder here the style is in the root, I just need to go to the flag folder. Deleting these two, save, put on the server and refresh, and voila, here they are. I could bother to remove this link underlining, but that would be a bit too over the scope of this short tip. I hope you've seen how you can tweak with the child theme and change the look either through editing the PHP files, the parent theme files that you copy into your child theme or through the widget area, and of course in your CSS style files. This is our website now, and the next we have to deal with the header and the content.
8. Customizing Your Content: Part 1: In order to further customize our front page, let's take a look at the sketch. Here it is. Here is the header, then the content, and the footer we've just finished customizing. Remember, we've talked about the template files, the header php, and then all these templates for the content. Our post was shown on the index php. Now we're using the page php because we put the reading setting as a static page for our front page and the site element with the widgets in this theme is integrated into the footer php. Now, how do we know that we are using the page php template for our front page? Let's take a look in the browser. This is our WordPress installation, our dashboard, and the page that we've created. We are looking at the preview and up here on the dashboard there's the edit page button. It doesn't say edit post, just page. Also we can check here in the source. If we take a look at the body clause, it says home, page template default, page, and page ID. Now I can be sure that I'm using one of the page php templates. Usually there are several, but now we have only one. It's a page php, I'm sure. When you look at our sketch, you can identify that we don't have a title here. It doesn't look at all like our sketch. Let's edit this in the Gutenberg editor. Here is the title and I can remove it like this, update, and take a look. It's gone. Great. What I can do now is just continue editing this page without the title. For that, I need some images. The first block was an image with some text. I'm going to the dashboard and I'm going to upload the images I've prepared for this website and that's here in the media button. I'm just going to say add new images, select the files. It's going to be this one, all these and another side open. Wonderful. Now you can wait here, I'll be back when these are uploaded. It's going to take awhile. Great. Our images are uploaded now we can find them here in the library. This is where your media files are all going to be organized. Month after month, you can see them in a list or in grid. Well, I'm going back to the page. Let me check here. Edit page and I'm building the first block. It's going to be combination of media and text. I'm going to remove this one and this one. All of them. Just click here on the little points, remove block. I'm creating a new one and I need media and text. I want it to be full width on the page. Here in the library, I need this photo. Select. Then I want to change the background color and here is going to be my paragraph. First is going to be a heading and it's going to be like this. I'm going to say biocomputing, something like this. Then I need another buck going to be a paragraph and I just need some dummy text. Here in text generator, copy, paste, and update. Let's take a look. This is our first block, an image with a paragraph and a title, maybe put the title being bigger. But now I don't know how much is the distance between this and the header. If you remember in the sketch they're right after each other. Let me try and test it with the web inspector. I'm going to check this. It's going to be a header and I'm going to give it a background color. You see here there's always this gap that is supposed to be a place for the title. Now I can go and do height of the header, put it eight rem. But there's still this gap. Of course I can do some hacking and go back here in the edit page mottos and say, "I want this block to have a CSS class," no title like so. Then call a CSS class in the style sheet and say, put the top margin of minus five rem or something like that." But I don't want to change this every time that there was a responsive page or that there was a different header. I want to have a complete new template for the front page where I don't have to worry if there is a title, if have deleted it, and if I have put enough minus units on the top margin of this first paragraph. I'm not going to do that. I'm going to create a completely new template. This is how we're going to do that. For demo purposes, I'm putting back in a title biocomputing, this is what this website is going to be about. Update, view page. Here it is. The title that we don't need. I'm checking in the web tools. It's not the H1, it's the header, the whole element that we don't need. It has a class entry header. I'm supposing since we are using the page php template, let's take a look. In our FTP Client, it's not here in our child theme. We have to go up to the 2019 parent theme. Here are all our templates. Here's the page php, view in our editor and here it is. It says, "The template for displaying all single posts." Well, a page content is treated as one single post because it's not going to change, it 's not going to be a list of chronological posts, it's just this one post that is supposed to be a static site, which is not going to change. Then it's simple, get header, show me the header. Then here is the section content area, our main site content. Then the famous WordPress loop, it says, While have post, the post. It means, if you have any posts or while you have any post to show, any content, then show me. Here we don't find our title, we find this get template part. It means get me this part that is in the folder, template parts, sub-folder content, in the file contents slug page, and then show the comments. But we're not going to use it on our website and this showing of the content and get the footer. That's it. This is a simple page template.
9. Customizing Your Content: Part 2: What are we going to do now? We are getting this template part back in our FTP Client. Here is the folder template parts and here is the content. In this content it says, this is for showing the excerpt. This is for the case we don't have any content on this page. This is the content page that is interesting to us for our page php. This is the content of a single post, one single article that we've written, and this is the general content. This is, for example, if we have 20 posts, it's going to show 20 posts. Let's take a look at this content page that's so interesting to us. We are hunting the header and here it is. It says here template part for displaying page content in page php. This means content page php is a small module of the page php. It's like a small lego part of this whole page house that we are building with legos. Here is the header that we don't need. I'm not going to delete it here because I'm then going to ruin it for the other pages that want to have a header. I'm going to just copy this. For that I'm creating here a new file and calling it one. I'm not very imaginative with this. I'm just copying and expanding. Then I'm going to open it and here it is, empty. Now, I can just calmly select all of this, copy, and put it in here. It's basically the same content page, just content page 1. I don't need this header here. That's why I'm going to remove it. Save. We have changed this little tiny module, close it and go back here, confirm that we've created it. Now we have this little tiny module that we've created for the pages that don't have this title, this header with the title in it. Now we have to go back to this page php and create a copy of it. I'm dragging this page down onto my computer to save it and to have it to work with. I'm opening it in my editor and creating a completely new file, which is going to be our new custom page template for the pages without a title. The only thing I need for that is a comment which says template name. I'm going to call this page, no title page. Sorry, typo as usual. Close the comment and close the brackets. Now, I'm going to save this here and call it no title page, for now, we might change that afterwards. I'm also saving it here and the only thing I have to do now is copy all of this from the page, copy, and put it in here like so. Now because here is the closing brackets, I have to delete it here and now I have this template. But it's going to the content page and I just need the content page 1, like so. I'm going to close all of this and just upload the, sorry, I have to refresh here. The no title page, just have to upload it here into my chart theme. I just want to check one more thing here with the template, page 1 that is has a content. Yes, it does. Now let's see what happened in the browser. Whoops. This is our page. Let's refresh. Now you can see here in the page attributes we have a template to choose from. The second one is the one we created. It's called No Title Page. If I update here and view the page, wow, I have it now without the title. That's wonderful. This is how you create a custom page template and upload it to your chart theme. You just have to take care of the template parts that you need to change if they're in your code of the default page php file. Now let's build some blocks. I'll click here on edit page and don't mind this ad title. It's just there. I can't remove it for now. I suppose that the dashboard and the editor have their separate CSS style sheets and I'm not going to be bothered by that now. I just need a new block which is going to be heading, products, and then it's going to be centered and updates. Then I need a new block with three columns. I have created the columns block and I'll have to select it here and increase the number of columns to three. I also want it to be the full width over the page. I've prepared some text here, just going to copy it. Copy and paste and then I need an image. Here, no, here. It's a bit difficult to select blocks in this Gutenberg editor. I hope they're going to come up with some optimization. But for now, I just put an image here and you see it inserted the image above the paragraph and I need it below. I click on this arrow. I'm going to choose one from the media library. They're not pretty, but they're just doing fine for the demo purposes, add the caption, copy and paste. You can see here that I can link an image to a media file, another media file and an attachment page and a custom URL. Of course, I can always add an extra CSS class, but I'm just going to leave this like so and then continue to do for the next block as well. I'll see you when we're finished with this block.
10. Customizing Your Content: Part 3: So this is our product, three columns block. As you can see I can hardly read this caption, so I'm going to change that. I'm going here to edit page, and selecting this image like so, and adding an advanced CSS class here, we going to say product image, update. Just to check here, this element should be yes, fig caption as usual. I'm heading to my CSS file and then adding this class product image, and then fig caption, of course, and say color white, save, update on the server and, check in the browser. You see, I have changed only this particular image. So I have to go one level up, and this is the whole block. Going here and assigning this block an extra CSS class, I'm going to call it product block, update. Go to my CSS style, and then say product block. Save, update and check in the browser. Yes, now all three captions are visible in color white. This title I don't like it. It's a bit too on the left, so I have to check in this block if I can put an extra margin on the left. So we are selecting this one. I'm adding here a class of product, block, title. One has to be pretty specific about this update. Go to my style sheets and then right, product-block-title. Let's say margin-left, it's going to be five rem, save and update, and check in the browser. Nothing happened because I probably forgot to put here the important rule. There must be some other ruling that is overruling this editor CSS style, so update. Here we go. It's in the middle. I could do also the CSS style of removing this line here. It's probably before element. It's this one. I'm just going to copy the style and say copy. Say here, display none. Maybe better put. No, I don't want these lines anywhere in my site. So yes and update, is gone. You see it's pretty great how you can just add an extra class into an element of a block or the block itself. Then just go to style sheet and style this class. That's it.
11. Customizing Your Content: Part 4: The following block is pretty simple. We just need two columns, one is with the text, another with the button. Here, I'm going to add new, and two columns. Let me check if they're two. Yes, they are. I want it to be full width, and here I'm going to put a heading, H3. It's going to say, "Want To Know More About Our Company." Here I need a button and in the text I'm going to put Learn More. I want the background color to be more to turquoise and brighter, so update. They don't like this combination, they think the contrast is too old to read, but I'm going to leave it for now. Here I want to put the link to our About page. I have created a dummy page about us just to have a place holder, see there's nothing in it. But I need this URL here, copy, go back to the front page, edit. Where is the button? Here, going to put the URL link, so update. I want this block to have a light gray background color, and I can do that here. I have to put an advanced CSS class, I'm going to put more block, update, head to my style sheet. In the Style Sheet, I'm going to add the class more block, and say background color, light gray, save and update, and check in the browser view page. What happened? It's light gray, but I can't read anything and the button is way up there. So go back to this style sheet and say more block also has to have a color of gray, update that and check, yes. But I also wanted to have a padding top, top and bottom, but top. Heading 2.2, run. Let's see how that looks like. Yes, moving too fast, update. Yeah, that looks a bit better, but maybe a bit less of padding, and I want this button to be more on the right. I need this class here. I think it's going to be, yes, WP block button. I'm going to just say edit as HTML, and copy this WP block button, copy, go back to Style Sheet and then say padding top is going to be 2.1, and padding bottom is going to be 1rem. Then I need this more WP block button class. It has to have a margin left, let's say 4rem. Let's see how this looks like now. Refresh, that looks a bit more acceptable. But you know, there's a lot of detail work to do, would have a states and all these nicer things like I want to have more of an emphasis in this block, etc. Next block is just a copy of this one. It has a text on the left and an image on the right. We're going to do exactly just that. Here's our first block. I'm going to select it here, and in this menu, I'm going to select Duplicate. That's it. I have to change the media to show on the right, and I also have to change this image here, select, pretty easy, and then I want to push it all the way below this more block. I forgot here, I wanted to stack above each other on mobile, so people can read view page. As I've guessed, we have this nice new block, but this block here is this one. This div has a margin. Also, this div has a margin, this one has a bottom and this one has a top. Now the above one is the more block, we have it already in our Style Sheet. I'm just going to say here more block, I need the margin bottom to be zero, and just in case I'm going to put important. I don't want anything messing with that. Now I have to go back, first I'm going to save this, yes, and have to go back. You'll see if I refresh, it's still there. But I can show you here in the inspect element. This div does not have a margin bottom anymore, but this one has a margin top. What do we do? We just add a class to this last row that we just made, so I select it here and say is going to be, update. In the Style Sheet, put the anemone to work, and say margin top is going to be zero and it's going to be important. Let's check. Yes, FileZilla we didn't forget, view page, yes. This is how it's supposed to look like, great. We just have to tweak a bit between creating blocks, and creating extra CSS classes for them and working on them in your Style Sheet, and don't forget the important rule. Now the last block is going to be the Contact and the Google Maps.
12. Customizing Your Content: Part 5: To create our last row of content on the front page, we need a Contact Form and Google Maps. We're taking a small excursion here, we're adding a plugin it's called, Contact Form 7. A very popular plugin because it's integrated with so many other services. You can have a recapture. You can use it with PayPal and Stripe. Very, very versatile plugin. So I'm going to activate it. Here going to the Settings, I have Contact form 1, I can leave this name here because I'm going to have only one contact form for now. I'm copying the short code here and building it into my front page in the left column. So I'm adding here a new block, two columns, and I'm just going to type the short code here inside of the left column and then check because I want it to be full-page, of course, full width, sorry, and Update. If I take a look here, here is our form, great. It's just a bit, you know, the fields are too big and these labels usually you have to leave them above. It's very helpful for the accessibility for people who use keyboard to navigate the site, just to leave this label above. But for this website, I think it's going to be okay if I just put it inside as a placeholder text. To do that, I'm going to the dashboard again here in Contact, Contact Forms, and Edit. I want this text to be here in this area as a place holder, I can delete this one, then use Text as the field form. It's going to be called, your name. Your name. Default value, the texts that I've copied from above. Use this text as the place holder of the field. I'm going to add an ID attribute because later, if I build another contact form on this website, I'd like to have the possibility to call only this specific field. It's going to be, your name, "Insert Tag". Here it is, I can delete this one. For the e-mail, it's pretty much the same. Copy, I can delete this and put Email. Required field, it's going to be your e-mail. Default value, the one that I copied from above. Use this text as Placeholder. ID, your e-mail, "Insert Tag". I can delete this one. The form says that it has some kind of a conflict. I don't know, everything's fine. Like so, Save form, we are back. Subject, like so. Yes, I have to do is here as well. Text, and it's not going to be a required field. It's just going to be subject. Default value, subject. Use this text. Subject, "Insert Tag" and delete here. Then the last one is, your message. I'm just going to delete here. Text area, exactly. I'm going to leave it here. Default value, your message. Use this. I'm not going to use a text ID attribute. So this is our new form Save, and take a look at the page. Let me see. It looks different now and I just have to style it here. To style this field, I'm just going to open my web tools here and check. This is my form, form class, wcpf7-form, really nice. Each of the elements is here in a paragraph, the label and the span class, and within the span class is the input element which I want to style. So I'm going here, I'm just going to push this up so it's easier to read. Input type text and et cetera. I want the background to be gray, so I'm just going to write aaa. I don't want any border here, none. That's it. I'm going to copy this first [inaudible] text. Be sure to select everything. Go back to style sheet, enter this, and then copy this class from the form. Edit HTML, and the class is here. I'm copying this, putting it into my style sheet as a class, and of course it's a typo like so. I'm going to save it here and then go back because I want also to change this color here. It's going to be also gray. I'll just pull it a bit up like this, maybe a bit more up. Yes. Then I wanted it to be Source Sans Pro and sans-serif, and the line height five. I have to copy all of this. Well, not everything but, yes, I'm trying here. Copy and then edit here and add the class. Okay, save it. Confirm. Go back to the browser. Also, I want to change the font size. It's going to be 8.8rem. I'm going to copy this here. Copy and paste it here, wpcf7-form as the class. Of course, I have to put it in front of each of these elements. Don't let anyone tell you differently. Which of course, it's easier to do that in SAS, but we are doing things manually here. Yes, I don't have to write this here again, I'm just going to add font-size, rem and everything that does not appear, probably going to be an important rule. Let's see what we've done till now. Refresh. It basically looks like I wanted it to look like. Okay, maybe not the button, but you get the point. You just have to open your Web Tools, choose the Elements, see their classes, and then edit them in your style sheet. Let's go to the Google Maps, our second column. To embed Google Map here into our website, we just go to Google Maps, enter the address of the business that we want to show, and then maybe clicking this marker and then Share. Let me just check if this is going to work, sometimes it doesn't and I don't know why. We can't embed map, it didn't work now. I'm going to refresh this like so, and then click on "Share", embed a map, and now it worked. So here I can even choose, I'm going to copy this, "Copy HTML" and then choose even the size. I'm going to put the size that I have seen that I need. It's 650 width and 595 height, and then "Copy HTML" again with the dimensions. Go to Our Page, Edit page, and edit the column. So here I click on this Add block button and have a column selected and I immediately want to add an additional CSS class, I'm going to call it Google map, just to have the possibility to style this map. I'm going to update here. Then in here, I'm going to choose the custom HTML block. So like this, enter the code from the Google Maps page and then Update. View Page, and this is our map. We can style it again with our extra CSS class, but basically now we have added Google Maps with the address of the business. That was it with the content customization, we're moving on to the header.
13. Customizing the Header Logo Menu: To customize our header, we of course need a logo here. I have prepared a little demo here of the default logo for this theme. I'm going to customize a site identity and here I'm going to select a logo from the media library. I've uploaded an image where they're found as a template on the Internet, and I'm going to select it. It says here, "Crop image, " publish, close the customizer, and this is the entire logo for the 2019 theme. As I understood, the theme has an emphasis on text and writing, so, it's great for journalists, bloggers, and authors, but for my website and the branding purposes, I really need a bigger logo. I'm going back to the customizer to remove this one, remove logo, publish again, and then I'm heading to the media library to add new file, my SVG logo. I like SVG, it's vectorized file and it doesn't lose quality while scaling, but WordPress doesn't like it here. It says, it's not permitted for security reasons, which is great because someone is taking care of file security in WordPress, but then it means that I am going to have to use in a plugin, and I found one which is called SVG support. Here it is. Going to install it and activate. Going to the settings, if I take a look, I'm not going to change anything. It says, "Restrict to administrators," which is good, only I am allowed to deal with SVGs and upload them, so, that's it. I'm going back to the media library, and adding again my SVG logo, open, and here it is, it worked. This is good. Going back to the customizer, site identity, select "Logo", here it is, select, and it says, "Crop image, " but it says, "There has been an error. We don't like it still." Well, I have looked for the reason for this and have found that in the 2019 parent theme, in the functions PHP file, there is a function considering this custom logo, I'm going to find it here, custom logo. It says, "The height is 190 pixels, the width is 190 pixels," so, it's a square, and then there is Flex width set to false, there is no flexible width, and there is no flexible height, so, I have to change this. I have looked through the WordPress org forums and found in the codecs, there is this code here which I'm going to copy, and I have put it as an answer to many questions of customizing the 2019 logo, so, I'm heading to my functions PHP file in the child theme here, and I'm going to add this code and adapt it to my theme. So here under this enqueue WP child theme function, which ends here with these brackets, I'm going to paste this function and then change the name, I'm going to call it L-yaks custom logo, and it's going to be 100 pixels high and 400 pixels wide. The flexible width is set to true and I want also the flexible height to be set to true. Like so, and that's it. I believe I'm going to delete this. Oh, I have to change this here, of course. It's my L-yaks custom logo function. Prefix, yes, I think that's it. I'm going to save this and upload it to the server, and take a look here. Again, customize, site identities, select "Logo", "SVG file", and I'm just going to skip cropping. That's it, publish, close, and here we are. We have this tiny little logo here that is not at all what we need. We also have the site title that I don't want to appear here. But now you know how we are going to change this. We're going to head to the style CSS file and adapt the header to our needs. We just needed to create the possibility of a flexible size of the logo in our functions PHP. So see you in a bit in our style CSS. Just quick before we dive into our style sheet, there's one essential structural element that is missing. Its our menu here. I'm going here to menus and giving my menu a name. I'm going to call it top menu. It's going to be on top of a page, create menu. It's going to be a primary menu. Save it. Then I'm going to add all of these pages that I have created as place holders to the menu here, and then just drag and drop them in the order that I want them to be in the menus. This is coming here, like so, and save menu, take a look, it's here. It's taking over the styling of the links, but we want it to be here on the right side and to have smaller typography. So I'm going to open my web tools and take a look. This is the nav ID site navigation. I'm going to edit as HTML copy this, put it in my style sheet. I have to create a new chapter here called headers styling and paste this ID, and say, I want you to float right and I also want you to have a font size of 0.7 RM, save. Of course, on the server too return back to the browser. Checking this and something happened here. We have the right typography, but we don't want this minimized menu here. This is for the mobile site and just in a minute, I'm going to explain you what happened. So next, I want to remove the site title here and copying this class site title, going to my style sheet, adding it here and saying class site typo. Please display none. Save and check. It's gone and now we have our tinny tiny round logo that is absolutely not doing its job for our website. Let me check it's the site logo here. Yes, this is the positioning of the div. Inside the div is the link which has border radius transition box shadow all of this, I'm just going to copy it, put it in my style sheet, and say, I want the border radius to be zero. Okay, this is fine. I don't want any box shadows and so displays block and width and height. I don't think there's 50 pixel is going to be fine. Transition, please none. Save and check what we've done. Here. It is teeny-tiny and of course the hover state, I have to change that one as well. Here in the inspector, I'm going to take a look at the hover state here and it says site logo has a box shadow black. It also has a border, the yellow border that we have on all the links on our page. So I have to change it in my style sheet here. I'm going to say to paste this here and say box shadow none, transition none and border color has to be transparent. But this is an important rule because it's a general rule for all the links. This has to be more specific. Save on the server and checking the browser and the hover state, is now gone. This is good. We just now have to deal with the size of this logos. If I put here, just check this is 50 pixels. If I put 400. Then the logo is gone and this is because the position of this site logo div is way back to the right. So I have to say auto and yes, the height also has to be changed. It's going to be 100 pixels. Yes, and the position has to change of course too. I'm not going to do that. This is way too big. So I'm going to the style sheets and saying the style sheet, I need maybe 80 percent of this width, height. So and if I take a look, the logo is gone, so I have to change this site logo position, and then also what's important here is that the business is a media query for big screens that are everything that is above 768 pixels. I have to take care of that too and here, I'm going to copy this. I'm going to say right auto and important, but also I have to add the media query and min-width is 768 pixels. Yes then, and I need some brackets here and here save and check and here's is our logo. Now, we only need to position this in the right position with padding and margin and I also have to change the color of this header, that this is the header, ID masthead. I'm just going to copy this. Put it in the style sheet. It's an ID and I think the background color, I have written it down here on note. Background color is 353942. I have styled this a little bit further. So for the header, I have increased the height here, not only changed the color and for the navigation, which is only a button. Now, I have also changed the margin top, so it's more enlightened with the logo. And there are no limits for the CSS styling in your style sheet. I just wanted to show you which function in the functions file is responsible for displaying the size of this logo, and then we've changed a bit the CSS to remove the radius, removed the borders, and the position so that we can show that entire logo. Here now we're heading to see what happened with the navigation. I've started also a little bit for the mobile version. But what I wanted to show you is actually a little trick. I was going crazy over this display of the button on the desktop version on big screens and I went through entire word pristine files. What I've found is actually the here in 2019 itself in JavaScript files, there is a file called priority menu JS. When I took a look inside to see which function is actually playing with this navigation menu, found out that there is a typo and it says navivation instead of navigation. Now, I don't know if this was purposeful name. I just checked it out, applauded the corrected version and now you see if I refresh our main navigation menu is here. So that was basically it we have finished the rod, the first creation or customization of the 2019 to make it look like the theme we're supposed to work on and now of course, the little details are going to happen making the topography images nice, etcetera. There are no limits to that. I just wanted to show you how to work with the functions files, with the template files, with the CSS to create the theme that you would want to have for your website.
14. Conclusion: Now we have seen how the template files, the functions PHP, the CSS style sheet, the widgets, and the plugins can work together to customize the 2019, or the other themes for that matter, and how to adapt it to our own design. I hope you have found some valuable tips for your own customizations, and I really look forward to seeing your WordPress site and what you have done to customize it. Happy customizing.