title
WordPress Theme Tutorial (Part 1)

description
Join my new advanced WordPress course at the lowest price: https://learnwebcode.com/courses/ Let's learn how to create a WordPress theme by hand, from scratch. We'll write our own HTML, CSS, and PHP to create the basic foundation for a WordPress theme. To view a complete list of the WordPress theme development lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/create-wordpress-theme-from-scratch/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me for updates on new videos or projects: Instagram: https://www.instagram.com/javaschiff/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/ Twitch: https://www.twitch.tv/learnwebcode

detail
{'title': 'WordPress Theme Tutorial (Part 1)', 'heatmap': [{'end': 820.436, 'start': 803.404, 'weight': 0.74}, {'end': 1081.538, 'start': 1050.206, 'weight': 0.809}, {'end': 1165.159, 'start': 1148.819, 'weight': 0.712}], 'summary': 'This wordpress theme tutorial covers creating a theme from scratch, outputting content dynamically, customizing header and footer, optimizing for responsiveness, and implementing css styling to create a fully functional wordpress theme.', 'chapters': [{'end': 75.011, 'segs': [{'end': 45.765, 'src': 'embed', 'start': 20.972, 'weight': 0, 'content': [{'end': 28.335, 'text': 'Obviously, one of the strengths of WordPress is that it allows people who would rather not write a single line of code to still create an amazing Web site.', 'start': 20.972, 'duration': 7.363}, {'end': 37.479, 'text': 'But if you are using a prebuilt theme, I guarantee you that in the future there will be changes that you wish you could make to your Web site,', 'start': 29.414, 'duration': 8.065}, {'end': 43.283, 'text': "even if it's as simple as changing the way title text is output or moving an element up or down the page a bit.", 'start': 37.479, 'duration': 5.804}, {'end': 45.765, 'text': 'I can guarantee you that that moment will come.', 'start': 44.004, 'duration': 1.761}], 'summary': 'Wordpress allows non-coders to create amazing websites, but changes to prebuilt themes may be necessary in the future.', 'duration': 24.793, 'max_score': 20.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I20972.jpg'}, {'end': 80.733, 'src': 'embed', 'start': 54.533, 'weight': 1, 'content': [{'end': 60.459, 'text': "But I'm here to tell you that with just a bit of basic understanding, all of a sudden themes are not intimidating.", 'start': 54.533, 'duration': 5.926}, {'end': 62.04, 'text': 'Code is not intimidating.', 'start': 60.619, 'duration': 1.421}, {'end': 68.147, 'text': 'And you will have a firm grasp of which file to go to and what code to write to make something happen.', 'start': 62.481, 'duration': 5.666}, {'end': 75.011, 'text': 'So, whether you love coding or you really just love WordPress and want to learn a bit more about how themes work,', 'start': 69.028, 'duration': 5.983}, {'end': 76.812, 'text': "let's roll up our sleeves and get started.", 'start': 75.011, 'duration': 1.801}, {'end': 80.733, 'text': "So currently we're looking at a fresh install of WordPress.", 'start': 77.512, 'duration': 3.221}], 'summary': 'With basic understanding, coding and themes are not intimidating. gain firm grasp to write code and make things happen.', 'duration': 26.2, 'max_score': 54.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I54533.jpg'}], 'start': 0.285, 'title': 'Creating wordpress theme from scratch', 'summary': 'Emphasizes the benefits of understanding wordpress themes for making future changes, and highlights the potential challenges of using prebuilt themes, focusing on the importance of having a basic understanding.', 'chapters': [{'end': 75.011, 'start': 0.285, 'title': 'Creating wordpress theme from scratch', 'summary': 'Discusses the importance of understanding wordpress themes for making future changes, emphasizing the benefits of having a basic understanding and the potential challenges of using prebuilt themes.', 'duration': 74.726, 'highlights': ['The importance of understanding WordPress themes for making future changes is emphasized, with the potential challenges of using prebuilt themes highlighted, as it can lead to the need to hire someone for making changes (e.g., changing title text or moving elements on the page).', 'The benefits of having a basic understanding are stressed, as it can make themes and code less intimidating, enabling individuals to have a firm grasp of which file to go to and what code to write to make something happen.', 'The chapter discusses the strengths of WordPress in allowing non-coders to create amazing websites, but highlights the inevitability of future changes and the potential difficulties in making those changes without a basic understanding of WordPress themes.']}], 'duration': 74.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I285.jpg', 'highlights': ['Understanding WordPress themes is crucial for making future changes, as using prebuilt themes may require hiring someone for changes.', 'Having a basic understanding makes themes and code less intimidating, enabling individuals to know which file to go to and what code to write.', 'WordPress allows non-coders to create great websites, but future changes may be difficult without a basic understanding of themes.']}, {'end': 468.449, 'segs': [{'end': 143.695, 'src': 'embed', 'start': 93.399, 'weight': 1, 'content': [{'end': 97.221, 'text': 'And we need to navigate to a certain themes folder so we can create a new theme.', 'start': 93.399, 'duration': 3.822}, {'end': 100.764, 'text': 'So that folder lives within WP content.', 'start': 97.981, 'duration': 2.783}, {'end': 103.207, 'text': "And then there's a folder named themes.", 'start': 101.785, 'duration': 1.422}, {'end': 109.634, 'text': 'So if we go into the themes folder, we can see that these are the three themes that are provided with WordPress out of the box.', 'start': 103.327, 'duration': 6.307}, {'end': 111.036, 'text': 'But we want to create a new one.', 'start': 109.995, 'duration': 1.041}, {'end': 114.52, 'text': "So just create a new folder and you can name it anything you'd like.", 'start': 111.456, 'duration': 3.064}, {'end': 118.044, 'text': 'I will name this learning WordPress.', 'start': 114.96, 'duration': 3.084}, {'end': 125.094, 'text': "Next, we'll go inside this new folder that we just created and we want to create two new files.", 'start': 119.309, 'duration': 5.785}, {'end': 127.075, 'text': "So I'll use a text editor.", 'start': 125.874, 'duration': 1.201}, {'end': 131.458, 'text': 'And the first file that we want to create is named index dot PHP.', 'start': 127.695, 'duration': 3.763}, {'end': 139.585, 'text': 'OK And the second file that we want to create is named style dot CSS.', 'start': 134.661, 'duration': 4.924}, {'end': 143.695, 'text': "So let's review.", 'start': 143.035, 'duration': 0.66}], 'summary': 'Navigate to themes folder, create new theme, add index.php and style.css files.', 'duration': 50.296, 'max_score': 93.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I93399.jpg'}, {'end': 221.842, 'src': 'embed', 'start': 197.429, 'weight': 0, 'content': [{'end': 203.591, 'text': "Now let's hop over to the index PHP file and just create a heading that says hello world.", 'start': 197.429, 'duration': 6.162}, {'end': 205.872, 'text': "And that's all we need for now.", 'start': 204.731, 'duration': 1.141}, {'end': 207.152, 'text': 'So go ahead and click save.', 'start': 205.912, 'duration': 1.24}, {'end': 215.8, 'text': 'And then, if we go back to our WordPress admin and we click on appearance in the sidebar, we can then choose our new theme,', 'start': 207.352, 'duration': 8.448}, {'end': 219.121, 'text': 'so we can see that currently the theme name 2014 is activated.', 'start': 215.8, 'duration': 3.321}, {'end': 221.842, 'text': "But here's our new theme named Learning WordPress.", 'start': 219.501, 'duration': 2.341}], 'summary': 'Creating a new theme named learning wordpress in the index php file of wordpress, replacing the theme 2014.', 'duration': 24.413, 'max_score': 197.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I197429.jpg'}, {'end': 308.719, 'src': 'embed', 'start': 286.042, 'weight': 4, 'content': [{'end': 295.31, 'text': "So for the time being, we're hopping into PHP so we can write code that talks to WordPress and gathers our content so we can output it on the page.", 'start': 286.042, 'duration': 9.268}, {'end': 299.953, 'text': 'Now, the first bit of PHP that we will write together is referred to as the loop.', 'start': 296.05, 'duration': 3.903}, {'end': 303.435, 'text': "The loop is central to WordPress and it's aptly named.", 'start': 300.493, 'duration': 2.942}, {'end': 308.719, 'text': "What we're going to do is loop through all of the different posts and output them on our page.", 'start': 303.695, 'duration': 5.024}], 'summary': 'Using php to create a loop in wordpress to gather and display content.', 'duration': 22.677, 'max_score': 286.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I286042.jpg'}, {'end': 418.161, 'src': 'embed', 'start': 387.428, 'weight': 5, 'content': [{'end': 391.951, 'text': 'So we can say H2 title should go here.', 'start': 387.428, 'duration': 4.523}, {'end': 402.372, 'text': 'And now if we refresh our page, We can see that there are two titles which corresponds with the number of blog posts we have to.', 'start': 394.573, 'duration': 7.799}, {'end': 408.395, 'text': 'Now watch how easy WordPress makes it to add the dynamic title in here instead of this dummy text.', 'start': 402.972, 'duration': 5.423}, {'end': 418.161, 'text': 'All you need to do is drop into PHP and simply say the title WordPress has a function named the title which makes it this easy.', 'start': 408.915, 'duration': 9.246}], 'summary': 'Wordpress dynamically adds titles to blog posts using php function the_title.', 'duration': 30.733, 'max_score': 387.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I387428.jpg'}, {'end': 468.449, 'src': 'embed', 'start': 443.48, 'weight': 3, 'content': [{'end': 449.004, 'text': "Now, let's go ahead and make these titles links so that if you click on one, then you're only viewing that blog post.", 'start': 443.48, 'duration': 5.524}, {'end': 454.8, 'text': "So we'll create a hyperlink surrounding that text.", 'start': 451.837, 'duration': 2.963}, {'end': 463.008, 'text': 'And then instead of putting a URL in here, WordPress has a really neat function named the permalink.', 'start': 455.38, 'duration': 7.628}, {'end': 465.587, 'text': "And it's that simple.", 'start': 464.827, 'duration': 0.76}, {'end': 468.449, 'text': 'So now if we refresh, we see that each title is a link.', 'start': 465.607, 'duration': 2.842}], 'summary': 'Titles now function as links, enabling users to view individual blog posts easily.', 'duration': 24.969, 'max_score': 443.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I443480.jpg'}], 'start': 75.011, 'title': 'Wordpress theme creation and content output', 'summary': 'Covers creating a new wordpress theme by adding files and activating it, resulting in the display of a new theme. it also explains using php to create a loop in wordpress to dynamically output post titles and content on a webpage, achieving the goal of displaying two post titles and contents on the home page.', 'chapters': [{'end': 241.281, 'start': 75.011, 'title': 'Creating a new wordpress theme', 'summary': "Covers the process of creating a new wordpress theme by navigating to the themes folder, creating a new folder, adding two new files (index.php and style.css) with specific content, and activating the new theme in the wordpress admin panel, resulting in the display of the newly created theme 'learning wordpress' with the message 'hello, world.'", 'duration': 166.27, 'highlights': ['Navigating to the themes folder within WP content to create a new theme folder.', "Creating two new files, index.php and style.css, within the new theme folder to define the theme's structure and appearance.", "Activating the new theme in the WordPress admin panel and observing the display of the newly created theme 'Learning WordPress' with the message 'Hello, world.'"]}, {'end': 468.449, 'start': 242.061, 'title': 'Wordpress loop and content output', 'summary': 'Explains how to use php to create a loop in wordpress to dynamically output post titles and content on a webpage, achieving the goal of displaying two post titles and contents on the home page.', 'duration': 226.388, 'highlights': ['The loop in PHP is essential for WordPress as it allows looping through all the posts and outputting them on the page. The loop in PHP is crucial for WordPress as it enables looping through all the posts and displaying them on the page, achieving the goal of outputting the titles and text for the posts on the home page.', "WordPress provides functions like 'the_title' and 'the_content' to easily add dynamic titles and contents to the webpage. WordPress offers functions such as 'the_title' and 'the_content' that make it simple to add dynamic titles and contents to the webpage, resulting in the easy addition of relevant titles and content for each blog post.", "The use of the 'the_permalink' function in WordPress enables creating hyperlinks for the post titles. By using the 'the_permalink' function in WordPress, hyperlinks for the post titles can be created, allowing each title to be a clickable link, contributing to the goal of making the titles links for viewing specific blog posts."]}], 'duration': 393.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I75011.jpg', 'highlights': ["Activating the new theme in the WordPress admin panel and observing the display of the newly created theme 'Learning WordPress' with the message 'Hello, world.'", 'Navigating to the themes folder within WP content to create a new theme folder.', "Creating two new files, index.php and style.css, within the new theme folder to define the theme's structure and appearance.", "The use of the 'the_permalink' function in WordPress enables creating hyperlinks for the post titles.", 'The loop in PHP is essential for WordPress as it allows looping through all the posts and outputting them on the page.', "WordPress offers functions such as 'the_title' and 'the_content' that make it simple to add dynamic titles and contents to the webpage."]}, {'end': 1060.293, 'segs': [{'end': 542.131, 'src': 'embed', 'start': 515.231, 'weight': 0, 'content': [{'end': 526.599, 'text': 'In our theme folder, you can just create a new file named header PHP and also another file named footer PHP.', 'start': 515.231, 'duration': 11.368}, {'end': 534.925, 'text': "So, now that we created these empty header and footer PHP files, if we refresh our page, we can see that there's no longer a header and footer,", 'start': 527.28, 'duration': 7.645}, {'end': 537.047, 'text': 'because these files are completely empty.', 'start': 534.925, 'duration': 2.122}, {'end': 542.131, 'text': "So now let's add a bit of code to these so we can have full control over our header and footer.", 'start': 537.507, 'duration': 4.624}], 'summary': 'Create empty header and footer php files in theme folder to gain control over website layout.', 'duration': 26.9, 'max_score': 515.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I515231.jpg'}, {'end': 667.218, 'src': 'embed', 'start': 562.124, 'weight': 1, 'content': [{'end': 571.35, 'text': "if we're opening the HTML tag in our header, that means we'll probably want to go to our footer dot PHP file to close this HTML tag.", 'start': 562.124, 'duration': 9.226}, {'end': 575.046, 'text': "So in footer, we'll close HTML.", 'start': 571.77, 'duration': 3.276}, {'end': 576.088, 'text': 'Now back to header.', 'start': 575.347, 'duration': 0.741}, {'end': 580.753, 'text': 'We also want to include a head section.', 'start': 577.209, 'duration': 3.544}, {'end': 584.068, 'text': "Now we'll get to that in just a moment.", 'start': 582.847, 'duration': 1.221}, {'end': 586.809, 'text': 'But we also want to open the body element.', 'start': 584.668, 'duration': 2.141}, {'end': 590.991, 'text': "Now, again, if we're opening our body element and header, we need to close it somewhere.", 'start': 587.289, 'duration': 3.702}, {'end': 594.773, 'text': "So in footer, we'll go ahead and close the body element.", 'start': 591.271, 'duration': 3.502}, {'end': 597.274, 'text': "Now let's hop back over to header PHP.", 'start': 595.393, 'duration': 1.881}, {'end': 601.296, 'text': "There's a few more boring but completely necessary tasks that we need to take care of.", 'start': 597.314, 'duration': 3.982}, {'end': 606.179, 'text': 'So in the head section, we need to define what character set we want to use.', 'start': 601.677, 'duration': 4.502}, {'end': 619.201, 'text': "Now, instead of including a value here, we're just going to let WordPress do the work for us using this function.", 'start': 608.171, 'duration': 11.03}, {'end': 627.508, 'text': "Okay And we also let's include a line to make our site responsive.", 'start': 619.221, 'duration': 8.287}, {'end': 634.415, 'text': "So we'll say viewport content equals the width of the current device.", 'start': 628.209, 'duration': 6.206}, {'end': 639.755, 'text': "And let's include a very simple title.", 'start': 637.914, 'duration': 1.841}, {'end': 643.958, 'text': 'So this is not optimal for search engine optimization.', 'start': 640.776, 'duration': 3.182}, {'end': 647.34, 'text': "We'll learn how to optimize the title in future lessons.", 'start': 644.378, 'duration': 2.962}, {'end': 650.522, 'text': "But for today, let's just very simply output the name of the site.", 'start': 647.42, 'duration': 3.102}, {'end': 654.225, 'text': "So we'll say blog info name.", 'start': 650.622, 'duration': 3.603}, {'end': 657.767, 'text': 'Drop out of PHP again.', 'start': 656.586, 'duration': 1.181}, {'end': 659.696, 'text': 'Close the title.', 'start': 659.076, 'duration': 0.62}, {'end': 667.218, 'text': 'And then finally, before we close out our head section, we want to use a WordPress function named WP head.', 'start': 660.136, 'duration': 7.082}], 'summary': 'Creating a basic html structure with php for wordpress, including header and footer.', 'duration': 105.094, 'max_score': 562.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I562124.jpg'}, {'end': 833.746, 'src': 'heatmap', 'start': 803.404, 'weight': 0.74, 'content': [{'end': 803.984, 'text': "It's that simple.", 'start': 803.404, 'duration': 0.58}, {'end': 812.731, 'text': 'So now if we refresh, you can see that if we go to example post to only view that post, we can click the header to go back to the homepage.', 'start': 804.345, 'duration': 8.386}, {'end': 815.032, 'text': 'Now just a quick note.', 'start': 813.731, 'duration': 1.301}, {'end': 820.436, 'text': 'if you wanted to actually change the phrasing of your site name or of your tagline or your description,', 'start': 815.032, 'duration': 5.404}, {'end': 824.219, 'text': "you don't do that within the PHP files of your theme.", 'start': 820.436, 'duration': 3.783}, {'end': 825.92, 'text': 'You do that in the WordPress dashboard.', 'start': 824.259, 'duration': 1.661}, {'end': 833.746, 'text': 'So for example, you would go to settings, And then you can see that this field controls the title of your site and this field controls the tagline.', 'start': 826.24, 'duration': 7.506}], 'summary': 'In wordpress, site name, tagline, and description are changed in the dashboard, not php files.', 'duration': 30.342, 'max_score': 803.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I803404.jpg'}, {'end': 917.386, 'src': 'embed', 'start': 891.334, 'weight': 6, 'content': [{'end': 896.636, 'text': "and inside it we'll include a bit of text that simply outputs the name of our site and then the year.", 'start': 891.334, 'duration': 5.302}, {'end': 905.48, 'text': "So blog info, name, and then we'll include the copyright symbol and the year.", 'start': 897.437, 'duration': 8.043}, {'end': 917.386, 'text': "Oops Okay, so we're using the PHP function named date and then we're passing it a parameter of capital Y and that will output the year.", 'start': 905.5, 'duration': 11.886}], 'summary': "Using php function 'date' to output site name and year.", 'duration': 26.052, 'max_score': 891.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I891334.jpg'}, {'end': 967.544, 'src': 'embed', 'start': 939.586, 'weight': 7, 'content': [{'end': 945.07, 'text': "So we'll hop over to our style.css file and we'll just write a bit of basic CSS.", 'start': 939.586, 'duration': 5.484}, {'end': 952.555, 'text': "So we'll say font family, Arial Sans Serif, font size, 14 pixels, color.", 'start': 945.17, 'duration': 7.385}, {'end': 959.019, 'text': 'How about a dark gray? Okay, so if we refresh, we see that literally nothing changes.', 'start': 952.575, 'duration': 6.444}, {'end': 967.544, 'text': "And that's because we need to make sure that this style.css file is actually being included when visitors view our page.", 'start': 959.259, 'duration': 8.285}], 'summary': 'Adding basic css to style.css file with font family arial sans serif, font size 14 pixels, and dark gray color.', 'duration': 27.958, 'max_score': 939.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I939586.jpg'}], 'start': 468.569, 'title': 'Customizing header and footer and optimizing wordpress theme', 'summary': 'Explains how to customize wordpress header and footer by creating separate files and optimizing a theme for responsiveness, using wordpress functions, and adding css styling.', 'chapters': [{'end': 606.179, 'start': 468.569, 'title': 'Customizing header and footer in wordpress', 'summary': 'Explains how to customize the header and footer in wordpress by creating separate header.php and footer.php files, including necessary html elements and defining character set.', 'duration': 137.61, 'highlights': ['Creating separate header.php and footer.php files allows full control over the header and footer elements. By creating new header.php and footer.php files, full control can be exercised over the header and footer elements.', 'Including necessary HTML elements in header.php and closing them in footer.php ensures proper structure for all web pages. The inclusion of necessary HTML elements in header.php and the closing of these elements in footer.php ensures the proper structure for all web pages.', 'Defining the character set in the head section of header.php is crucial for specifying the character encoding for the web page. Defining the character set in the head section of header.php is crucial for specifying the character encoding for the web page.']}, {'end': 1060.293, 'start': 608.171, 'title': 'Optimizing wordpress theme', 'summary': 'Covers the process of optimizing a wordpress theme, including making the site responsive, using wordpress functions for title and description, adding footer content, and including css styling.', 'duration': 452.122, 'highlights': ['The chapter covers the process of optimizing a WordPress theme Covers the process of optimizing a WordPress theme, including making the site responsive, using WordPress functions for title and description, adding footer content, and including CSS styling.', 'Using WordPress function to make the site responsive Instructs to use a function in WordPress to make the site responsive by setting the viewport content to the width of the current device.', "Utilizing WordPress functions for title and description Describes the use of WordPress functions 'blog info name' and 'blog info description' to output the name and tagline of the website respectively.", "Adding footer content using a custom element Involves creating a custom element with a class of 'site footer' to include the name of the site and the current year, using the 'blog info name' function and the PHP function 'date'.", 'Including CSS styling by adding a style.css file Discusses the process of adding CSS styling by creating a style.css file with basic CSS properties such as font family, font size, and color.']}], 'duration': 591.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I468569.jpg', 'highlights': ['Creating separate header.php and footer.php files allows full control over the header and footer elements.', 'Including necessary HTML elements in header.php and closing them in footer.php ensures proper structure for all web pages.', 'Defining the character set in the head section of header.php is crucial for specifying the character encoding for the web page.', 'The chapter covers the process of optimizing a WordPress theme, including making the site responsive, using WordPress functions for title and description, adding footer content, and including CSS styling.', 'Using WordPress function to make the site responsive by setting the viewport content to the width of the current device.', "Describes the use of WordPress functions 'blog info name' and 'blog info description' to output the name and tagline of the website respectively.", "Involves creating a custom element with a class of 'site footer' to include the name of the site and the current year, using the 'blog info name' function and the PHP function 'date'.", 'Discusses the process of adding CSS styling by creating a style.css file with basic CSS properties such as font family, font size, and color.']}, {'end': 1382.505, 'segs': [{'end': 1137.068, 'src': 'embed', 'start': 1076.757, 'weight': 0, 'content': [{'end': 1081.538, 'text': 'So now we can hop back to our style.css file and continue to improve the appearance of our layout.', 'start': 1076.757, 'duration': 4.781}, {'end': 1087.94, 'text': "So let's go ahead and give the text a little bit more line height in between each line.", 'start': 1082.678, 'duration': 5.262}, {'end': 1090.802, 'text': "Let's try this value.", 'start': 1087.96, 'duration': 2.842}, {'end': 1093.583, 'text': "Also, let's change the color of the links.", 'start': 1091.702, 'duration': 1.881}, {'end': 1099.145, 'text': "Here's a nice blue value.", 'start': 1097.605, 'duration': 1.54}, {'end': 1103.707, 'text': "So if we refresh, we can see that there's a bit more spacing between each line.", 'start': 1099.686, 'duration': 4.021}, {'end': 1104.748, 'text': 'The links are now using blue.', 'start': 1103.747, 'duration': 1.001}, {'end': 1107.189, 'text': "Let's go ahead and give the site a max width.", 'start': 1105.088, 'duration': 2.101}, {'end': 1118.407, 'text': "So we'll create a comment that says general layout, container, max width.", 'start': 1109.235, 'duration': 9.172}, {'end': 1122.291, 'text': "Let's go with either 920 or 960.", 'start': 1118.507, 'duration': 3.784}, {'end': 1126.677, 'text': "We'll center it horizontally, give it a bit of padding for smaller screens.", 'start': 1122.291, 'duration': 4.386}, {'end': 1135.646, 'text': 'Okay Now, if we refresh, nothing will happen because we need to add this container element to our HTML.', 'start': 1129.54, 'duration': 6.106}, {'end': 1137.068, 'text': "So there's a corresponding element.", 'start': 1135.686, 'duration': 1.382}], 'summary': 'Improving layout appearance with increased line height, blue links, and a max width of 920 or 960, centered and padded for smaller screens.', 'duration': 60.311, 'max_score': 1076.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I1076757.jpg'}, {'end': 1188.652, 'src': 'heatmap', 'start': 1148.819, 'weight': 2, 'content': [{'end': 1157.61, 'text': "And then in our footer file, So at the very end, right before wp-footer, we'll add the closing div for container.", 'start': 1148.819, 'duration': 8.791}, {'end': 1160.373, 'text': 'And we can indent this just to stay organized.', 'start': 1158.511, 'duration': 1.862}, {'end': 1165.159, 'text': 'So now if we refresh, we can see that our max width is taking effect.', 'start': 1160.754, 'duration': 4.405}, {'end': 1167.89, 'text': "Now let's give ourselves another task.", 'start': 1166.308, 'duration': 1.582}, {'end': 1173.836, 'text': "Let's add subtle borders underneath the header in between each post and then above the footer.", 'start': 1168.09, 'duration': 5.746}, {'end': 1183.186, 'text': "So in style CSS we can create another section called this header and we'll target the site header and just give it a border bottom.", 'start': 1174.677, 'duration': 8.509}, {'end': 1188.652, 'text': 'How about two pixels solid and medium gray value.', 'start': 1184.067, 'duration': 4.585}], 'summary': 'Footer file modified to add closing div, max width effect observed, border added to header', 'duration': 27.898, 'max_score': 1148.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I1148819.jpg'}, {'end': 1276.666, 'src': 'embed', 'start': 1240.455, 'weight': 3, 'content': [{'end': 1246.722, 'text': "So now we'll say article post border bottom.", 'start': 1240.455, 'duration': 6.267}, {'end': 1251.476, 'text': "How about two pixels? But instead of solid, we'll go dotted.", 'start': 1248.575, 'duration': 2.901}, {'end': 1257.939, 'text': "And how about a lighter color? So if you refresh, we can see that that's now in place.", 'start': 1252.757, 'duration': 5.182}, {'end': 1262.48, 'text': "Let's write a little bit of extra code so that the last blog post doesn't get the border.", 'start': 1258.359, 'duration': 4.121}, {'end': 1264.881, 'text': 'Only all of the ones besides the last post.', 'start': 1262.64, 'duration': 2.241}, {'end': 1276.666, 'text': 'So we can simply write article post last of type border bottom none.', 'start': 1266.202, 'duration': 10.464}], 'summary': 'Css code added to style article posts with two-pixel dotted border bottom.', 'duration': 36.211, 'max_score': 1240.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I1240455.jpg'}, {'end': 1377.599, 'src': 'embed', 'start': 1344.81, 'weight': 4, 'content': [{'end': 1352.156, 'text': 'And also, we can create a file named single.php, and that will control the way that individual post pages are displayed.', 'start': 1344.81, 'duration': 7.346}, {'end': 1355.739, 'text': "So we'll learn that there's much more than just index.php.", 'start': 1353.257, 'duration': 2.482}, {'end': 1360.643, 'text': "There's a whole slew of files that you can include in your theme to really get fine-grained control.", 'start': 1355.899, 'duration': 4.744}, {'end': 1367.589, 'text': 'Now, in our next lesson specifically, we will learn how to insert the navigation menu right towards the bottom of our header,', 'start': 1361.143, 'duration': 6.446}, {'end': 1372.273, 'text': 'so we can hop back and forth between the home page and maybe an about page, so on and so forth.', 'start': 1367.589, 'duration': 4.684}, {'end': 1377.599, 'text': 'So thank you very much for watching this first video in this video series of how to create a WordPress theme.', 'start': 1372.833, 'duration': 4.766}], 'summary': 'Learn how to customize wordpress theme files and add navigation menu.', 'duration': 32.789, 'max_score': 1344.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I1344810.jpg'}], 'start': 1060.613, 'title': 'Implementing css styling and creating a wordpress theme', 'summary': 'Details implementing css styling in a website layout, enhancing structure and aesthetics, and creating a wordpress theme by creating files and controlling different parts of the site, along with a mention of an upcoming lesson on inserting a navigation menu.', 'chapters': [{'end': 1276.666, 'start': 1060.613, 'title': 'Implementing css styling in website layout', 'summary': 'Details the step-by-step process of integrating css styling into a website layout, including adding a style sheet, adjusting font, color, layout, and borders, resulting in a visually enhanced website with improved structure and aesthetics.', 'duration': 216.053, 'highlights': ['Implemented CSS styling to change the font, color, and layout of the website, resulting in an improved appearance. Improved appearance of the website', 'Added a max width to the site layout, centered it horizontally, and created padding for smaller screens, resulting in a visually structured website. Structured the website layout', 'Added subtle borders underneath the header, in between each post, and above the footer, enhancing the visual delineation of website sections. Enhanced visual delineation of website sections', 'Implemented a border in between each blog post and excluded the border for the last blog post, resulting in a visually separated blog post layout. Separated the blog post layout visually']}, {'end': 1382.505, 'start': 1278.386, 'title': 'Creating a wordpress theme', 'summary': 'Explains how to create a wordpress theme, including creating files in the themes folder, such as index.php, page.php, and single.php, to control different parts of the site. it also mentions the upcoming lesson on inserting a navigation menu.', 'duration': 104.119, 'highlights': ['Creating files in the themes folder, like index.php, page.php, and single.php, allows for fine-grained control of different parts of the site.', 'Upcoming lesson on inserting a navigation menu at the bottom of the header allows for easy navigation between different pages.']}], 'duration': 321.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k7olvEeBM2I/pics/k7olvEeBM2I1060613.jpg', 'highlights': ['Implemented CSS styling to change the font, color, and layout of the website, resulting in an improved appearance.', 'Added a max width to the site layout, centered it horizontally, and created padding for smaller screens, resulting in a visually structured website.', 'Added subtle borders underneath the header, in between each post, and above the footer, enhancing the visual delineation of website sections.', 'Implemented a border in between each blog post and excluded the border for the last blog post, resulting in a visually separated blog post layout.', 'Creating files in the themes folder, like index.php, page.php, and single.php, allows for fine-grained control of different parts of the site.', 'Upcoming lesson on inserting a navigation menu at the bottom of the header allows for easy navigation between different pages.']}], 'highlights': ['Understanding WordPress themes is crucial for making future changes, as using prebuilt themes may require hiring someone for changes.', 'Having a basic understanding makes themes and code less intimidating, enabling individuals to know which file to go to and what code to write.', 'WordPress allows non-coders to create great websites, but future changes may be difficult without a basic understanding of themes.', "Activating the new theme in the WordPress admin panel and observing the display of the newly created theme 'Learning WordPress' with the message 'Hello, world.'", 'Navigating to the themes folder within WP content to create a new theme folder.', "Creating two new files, index.php and style.css, within the new theme folder to define the theme's structure and appearance.", "The use of the 'the_permalink' function in WordPress enables creating hyperlinks for the post titles.", 'The loop in PHP is essential for WordPress as it allows looping through all the posts and outputting them on the page.', "WordPress offers functions such as 'the_title' and 'the_content' that make it simple to add dynamic titles and contents to the webpage.", 'Creating separate header.php and footer.php files allows full control over the header and footer elements.', 'Including necessary HTML elements in header.php and closing them in footer.php ensures proper structure for all web pages.', 'Defining the character set in the head section of header.php is crucial for specifying the character encoding for the web page.', 'The chapter covers the process of optimizing a WordPress theme, including making the site responsive, using WordPress functions for title and description, adding footer content, and including CSS styling.', 'Using WordPress function to make the site responsive by setting the viewport content to the width of the current device.', "Describes the use of WordPress functions 'blog info name' and 'blog info description' to output the name and tagline of the website respectively.", "Involves creating a custom element with a class of 'site footer' to include the name of the site and the current year, using the 'blog info name' function and the PHP function 'date'.", 'Discusses the process of adding CSS styling by creating a style.css file with basic CSS properties such as font family, font size, and color.', 'Implemented CSS styling to change the font, color, and layout of the website, resulting in an improved appearance.', 'Added a max width to the site layout, centered it horizontally, and created padding for smaller screens, resulting in a visually structured website.', 'Added subtle borders underneath the header, in between each post, and above the footer, enhancing the visual delineation of website sections.', 'Implemented a border in between each blog post and excluded the border for the last blog post, resulting in a visually separated blog post layout.', 'Creating files in the themes folder, like index.php, page.php, and single.php, allows for fine-grained control of different parts of the site.', 'Upcoming lesson on inserting a navigation menu at the bottom of the header allows for easy navigation between different pages.']}