title
How to Create a Custom WordPress Theme - Full Course

description
Learn how to create a custom WordPress theme. You will learn a process that you can use to convert any HTML/CSS template into a WordPress theme. 🔗 HTML/CSS template: https://github.com/wilsmex/blog-site-template 🎥 Course from Andrew Wilson. Check out his YouTube channel: https://youtube.com/followandrew ⭐️ Course Contents ⭐️ ⌨️ (00:00) Introduction ⌨️ (00:51) Responsive Template Overview ⌨️ (04:28) WordPress Theme Structure & Location ⌨️ (05:51) Create Required Empty Files / Folders for Theme ⌨️ (12:39) Create Theme Screenshot.png file ⌨️ (13:05) WordPress Template Hierarchy ⌨️ (14:50) Setting up Style.css File Required Information ⌨️ (17:10) Activating the New Theme ⌨️ (18:41) Create Theme Home Page Template ⌨️ (21:50) Enqueue Styles ⌨️ (25:55) Add wp_head() to Head Section ⌨️ (33:30) Enqueue Scripts ⌨️ (35:02) Add wp_footer() to Foot Section ⌨️ (41:25) Create header.php & footer.php Files ⌨️ (44:41) Add Dynamic Page Titles ⌨️ (48:63) WordPress Auto Thumbnail Sizes ⌨️ (50:50) Create Home Page in WordPress Admin Panel ⌨️ (53:20) The WordPress Loop ⌨️ (56:24) Dynamic Page Title Heading ⌨️ (58:01) Create WordPress Menu Area ⌨️ (01:03:36) Dynamic Menus ⌨️ (01:16:16) Customize Site Logo Upload & Name ⌨️ (01:25:12) Add WordPress Posts in Admin Panel ⌨️ (01:07:11) Add Feature Image Thumbnail Support ⌨️ (01:29:06) Create Single Post Template File ⌨️ (01:33:52) Add Post Meta Data ⌨️ (01:40:39) Comments & Comments Templates ⌨️ (01:53:45) Post Archives Page Templates ⌨️ (01:57:34) Blog Archive & index.php Templates ⌨️ (02:03:39) Post Thumbnails ⌨️ (02:07:16) Pagination Links ⌨️ (02:10:10) Page Template File ⌨️ (02:25:37) 404 Template (Page Not Found) ⌨️ (02:28:50) Add Searching ⌨️ (02:30:50) A Few Extras and Where to Go -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'How to Create a Custom WordPress Theme - Full Course', 'heatmap': [{'end': 7510.725, 'start': 7416.219, 'weight': 1}], 'summary': 'Learn to create a custom wordpress theme by converting an html template, setting up essential theme files, managing css and javascript, customizing menus, integrating dynamic content, implementing comments functionality, debugging, customizing archive pages, and adding user-customizable widget areas with practical examples and detailed explanations.', 'chapters': [{'end': 1086.226, 'segs': [{'end': 272.884, 'src': 'embed', 'start': 241.813, 'weight': 0, 'content': [{'end': 245.596, 'text': 'as you will need to have WordPress installed and running in order to create the custom theme.', 'start': 241.813, 'duration': 3.783}, {'end': 251.802, 'text': "So assuming those two things have already complete, let's go ahead and complete this process.", 'start': 246.117, 'duration': 5.685}, {'end': 260.19, 'text': 'Now, I will make this particular theme available in the description so that if you want to follow on exactly with my same template, you can.', 'start': 252.242, 'duration': 7.948}, {'end': 264.215, 'text': "But the process here really applies to any sort of template that you're going to be creating.", 'start': 260.551, 'duration': 3.664}, {'end': 266.978, 'text': "So let's get started with the first required template files.", 'start': 264.555, 'duration': 2.423}, {'end': 272.884, 'text': 'Okay, now I want to first show you the structure of a WordPress theme and where those files need to be uploaded.', 'start': 268.14, 'duration': 4.744}], 'summary': 'Guide on creating a custom wordpress theme, applicable to any template.', 'duration': 31.071, 'max_score': 241.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo241813.jpg'}, {'end': 774.244, 'src': 'embed', 'start': 747.217, 'weight': 4, 'content': [{'end': 750.318, 'text': 'So a screenshot is typically just a little screenshot of what the theme looks like.', 'start': 747.217, 'duration': 3.101}, {'end': 754.739, 'text': "If you were to put this on the WordPress store, it would show up, when you're searching for themes,", 'start': 750.698, 'duration': 4.041}, {'end': 756.74, 'text': 'as a little thumbnail of what that theme would look like.', 'start': 754.739, 'duration': 2.001}, {'end': 758.2, 'text': "So I'll go ahead and add that next.", 'start': 757.02, 'duration': 1.18}, {'end': 762.622, 'text': "Okay, so I've gone ahead and just taken a quick screenshot here.", 'start': 759.821, 'duration': 2.801}, {'end': 766.763, 'text': "So if I click on screenshot, you can see this is the screenshot that I've added into the site.", 'start': 762.662, 'duration': 4.101}, {'end': 768.942, 'text': "And that's how it looks.", 'start': 767.842, 'duration': 1.1}, {'end': 774.244, 'text': "So let's go ahead and now look at one more thing here, and this is called the template hierarchy.", 'start': 769.362, 'duration': 4.882}], 'summary': 'Adding a screenshot to a wordpress theme for display, and discussing the template hierarchy.', 'duration': 27.027, 'max_score': 747.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo747217.jpg'}, {'end': 817.26, 'src': 'embed', 'start': 783.086, 'weight': 1, 'content': [{'end': 787.547, 'text': "But I want to show you kind of a detailed look at what's known as the template hierarchy.", 'start': 783.086, 'duration': 4.461}, {'end': 791.949, 'text': "So you can see over here on the right-hand side, it's a little easier to read this from right to left, I think.", 'start': 788.148, 'duration': 3.801}, {'end': 796.45, 'text': 'But the index.php file in WordPress is the fallback template file.', 'start': 792.429, 'duration': 4.021}, {'end': 799.111, 'text': "Then there's one you can create called singular.", 'start': 797.19, 'duration': 1.921}, {'end': 806.214, 'text': 'So if your single blog posts and your pages look the exact same, you can just create one called singular that essentially will act for both.', 'start': 799.531, 'duration': 6.683}, {'end': 808.976, 'text': "And there's one in here called archive.", 'start': 807.095, 'duration': 1.881}, {'end': 813.778, 'text': 'You can see and archive will catch is the catch all for all archive pages.', 'start': 809.096, 'duration': 4.682}, {'end': 817.26, 'text': 'But if you want to get more specific, you can create one called category.', 'start': 814.218, 'duration': 3.042}], 'summary': 'Detailed look at wordpress template hierarchy: index.php, singular, archive, and category.', 'duration': 34.174, 'max_score': 783.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo783086.jpg'}, {'end': 886.216, 'src': 'embed', 'start': 860.242, 'weight': 5, 'content': [{'end': 866.065, 'text': 'If you want to get more specific, you can create one called front-page.php to use instead.', 'start': 860.242, 'duration': 5.823}, {'end': 868.146, 'text': "So that's the last file we'll create here.", 'start': 866.525, 'duration': 1.621}, {'end': 875.771, 'text': 'But again, you can kind of reference this dialog to see all the various types of template files you can create for your WordPress theme.', 'start': 868.547, 'duration': 7.224}, {'end': 886.216, 'text': "So I'll jump back here to my code, and we will create one final file in here called front-page.php and add that one in there.", 'start': 876.251, 'duration': 9.965}], 'summary': 'Create front-page.php as the last file to specify wordpress theme templates.', 'duration': 25.974, 'max_score': 860.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo860242.jpg'}, {'end': 1038.13, 'src': 'embed', 'start': 1008.162, 'weight': 2, 'content': [{'end': 1009.723, 'text': "So I'm gonna go ahead and save that file.", 'start': 1008.162, 'duration': 1.561}, {'end': 1016.566, 'text': 'And now that I have that file with all these required sort of metadata, if you will in your style sheet,', 'start': 1010.683, 'duration': 5.883}, {'end': 1019.988, 'text': "I'm gonna log in here to my WordPress site in the backend.", 'start': 1016.566, 'duration': 3.422}, {'end': 1022.869, 'text': "So I'll come down in here and I'll say login.", 'start': 1020.668, 'duration': 2.201}, {'end': 1029.352, 'text': "And I've just got this set up with a little username and password for my Andrew Andrew.", 'start': 1023.549, 'duration': 5.803}, {'end': 1031.907, 'text': 'And this is the WordPress backend.', 'start': 1030.426, 'duration': 1.481}, {'end': 1038.13, 'text': "So now when I come over here to my appearance and over to my themes, you'll notice that there is a new theme here.", 'start': 1032.208, 'duration': 5.922}], 'summary': 'Uploaded file with metadata, logged into wordpress, new theme added.', 'duration': 29.968, 'max_score': 1008.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1008162.jpg'}], 'start': 0.56, 'title': 'Creating custom wordpress themes', 'summary': 'Covers the process of converting an html template into a custom wordpress theme, creating a fully responsive theme based on bootstrap, setting up essential theme files, and understanding the template hierarchy, with reference to specific template files and prerequisites for having a wordpress setup and installed.', 'chapters': [{'end': 57.982, 'start': 0.56, 'title': 'Building custom wordpress theme', 'summary': "Covers the process of converting an existing html template into a custom wordpress theme, with the speaker's 20 years of web development experience and the invitation to join his youtube channel for similar content.", 'duration': 57.422, 'highlights': ['The speaker has over 20 years of experience in web development, with a history of using WordPress since 2005 or 2006.', "The tutorial focuses on converting a design into a custom WordPress theme, with an invitation to join the speaker's YouTube channel for similar content.", 'The process covered in the series can be applied to any existing HTML template for conversion into a WordPress theme.']}, {'end': 458.128, 'start': 58.643, 'title': 'Creating a custom wordpress theme', 'summary': 'Discusses the process of creating a fully responsive custom wordpress theme based on bootstrap, including the structure of a wordpress theme, required template files, and the necessary folders and subfolders, and assumes the prerequisites of having a wordpress setup and installed.', 'duration': 399.485, 'highlights': ['The chapter discusses the process of creating a fully responsive custom WordPress theme based on Bootstrap, including the structure of a WordPress theme, required template files, and the necessary folders and subfolders, and assumes the prerequisites of having a WordPress setup and installed. The chapter details the process of creating a fully responsive custom WordPress theme, covering the structure of a WordPress theme, required template files, and the necessary folders and subfolders, and assumes the prerequisites of having a WordPress setup and installed.', 'The design is fully responsive, based off of Bootstrap, with a mobile media query and important pages like home, post, blog archive, and contact us pages. The design is fully responsive and based off of Bootstrap, featuring important pages such as home, post, blog archive, and contact us pages.', 'The WordPress theme is created by splitting the various sections of the design into individual files, such as the header, content, footer, sidebar, and menu. The WordPress theme is created by splitting the various sections of the design into individual files, including the header, content, footer, sidebar, and menu.', 'The necessary folders and subfolders for the WordPress theme include assets with CSS, fonts, images, and JavaScript, as well as classes, ink, template parts, and templates. The necessary folders and subfolders for the WordPress theme include assets with CSS, fonts, images, and JavaScript, as well as classes, ink, template parts, and templates.']}, {'end': 722.31, 'start': 458.891, 'title': 'Wordpress theme file setup', 'summary': 'Discusses the setup of essential files required for a wordpress theme, including the css and index.php files, as well as additional template files like 404.php, archive.php, comments.php, footer.php, functions.php, header.php, page.php, readme.txt, search.php, single.php, and style.css, each serving specific purposes in the theme customization.', 'duration': 263.419, 'highlights': ['The chapter explains the essential files required for a WordPress theme, including the CSS and index.php files, as well as additional template files like 404.php, archive.php, comments.php, footer.php, functions.php, header.php, page.php, readme.txt, search.php, single.php, and style.css. Essential files for WordPress theme setup.', 'The index.php file serves as the fallback file if WordPress cannot locate a specific template file in the template hierarchy, making it a required file for theme setup. Importance of index.php as a fallback file.', 'The style.css file is the master style sheet for the website, serving as the second required file for WordPress theme setup. Significance of style.css as the master style sheet.']}, {'end': 1086.226, 'start': 723.01, 'title': 'Creating a wordpress theme', 'summary': 'Covers creating a wordpress theme, including adding required files, creating a screenshot, understanding the template hierarchy, adding metadata to the style.css file, and previewing the theme in the wordpress backend.', 'duration': 363.216, 'highlights': ['Adding metadata to the style.css file, including Theme Name, Text Domain, version, description, tags, author, and author URI, is essential for displaying theme details in the WordPress backend. Adding metadata to the style.css file is crucial for displaying theme details in the WordPress backend, including Theme Name, Text Domain, version, description, tags, author, and author URI.', 'Understanding the template hierarchy in WordPress, including fallback template file (index.php), singular, archive, category, and front-page.php, offers a variety of ways to customize theme appearance for different types of pages and posts. Understanding the template hierarchy in WordPress provides various ways to customize theme appearance for different types of pages and posts, such as singular, archive, category, and front-page.php.', 'Adding a screenshot to the theme folder is important, as it serves as a thumbnail representation of the theme when viewed in the WordPress store, aiding in attracting users searching for themes. Adding a screenshot to the theme folder is crucial as it serves as a thumbnail representation of the theme in the WordPress store, aiding in attracting users searching for themes.']}], 'duration': 1085.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo560.jpg', 'highlights': ['The tutorial focuses on converting a design into a custom WordPress theme, applicable to any existing HTML template.', 'The design is fully responsive, based off of Bootstrap, featuring important pages such as home, post, blog archive, and contact us pages.', 'The necessary folders and subfolders for the WordPress theme include assets with CSS, fonts, images, and JavaScript, as well as classes, ink, template parts, and templates.', 'The chapter explains the essential files required for a WordPress theme, including the CSS and index.php files, as well as additional template files like 404.php, archive.php, comments.php, footer.php, functions.php, header.php, page.php, readme.txt, search.php, single.php, and style.css.', 'Adding metadata to the style.css file is crucial for displaying theme details in the WordPress backend, including Theme Name, Text Domain, version, description, tags, author, and author URI.', 'Understanding the template hierarchy in WordPress provides various ways to customize theme appearance for different types of pages and posts, such as singular, archive, category, and front-page.php.', 'Adding a screenshot to the theme folder is crucial as it serves as a thumbnail representation of the theme in the WordPress store, aiding in attracting users searching for themes.']}, {'end': 1540.099, 'segs': [{'end': 1113.59, 'src': 'embed', 'start': 1087.361, 'weight': 1, 'content': [{'end': 1091.683, 'text': 'It works as long as you have one called screenshot.png in your theme folder.', 'start': 1087.361, 'duration': 4.322}, {'end': 1093.4, 'text': "And that's pretty much it.", 'start': 1092.52, 'duration': 0.88}, {'end': 1097.903, 'text': 'So once you have those required files, you should see your theme here up here.', 'start': 1093.721, 'duration': 4.182}, {'end': 1100.464, 'text': "Now I'm going to go ahead and activate this theme.", 'start': 1098.523, 'duration': 1.941}, {'end': 1106.227, 'text': 'So all you have to do is click activate and this will essentially make my new theme become the active theme.', 'start': 1100.724, 'duration': 5.503}, {'end': 1112.51, 'text': "So now I'm going to switch back to the main front end and you will see that there's really nothing here.", 'start': 1106.687, 'duration': 5.823}, {'end': 1113.59, 'text': "It's completely blank.", 'start': 1112.57, 'duration': 1.02}], 'summary': 'Activating a new theme with screenshot.png makes it the active theme', 'duration': 26.229, 'max_score': 1087.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1087361.jpg'}, {'end': 1198.01, 'src': 'embed', 'start': 1169.195, 'weight': 0, 'content': [{'end': 1170.655, 'text': "And I'm just simply going to save.", 'start': 1169.195, 'duration': 1.46}, {'end': 1172.096, 'text': "So I'm going to say Command-S and save.", 'start': 1170.675, 'duration': 1.421}, {'end': 1176.558, 'text': "Now you'll notice that over here in the right in the preview, I did have some things appear.", 'start': 1172.916, 'duration': 3.642}, {'end': 1185.043, 'text': "So what I'm seeing now is some of the content, and I'm actually seeing my Bootstrap CSS and HTML files being loaded,", 'start': 1177.198, 'duration': 7.845}, {'end': 1187.824, 'text': "but I'm not seeing my custom CSS file being loaded.", 'start': 1185.043, 'duration': 2.781}, {'end': 1194.328, 'text': 'And that is because if we look up here in our head section, notice that we are linking to Bootstrap.', 'start': 1188.685, 'duration': 5.643}, {'end': 1198.01, 'text': 'Let me just wrap these lines here so we can see that a bit better.', 'start': 1194.348, 'duration': 3.662}], 'summary': 'Preview shows bootstrap css and html files loaded, but custom css file is not loaded.', 'duration': 28.815, 'max_score': 1169.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1169195.jpg'}], 'start': 1087.361, 'title': 'Custom wordpress theme setup and enqueuing wordpress css and javascript files', 'summary': 'Demonstrates setting up a custom wordpress theme, including activating the theme, fleshing out template files, and addressing css and javascript file paths. it also discusses enqueuing wordpress css and javascript files, emphasizing benefits and creating a function to register styles.', 'chapters': [{'end': 1288.503, 'start': 1087.361, 'title': 'Custom wordpress theme setup', 'summary': 'Demonstrates the process of setting up a custom wordpress theme, including activating the theme, fleshing out wordpress template files, and addressing issues related to css and javascript file paths.', 'duration': 201.142, 'highlights': ['The process of setting up a custom WordPress theme is demonstrated, including activating the theme and fleshing out WordPress template files. The chapter covers the activation of a new custom theme and the process of fleshing out WordPress template files.', 'Issues related to CSS and JavaScript file paths are addressed, emphasizing the importance of not hard coding paths. The importance of not hard coding CSS and JavaScript paths is emphasized, with a demonstration of correcting the file path for the custom CSS file.']}, {'end': 1540.099, 'start': 1288.503, 'title': 'Enqueuing wordpress css and javascript files', 'summary': "Discusses the process of enqueuing wordpress css and javascript files, emphasizing the benefits of allowing wordpress to determine the order of loading and the use of specific functions and parameters, with a focus on creating a function to register styles and hooking it into wordpress's system.", 'duration': 251.596, 'highlights': ['The chapter discusses the process of enqueuing WordPress CSS and JavaScript files It explains the importance of enqueuing to allow WordPress to determine the loading order.', 'Emphasizing the benefits of allowing WordPress to determine the order of loading and the use of specific functions and parameters It highlights the advantages of enqueuing for WordPress to determine the loading order and the use of specific functions and parameters.', "Creating a function to register styles and hooking it into WordPress's system It details the process of creating a function to register styles and hooking it into WordPress's system, ensuring the execution of the function when WordPress runs."]}], 'duration': 452.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1087361.jpg', 'highlights': ['The process of setting up a custom WordPress theme is demonstrated, including activating the theme and fleshing out WordPress template files.', 'Issues related to CSS and JavaScript file paths are addressed, emphasizing the importance of not hard coding paths.', 'The chapter discusses the process of enqueuing WordPress CSS and JavaScript files, emphasizing the benefits of allowing WordPress to determine the order of loading.', "Creating a function to register styles and hooking it into WordPress's system is detailed, ensuring the execution of the function when WordPress runs."]}, {'end': 3307.957, 'segs': [{'end': 1571.354, 'src': 'embed', 'start': 1540.479, 'weight': 8, 'content': [{'end': 1544.341, 'text': "Okay, so we save and that looks like that's now working properly.", 'start': 1540.479, 'duration': 3.862}, {'end': 1546.302, 'text': 'So now we need to test it out.', 'start': 1545.262, 'duration': 1.04}, {'end': 1547.443, 'text': 'So, in order to test it,', 'start': 1546.402, 'duration': 1.041}, {'end': 1562.75, 'text': "we're gonna come back to the front page and we are going to delete this hard-coded style sheet and we're going to replace it with a php command here called wp underscore whoops,", 'start': 1547.443, 'duration': 15.307}, {'end': 1571.354, 'text': 'wp underscore head, which stands for wordpress head, and what this means is wordpress is going to then inject all these files by itself.', 'start': 1562.75, 'duration': 8.604}], 'summary': 'Tested wp_head command to inject files automatically.', 'duration': 30.875, 'max_score': 1540.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1540479.jpg'}, {'end': 1608.94, 'src': 'embed', 'start': 1583.099, 'weight': 0, 'content': [{'end': 1588.221, 'text': "And now you can see that there's actually quite a few extra things in here that did not used to be in my head section.", 'start': 1583.099, 'duration': 5.122}, {'end': 1590.862, 'text': 'For example, this style, this inline style tag.', 'start': 1588.241, 'duration': 2.621}, {'end': 1594.964, 'text': "There's this manifest edit URI generator.", 'start': 1591.983, 'duration': 2.981}, {'end': 1601.167, 'text': 'All this stuff WordPress injected into my head because it was coming from the WP head command.', 'start': 1595.804, 'duration': 5.363}, {'end': 1607.636, 'text': 'And then most importantly, we need to make sure that we can actually see our style sheet that we just barely loaded.', 'start': 1602.54, 'duration': 5.096}, {'end': 1608.94, 'text': 'And that one is..', 'start': 1608.298, 'duration': 0.642}], 'summary': 'Extra elements added to head section by wordpress, including inline style tag and manifest edit uri generator.', 'duration': 25.841, 'max_score': 1583.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1583099.jpg'}, {'end': 1667.238, 'src': 'embed', 'start': 1638.415, 'weight': 10, 'content': [{'end': 1643.499, 'text': 'You always just want to double check to make sure the files that you think are being loaded dynamically are in fact being loaded dynamically.', 'start': 1638.415, 'duration': 5.084}, {'end': 1647.842, 'text': "So let's come back here to our functions file.", 'start': 1644.58, 'duration': 3.262}, {'end': 1653.827, 'text': "And now we're going to essentially copy this and we're going to paste it two more times.", 'start': 1649.404, 'duration': 4.423}, {'end': 1656.69, 'text': "And then we'll just paste all these in one by one.", 'start': 1654.708, 'duration': 1.982}, {'end': 1660.753, 'text': 'So the first thing we need to do is change the name.', 'start': 1657.751, 'duration': 3.002}, {'end': 1667.238, 'text': "So I'll say Bootstrap, then we'll say, actually, this one's gonna be my custom style.", 'start': 1660.773, 'duration': 6.465}], 'summary': 'Ensure dynamic files are loaded; duplicate and customize functions for bootstrap and custom style.', 'duration': 28.823, 'max_score': 1638.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1638415.jpg'}, {'end': 1803.919, 'src': 'embed', 'start': 1758.244, 'weight': 2, 'content': [{'end': 1759.565, 'text': "That's where that version is coming from.", 'start': 1758.244, 'duration': 1.321}, {'end': 1763.528, 'text': "then I'm loading Bootstrap, then I'm loading Font Awesome.", 'start': 1760.686, 'duration': 2.842}, {'end': 1767.731, 'text': 'The problem is my style sheet is dependent on Bootstrap.', 'start': 1764.148, 'duration': 3.583}, {'end': 1775.676, 'text': "So Bootstrap has to load first, then my style sheet has to be loaded second because my style sheet is overriding Bootstrap's CSS variables.", 'start': 1767.751, 'duration': 7.925}, {'end': 1778.397, 'text': 'So I have to have that source order correct.', 'start': 1776.116, 'duration': 2.281}, {'end': 1783.581, 'text': 'And that is where that second parameter that we left as an empty array comes into play.', 'start': 1779.138, 'duration': 4.443}, {'end': 1789.766, 'text': "so let's come back here to our functions and remember this empty array right here.", 'start': 1784.361, 'duration': 5.405}, {'end': 1791.388, 'text': 'what this empty array is?', 'start': 1789.766, 'duration': 1.622}, {'end': 1793.37, 'text': "i'm going to line wrap here.", 'start': 1791.388, 'duration': 1.982}, {'end': 1796.352, 'text': 'whoops, i keep hitting the wrong command for a line wrap.', 'start': 1793.37, 'duration': 2.982}, {'end': 1798.875, 'text': 'whoops. there we go.', 'start': 1796.352, 'duration': 2.523}, {'end': 1801.137, 'text': 'it is an array of dependencies.', 'start': 1798.875, 'duration': 2.262}, {'end': 1803.919, 'text': "So, for example, I'm just going to put one parameter.", 'start': 1801.617, 'duration': 2.302}], 'summary': 'Loading bootstrap before style sheet for correct source order.', 'duration': 45.675, 'max_score': 1758.244, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1758244.jpg'}, {'end': 1849.21, 'src': 'embed', 'start': 1824.076, 'weight': 12, 'content': [{'end': 1833.523, 'text': "And now you can see that it is loading bootstrap first, then my CSS second, and then the font awesome because we've added that dependency parameter.", 'start': 1824.076, 'duration': 9.447}, {'end': 1836.882, 'text': 'Okay, back to our functions.', 'start': 1834.841, 'duration': 2.041}, {'end': 1845.609, 'text': "Now I mentioned we were going to do one more thing with that version because right now our version is hard coded, right? We've just hard coded 1.0.", 'start': 1837.723, 'duration': 7.886}, {'end': 1849.21, 'text': "So for the bootstrap, it's version 4.4.1.", 'start': 1845.609, 'duration': 3.601}], 'summary': 'Loading order: bootstrap, css, font awesome; bootstrap version 4.4.1.', 'duration': 25.134, 'max_score': 1824.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1824076.jpg'}, {'end': 2626.836, 'src': 'embed', 'start': 2601.654, 'weight': 3, 'content': [{'end': 2606.979, 'text': "So I'm gonna open up my PHP tags here, and it is called get underscore header.", 'start': 2601.654, 'duration': 5.325}, {'end': 2612.066, 'text': 'So you can see as soon as I type that in and save, sure enough, my header comes back into place.', 'start': 2608.123, 'duration': 3.943}, {'end': 2613.787, 'text': 'Let me comment that out so you can see that.', 'start': 2612.126, 'duration': 1.661}, {'end': 2617.249, 'text': "Notice that without the header, I'm just getting my content.", 'start': 2614.528, 'duration': 2.721}, {'end': 2621.492, 'text': "So if I view page source, there's nothing above and below it.", 'start': 2617.51, 'duration': 3.982}, {'end': 2623.774, 'text': 'So that looks fine there.', 'start': 2622.313, 'duration': 1.461}, {'end': 2626.836, 'text': 'And it looks like I actually have an issue with my HTML.', 'start': 2625.035, 'duration': 1.801}], 'summary': 'Using get_header function in php to display header, revealing html issue', 'duration': 25.182, 'max_score': 2601.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo2601654.jpg'}, {'end': 3047.919, 'src': 'embed', 'start': 3023.222, 'weight': 1, 'content': [{'end': 3028.726, 'text': "We'll change our theme a little bit to maybe put this header and some of these footer tags down here inside of our header and footer.", 'start': 3023.222, 'duration': 5.504}, {'end': 3035.03, 'text': "And then we're going to talk about the WordPress loop, which is how we can tell WordPress to query the database,", 'start': 3029.346, 'duration': 5.684}, {'end': 3042.355, 'text': 'pull out all of the content for the specific page and insert it dynamically into our loop or our section of content.', 'start': 3035.03, 'duration': 7.325}, {'end': 3047.919, 'text': "So we're going to be starting here with the front page, and then we'll move and do all of these separate template files one by one by one.", 'start': 3042.375, 'duration': 5.544}], 'summary': 'Changing theme layout and discussing wordpress loop for dynamic content insertion.', 'duration': 24.697, 'max_score': 3023.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo3023222.jpg'}, {'end': 3257.599, 'src': 'embed', 'start': 3224.983, 'weight': 5, 'content': [{'end': 3227.784, 'text': 'So when I come over here, we need to create the loop code.', 'start': 3224.983, 'duration': 2.801}, {'end': 3233.608, 'text': 'So this is a little bit weird the way they do this, but WordPress uses a while loop.', 'start': 3228.085, 'duration': 5.523}, {'end': 3249.616, 'text': "So what you can say is, if we have posts, okay, so if posts exist basically, then we're gonna execute this code in here.", 'start': 3234.468, 'duration': 15.148}, {'end': 3257.599, 'text': "So the next section is going to be while and then we're gonna say have posts.", 'start': 3250.797, 'duration': 6.802}], 'summary': 'Creating a while loop in wordpress to execute code if posts exist.', 'duration': 32.616, 'max_score': 3224.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo3224983.jpg'}], 'start': 1540.479, 'title': 'Wordpress style and script management', 'summary': 'Details dynamic style sheet loading, managing dependencies, setting up javascript and file structure, and wordpress theme support. it covers injecting additional files, managing dependencies, enqueuing files, and adding custom thumbnail sizes.', 'chapters': [{'end': 1778.397, 'start': 1540.479, 'title': 'Dynamic style sheet loading in wordpress', 'summary': 'Details the process of dynamically loading style sheets in wordpress using php commands, highlighting the injection of additional files and the importance of correct source order for effective styling.', 'duration': 237.918, 'highlights': ["The php command 'wp_head' in WordPress injects extra files into the head section, as observed in the page source, showcasing the dynamic loading of style sheets and additional elements.", 'The order of loading style sheets is crucial, as demonstrated by the necessity of Bootstrap loading before the custom style sheet to avoid conflicts and ensure proper styling.', 'The process involves replacing hard-coded style sheets with php commands to allow WordPress to dynamically load the files, such as the Bootstrap and Font Awesome style sheets, by specifying their paths.']}, {'end': 2199.924, 'start': 1779.138, 'title': 'Managing dependencies and dynamic parameters in wordpress', 'summary': 'Covers managing dependencies in wordpress by using empty arrays, dynamic parameters, and version control. it also demonstrates the process of registering and enqueueing styles and scripts in the header and footer.', 'duration': 420.786, 'highlights': ['Demonstrates adding dependencies to styles in WordPress by using empty arrays, making the CSS file dependent on bootstrap, and ensuring the correct loading order by adding a dependency parameter. The speaker demonstrates adding dependencies to styles in WordPress by using empty arrays and ensuring the correct loading order by adding a dependency parameter. It shows making the CSS file dependent on bootstrap, thus ensuring the correct loading order.', 'Illustrates making the theme version dynamic by creating a variable and using the WP theme command to assign the current version declared in the style sheet, thus enabling easy updates to the theme or style sheet. The transcript illustrates making the theme version dynamic by creating a variable and using the WP theme command to assign the current version declared in the style sheet, enabling easy updates to the theme or style sheet.', 'Explains the process of registering and enqueueing scripts in the footer of WordPress by using the WP nq script command and setting the last parameter to true to place it in the footer, thus ensuring correct loading. The transcript explains the process of registering and enqueueing scripts in the footer of WordPress by using the WP nq script command and setting the last parameter to true to place it in the footer, thus ensuring correct loading.']}, {'end': 2829.047, 'start': 2200.624, 'title': 'Setting up javascript and file structure', 'summary': 'Covers setting up javascript files for a website, including enqueuing files, resolving path issues, and dynamically loading header and footer files, and also demonstrates how to add dynamic title tag support using wordpress.', 'duration': 628.423, 'highlights': ['Demonstrating the process of enqueuing JavaScript files for a website, including Bootstrap, Popper, and custom JavaScript files. The speaker demonstrates the process of enqueuing Bootstrap, Popper, and custom JavaScript files, emphasizing the requirement of each and the placement within the website structure.', 'Resolving path issues for JavaScript files, including correcting directory structures and ensuring proper placement of files. The speaker resolves path issues for JavaScript files, correcting directory structures and ensuring proper placement of files to resolve path issues and enable proper loading.', "Dynamically loading header and footer files using WordPress functions 'get_header' and 'get_footer', and ensuring their proper placement within the website structure. The speaker demonstrates the process of dynamically loading header and footer files using WordPress functions 'get_header' and 'get_footer', ensuring their proper placement within the website structure for seamless functionality.", "Implementing dynamic title tag support using WordPress function 'add_theme_support' to allow WordPress to manage the title tags dynamically. The speaker implements dynamic title tag support using the WordPress function 'add_theme_support', allowing WordPress to manage the title tags dynamically for improved website functionality."]}, {'end': 3307.957, 'start': 2829.907, 'title': 'Wordpress theme support and custom thumbnail sizes', 'summary': 'Covers adding theme support for the title tag, dynamically managing title and description, adding custom thumbnail sizes for images, and preparing for implementing the wordpress loop to manage content dynamically, as well as configuring the front page.', 'duration': 478.05, 'highlights': ['Adding theme support for title tag The chapter discusses adding theme support for the title tag in WordPress, ensuring the proper display of the title on the website, and correcting the initial misspelling of the title tag.', 'Managing title and description dynamically It covers how WordPress automatically injects the title and description from the settings, allowing for dynamic management of these elements according to the type of content, such as posts or pages.', 'Adding custom thumbnail sizes for images The chapter explains the process of setting custom thumbnail sizes for images, ensuring that images uploaded within WordPress are automatically resized based on the defined dimensions, such as specifying a maximum width of 800-900 pixels.', 'Preparing for implementing the WordPress loop It mentions the preparation for implementing the WordPress loop to manage content dynamically, including the intention to remove hard-coded content and allow WordPress to handle content management.', "Configuring the front page It describes the process of configuring the front page in WordPress, including creating a specific page and instructing WordPress to use it as the website's homepage, as well as preparing for the transition of hard-coded content into WordPress."]}], 'duration': 1767.478, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo1540479.jpg', 'highlights': ["The php command 'wp_head' in WordPress injects extra files into the head section, showcasing dynamic loading of style sheets and additional elements.", 'Demonstrates adding dependencies to styles in WordPress by using empty arrays, making the CSS file dependent on bootstrap, and ensuring the correct loading order.', 'Illustrates making the theme version dynamic by creating a variable and using the WP theme command to assign the current version declared in the style sheet.', 'Explains the process of registering and enqueueing scripts in the footer of WordPress by using the WP nq script command and setting the last parameter to true.', 'Demonstrating the process of enqueuing JavaScript files for a website, including Bootstrap, Popper, and custom JavaScript files.', 'Resolving path issues for JavaScript files, including correcting directory structures and ensuring proper placement of files.', "Dynamically loading header and footer files using WordPress functions 'get_header' and 'get_footer', and ensuring their proper placement within the website structure.", "Implementing dynamic title tag support using WordPress function 'add_theme_support' to allow WordPress to manage the title tags dynamically.", 'Adding theme support for title tag in WordPress, ensuring the proper display of the title on the website, and correcting the initial misspelling of the title tag.', 'Managing title and description dynamically, allowing for dynamic management of these elements according to the type of content, such as posts or pages.', 'Adding custom thumbnail sizes for images, ensuring that images uploaded within WordPress are automatically resized based on the defined dimensions.', 'Preparing for implementing the WordPress loop to manage content dynamically, including the intention to remove hard-coded content and allow WordPress to handle content management.', "Configuring the front page in WordPress, including creating a specific page and instructing WordPress to use it as the website's homepage."]}, {'end': 4898.037, 'segs': [{'end': 3341.509, 'src': 'embed', 'start': 3309.278, 'weight': 4, 'content': [{'end': 3312.019, 'text': "Okay, so I've restarted my web server and we're back live here.", 'start': 3309.278, 'duration': 2.741}, {'end': 3319.783, 'text': 'So what we can do is we can call the post and that essentially makes WordPress query the database and fetch out a single post.', 'start': 3312.98, 'duration': 6.803}, {'end': 3324.265, 'text': "Once we've called the post, we can then call a bunch of other WordPress functions.", 'start': 3320.883, 'duration': 3.382}, {'end': 3329.267, 'text': "So I'm just gonna show you one here called the content.", 'start': 3324.625, 'duration': 4.642}, {'end': 3332.508, 'text': 'And this is one that actually grabs the content and inserts it.', 'start': 3329.847, 'duration': 2.661}, {'end': 3336.07, 'text': 'So you can see as soon as I save that, sure enough, my page now says something.', 'start': 3332.528, 'duration': 3.542}, {'end': 3341.509, 'text': 'So this content, of course, is coming from my page here.', 'start': 3336.766, 'duration': 4.743}], 'summary': 'Web server restarted, wordpress queried database for single post, content inserted.', 'duration': 32.231, 'max_score': 3309.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo3309278.jpg'}, {'end': 3381.092, 'src': 'embed', 'start': 3353.757, 'weight': 2, 'content': [{'end': 3357.9, 'text': "It really doesn't matter at this point, but I'm just going to call this homepage content.", 'start': 3353.757, 'duration': 4.143}, {'end': 3365.941, 'text': "and we'll go ahead and say update, come back here and refresh, and you can see, sure enough, that's coming in.", 'start': 3359.276, 'duration': 6.665}, {'end': 3372.466, 'text': 'Now, I want this heading here to show me the title of the current page.', 'start': 3366.682, 'duration': 5.784}, {'end': 3379.051, 'text': 'Now, because that is back here in my header php file.', 'start': 3373.347, 'duration': 5.704}, {'end': 3381.092, 'text': "there's a command in here that's called.", 'start': 3379.051, 'duration': 2.041}], 'summary': 'Updating homepage content and displaying current page title from header php file.', 'duration': 27.335, 'max_score': 3353.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo3353757.jpg'}, {'end': 3526.513, 'src': 'embed', 'start': 3499.772, 'weight': 5, 'content': [{'end': 3504.335, 'text': "So, for example, in my website, I've got a menu location over here on the left.", 'start': 3499.772, 'duration': 4.563}, {'end': 3507.117, 'text': 'Perhaps I want another one on this footer.', 'start': 3504.715, 'duration': 2.402}, {'end': 3510.439, 'text': 'Maybe I want a different menu location for the mobile.', 'start': 3507.277, 'duration': 3.162}, {'end': 3512.761, 'text': 'Right So you can set up different menu locations.', 'start': 3510.899, 'duration': 1.862}, {'end': 3516.704, 'text': "But for us, we're just going to set up two to show you how this works.", 'start': 3513.481, 'duration': 3.223}, {'end': 3519.867, 'text': "So let's come over here and I'll pull this over again.", 'start': 3517.645, 'duration': 2.222}, {'end': 3521.709, 'text': "So we're going to create an array.", 'start': 3519.887, 'duration': 1.822}, {'end': 3526.513, 'text': "So I'm just going to call this one the locations and I'll set that equal to an empty array for now.", 'start': 3521.769, 'duration': 4.744}], 'summary': 'Demonstrating setting up different menu locations, such as on the left, footer, and mobile, using an array.', 'duration': 26.741, 'max_score': 3499.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo3499772.jpg'}, {'end': 3691.643, 'src': 'embed', 'start': 3664.151, 'weight': 0, 'content': [{'end': 3666.693, 'text': "So I'll come into my pages and hit add new.", 'start': 3664.151, 'duration': 2.542}, {'end': 3669.359, 'text': "I'll call this one my about page.", 'start': 3667.639, 'duration': 1.72}, {'end': 3673.92, 'text': "And the only reason I'm doing this is just so I have something in my menu in order to show right now.", 'start': 3669.779, 'duration': 4.141}, {'end': 3675.54, 'text': "So we'll publish this.", 'start': 3674.52, 'duration': 1.02}, {'end': 3681.421, 'text': "Let's add, maybe we'll add one more and we'll call it contact us.", 'start': 3675.56, 'duration': 5.861}, {'end': 3685.522, 'text': "And we'll say contact and we'll publish that page as well.", 'start': 3682.361, 'duration': 3.161}, {'end': 3691.643, 'text': 'Okay, so now when I come back in here to my appearance menus, I have a few things over here I can add.', 'start': 3686.542, 'duration': 5.101}], 'summary': "Creating new pages for 'about' and 'contact us' and adding them to the menu.", 'duration': 27.492, 'max_score': 3664.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo3664151.jpg'}, {'end': 3743.774, 'src': 'embed', 'start': 3720.461, 'weight': 3, 'content': [{'end': 3728.031, 'text': "It's set to be displayed where that menu location is, but I of course haven't actually added the code for that menu to appear.", 'start': 3720.461, 'duration': 7.57}, {'end': 3734.349, 'text': "So that's where we'll jump back into our code editor And we're now going to go set up what's known as the primary menu.", 'start': 3728.632, 'duration': 5.717}, {'end': 3736.53, 'text': 'So that is done.', 'start': 3735.009, 'duration': 1.521}, {'end': 3739.752, 'text': 'If we recall back in our theme, we come into our header.', 'start': 3736.73, 'duration': 3.022}, {'end': 3742.734, 'text': 'Our header has that entire menu.', 'start': 3740.673, 'duration': 2.061}, {'end': 3743.774, 'text': "It's a little bit tricky here.", 'start': 3742.754, 'duration': 1.02}], 'summary': 'The speaker is discussing adding a primary menu to a theme in a code editor.', 'duration': 23.313, 'max_score': 3720.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo3720461.jpg'}, {'end': 4086.746, 'src': 'embed', 'start': 4052.911, 'weight': 10, 'content': [{'end': 4055.692, 'text': "And then let's go ahead and see what that looks like now.", 'start': 4052.911, 'duration': 2.781}, {'end': 4060.114, 'text': "Perfect So you can see now it's got the class and it has all those different classes in there.", 'start': 4056.032, 'duration': 4.082}, {'end': 4063.895, 'text': 'So that takes care of the items wrapper, the unordered list.', 'start': 4060.794, 'duration': 3.101}, {'end': 4073.76, 'text': "But as I mentioned, there's not an option in here to also affect the classes on the list item with this WP Nav menu.", 'start': 4064.296, 'duration': 9.464}, {'end': 4078.002, 'text': "In order to do that, we have to create this big, long custom walker, and it's quite complex.", 'start': 4074.28, 'duration': 3.722}, {'end': 4086.746, 'text': 'So what we have to do in order to get our classes on our list items is we actually have to do that back inside of WordPress admin.', 'start': 4078.582, 'duration': 8.164}], 'summary': 'Custom walker needed for affecting classes on list items in wordpress admin', 'duration': 33.835, 'max_score': 4052.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo4052911.jpg'}, {'end': 4153.41, 'src': 'embed', 'start': 4122.99, 'weight': 9, 'content': [{'end': 4128.094, 'text': 'OK, now you can see that I can provide a CSS class for this specific option.', 'start': 4122.99, 'duration': 5.104}, {'end': 4134.459, 'text': 'So again, the class name I need for me is the nav item right there.', 'start': 4128.755, 'duration': 5.704}, {'end': 4139.023, 'text': "So I'm going to copy nav item and we'll come over here and we'll click paste.", 'start': 4134.74, 'duration': 4.283}, {'end': 4141.484, 'text': "And now let's go ahead and save that.", 'start': 4139.804, 'duration': 1.68}, {'end': 4143.546, 'text': "So we're just going to do this on one for now.", 'start': 4142.125, 'duration': 1.421}, {'end': 4147.229, 'text': 'But you can see that my contact has the nav item on it.', 'start': 4143.587, 'duration': 3.642}, {'end': 4153.41, 'text': "So let's go back here and refresh and see if we can now see that appear here.", 'start': 4148.207, 'duration': 5.203}], 'summary': "Adding css class 'nav item' to the contact section, aiming for visual change.", 'duration': 30.42, 'max_score': 4122.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo4122990.jpg'}, {'end': 4898.037, 'src': 'embed', 'start': 4858.264, 'weight': 1, 'content': [{'end': 4860.846, 'text': 'whoops, i think i forgot a semicolon.', 'start': 4858.264, 'duration': 2.582}, {'end': 4863.568, 'text': 'yes, i did so, semicolon.', 'start': 4860.846, 'duration': 2.722}, {'end': 4866.169, 'text': 'okay. so now you can see that.', 'start': 4863.568, 'duration': 2.601}, {'end': 4870.429, 'text': 'Oh, I still have an error in there somewhere.', 'start': 4868.829, 'duration': 1.6}, {'end': 4877.411, 'text': 'Called undefined function WP get attachment source.', 'start': 4874.791, 'duration': 2.62}, {'end': 4879.292, 'text': 'So I must have spelled this wrong.', 'start': 4877.931, 'duration': 1.361}, {'end': 4886.374, 'text': 'WP get attachment image source.', 'start': 4880.692, 'duration': 5.682}, {'end': 4890.535, 'text': 'Yep, I forgot an E.', 'start': 4889.495, 'duration': 1.04}, {'end': 4891.535, 'text': 'There we go.', 'start': 4890.535, 'duration': 1}, {'end': 4895.636, 'text': "Whoops Let's see, attachment.", 'start': 4892.035, 'duration': 3.601}, {'end': 4897.077, 'text': 'There we go.', 'start': 4895.776, 'duration': 1.301}, {'end': 4898.037, 'text': "OK, that's correct now.", 'start': 4897.117, 'duration': 0.92}], 'summary': 'Debugging process to fix misspelled function wp get attachment source.', 'duration': 39.773, 'max_score': 4858.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo4858264.jpg'}], 'start': 3309.278, 'title': 'Wordpress functions, menus, and customization', 'summary': 'Covers calling wordpress functions, setting up menus, creating custom menus, creating and customizing menus in wordpress, adding menu locations, customizing menu appearance, updating template pages, adding a custom logo feature, and resolving menu styling issues.', 'chapters': [{'end': 3615.462, 'start': 3309.278, 'title': 'Wordpress functions and menus setup', 'summary': 'Discusses calling wordpress functions to fetch and display content, setting up menu locations, and creating custom menus in wordpress, using php and wordpress hooks.', 'duration': 306.184, 'highlights': ['WordPress functions: querying the database, fetching single post, and grabbing content WordPress functions allow querying the database, fetching single posts, and grabbing content, enabling dynamic content display.', 'Customizing page content and title dynamically using WordPress functions The tutorial demonstrates customizing page content and title dynamically using WordPress functions and PHP, enhancing user experience.', 'Setting up menu locations and creating custom menus using PHP and WordPress hooks The process involves setting up menu locations and creating custom menus using PHP and WordPress hooks, providing flexibility in menu management.']}, {'end': 4501.489, 'start': 3615.462, 'title': 'Creating and customizing menus in wordpress', 'summary': 'Explains how to create and customize menus in wordpress, including adding menu locations, creating new pages, customizing menu appearance, adding custom code, and resolving issues with menu styling and customization.', 'duration': 886.027, 'highlights': ["Creating the main menu and adding menu items The speaker demonstrates how to create the main menu in WordPress and add new pages like 'about page' and 'contact us', resulting in the availability of the created menu with added items.", 'Customizing menu appearance and location The speaker shows how to customize the appearance and location of the menu within the theme, such as selecting the menu location for desktop primary and footer, and selecting where the menu should appear inside the theme.', 'Replacing hard-coded menu with WordPress function The speaker explains the process of removing hard-coded menu and replacing it with a WordPress function that dynamically displays the menu, ensuring the automatic display of the menu content.', 'Adding custom code for menu customization The speaker provides a detailed explanation of adding custom code to customize the menu by using the WP nav menu function with different parameters, resulting in the creation of the primary menu and its output.', 'Resolving issues with menu styling and customization The speaker addresses issues related to menu styling and customization, such as injecting classes, customizing unordered lists, and resolving problems with CSS classes, providing a comprehensive overview of potential styling challenges and solutions.']}, {'end': 4898.037, 'start': 4501.509, 'title': 'Updating template pages and adding custom logo', 'summary': 'Discusses updating template pages to remove hard-coded elements, adding a custom logo feature that allows users to upload a logo through the wordpress admin, and addressing issues with outputting the logo in the theme.', 'duration': 396.528, 'highlights': ["Adding a custom logo feature that allows users to upload a logo through the WordPress admin. The function 'add_theme_support' is used to enable the 'custom-logo' feature, allowing users to upload and select a logo through the WordPress admin.", "Addressing issues with outputting the logo in the theme, including handling classes and image source. The process involves using the 'get_theme_mod' function to retrieve the custom logo ID and then using 'WP_get_attachment_image_src' to set the logo source and handle classes for the logo.", 'Discussing the process of updating template pages to remove hard-coded elements such as social links and site name/logo. The chapter explains the process of removing hard-coded elements like social links, site name, and logo from template pages, emphasizing the need to avoid hard-coding and enable customization through WordPress admin.']}], 'duration': 1588.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo3309278.jpg', 'highlights': ['Customizing page content and title dynamically using WordPress functions', 'Creating the main menu and adding menu items', 'Adding custom code for menu customization', 'Resolving issues with menu styling and customization', 'Adding a custom logo feature that allows users to upload a logo through the WordPress admin', 'Addressing issues with outputting the logo in the theme, including handling classes and image source', 'Discussing the process of updating template pages to remove hard-coded elements such as social links and site name/logo', 'Setting up menu locations and creating custom menus using PHP and WordPress hooks', 'Customizing menu appearance and location', 'Replacing hard-coded menu with WordPress function', 'WordPress functions: querying the database, fetching single post, and grabbing content']}, {'end': 5946.226, 'segs': [{'end': 5351.868, 'src': 'embed', 'start': 5323.139, 'weight': 3, 'content': [{'end': 5327.141, 'text': "So that's where we're gonna start off with our next template is an individual post page.", 'start': 5323.139, 'duration': 4.002}, {'end': 5336.867, 'text': "So let's go ahead and jump back here to Visual Studio Code and we're gonna move over and start that process.", 'start': 5328.202, 'duration': 8.665}, {'end': 5344.386, 'text': "So let's come in here to our, I'm gonna open up my sidebar again And we will open up this time.", 'start': 5337.627, 'duration': 6.759}, {'end': 5347.007, 'text': "We're going to come over here to our front page.", 'start': 5344.406, 'duration': 2.601}, {'end': 5348.107, 'text': "And we're just going to copy everything.", 'start': 5347.027, 'duration': 1.08}, {'end': 5351.868, 'text': 'So Command-A, Command-C, because most of our template files will be very similar.', 'start': 5348.127, 'duration': 3.741}], 'summary': 'Starting individual post page template creation in visual studio code.', 'duration': 28.729, 'max_score': 5323.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo5323139.jpg'}, {'end': 5404.477, 'src': 'embed', 'start': 5369.451, 'weight': 0, 'content': [{'end': 5373.455, 'text': "So let's go ahead and look here so I can get it over in the other document.", 'start': 5369.451, 'duration': 4.004}, {'end': 5378.078, 'text': 'It is, I guess I need to go back here.', 'start': 5375.236, 'duration': 2.842}, {'end': 5384.724, 'text': "I'm just going to click on edit here so I can see what the permalink is.", 'start': 5379.339, 'duration': 5.385}, {'end': 5388.567, 'text': 'Preview, there we go.', 'start': 5387.786, 'duration': 0.781}, {'end': 5393.21, 'text': 'So it is post 22.', 'start': 5388.627, 'duration': 4.583}, {'end': 5397.594, 'text': 'I guess I have to switch out of full screen mode to see the bar here.', 'start': 5393.21, 'duration': 4.384}, {'end': 5401.554, 'text': 'Okay, so it is P22.', 'start': 5398.291, 'duration': 3.263}, {'end': 5403.016, 'text': "So I'll just copy that.", 'start': 5401.795, 'duration': 1.221}, {'end': 5404.477, 'text': "Let's move back over here to VS Code.", 'start': 5403.056, 'duration': 1.421}], 'summary': 'Transcript involves navigating documents and finding post 22 in vs code.', 'duration': 35.026, 'max_score': 5369.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo5369451.jpg'}, {'end': 5596.553, 'src': 'embed', 'start': 5565.802, 'weight': 7, 'content': [{'end': 5569.483, 'text': 'But if you do provide the second parameter, it looks for the hyphenated version.', 'start': 5565.802, 'duration': 3.681}, {'end': 5571.124, 'text': 'So content dash article.', 'start': 5569.543, 'duration': 1.581}, {'end': 5573.025, 'text': "And that's the way this works.", 'start': 5571.904, 'duration': 1.121}, {'end': 5578.387, 'text': 'So what this allows me to do is then I can have another template part called content dash gallery.', 'start': 5573.545, 'duration': 4.842}, {'end': 5582.269, 'text': "If I have a file that's going to be a gallery or something like that.", 'start': 5579.007, 'duration': 3.262}, {'end': 5589.15, 'text': 'So it allows you to kind of split up and modularize all your WordPress template files in another way.', 'start': 5582.708, 'duration': 6.442}, {'end': 5590.931, 'text': "We're not gonna be creating tons of these.", 'start': 5589.17, 'duration': 1.761}, {'end': 5596.553, 'text': 'I just wanted to demonstrate sort of how this process works for this specific post.', 'start': 5590.971, 'duration': 5.582}], 'summary': 'Demonstrates using hyphenated template names to modularize wordpress files.', 'duration': 30.751, 'max_score': 5565.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo5565802.jpg'}, {'end': 5660.309, 'src': 'embed', 'start': 5627.819, 'weight': 1, 'content': [{'end': 5629.84, 'text': "So let's go ahead and set up all that metadata.", 'start': 5627.819, 'duration': 2.021}, {'end': 5633.999, 'text': 'You can recall what the post page looks like.', 'start': 5631.578, 'duration': 2.421}, {'end': 5635.68, 'text': "I've pulled up here my template file.", 'start': 5634.059, 'duration': 1.621}, {'end': 5638.18, 'text': 'So this is what a single post would look like.', 'start': 5636.22, 'duration': 1.96}, {'end': 5639.801, 'text': 'Notice that we have the published.', 'start': 5638.26, 'duration': 1.541}, {'end': 5642.482, 'text': 'We have a few tags with some little icons.', 'start': 5640.161, 'duration': 2.321}, {'end': 5645.443, 'text': 'We have a link right here that jumps us down to the comments section.', 'start': 5642.822, 'duration': 2.621}, {'end': 5647.224, 'text': 'We have comments with nested comments.', 'start': 5645.503, 'duration': 1.721}, {'end': 5651.043, 'text': 'And then of course we have a little animation that happens in our sticky header.', 'start': 5648.021, 'duration': 3.022}, {'end': 5653.425, 'text': 'And we have a featured image right here.', 'start': 5651.844, 'duration': 1.581}, {'end': 5660.309, 'text': 'And then everything in here is going to be, this is all the post content, right? So all of this stuff is coming from the post content.', 'start': 5653.865, 'duration': 6.444}], 'summary': 'Setting up metadata, tags, comments, animation, and featured image for a single post page.', 'duration': 32.49, 'max_score': 5627.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo5627819.jpg'}, {'end': 5695.989, 'src': 'embed', 'start': 5665.933, 'weight': 6, 'content': [{'end': 5671.377, 'text': "So let's jump back here to our code and I'm going to open up that specific template file here.", 'start': 5665.933, 'duration': 5.444}, {'end': 5677.301, 'text': 'So that is our post page, our single post one that we have mocked up here.', 'start': 5672.037, 'duration': 5.264}, {'end': 5681.93, 'text': "And we're going to grab some of this HTML so that we can paste it over into our PHP template.", 'start': 5678.188, 'duration': 3.742}, {'end': 5686.031, 'text': "So let's cruise down a little bit into this section right here.", 'start': 5682.29, 'duration': 3.741}, {'end': 5695.989, 'text': 'Okay So what we need is we need this little published three months ago, we need that.', 'start': 5686.592, 'duration': 9.397}], 'summary': "Reviewing code for single post template, extracting html for 'published three months ago'.", 'duration': 30.056, 'max_score': 5665.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo5665933.jpg'}, {'end': 5771.078, 'src': 'embed', 'start': 5738.952, 'weight': 4, 'content': [{'end': 5742.695, 'text': "Perfect So now we need to replace these so they're not just hard coded.", 'start': 5738.952, 'duration': 3.743}, {'end': 5746.737, 'text': "I'll pull this over a little bit and let's line wrap again here.", 'start': 5743.695, 'duration': 3.042}, {'end': 5748.439, 'text': 'Oops, I always hit the wrong button there.', 'start': 5746.757, 'duration': 1.682}, {'end': 5750.62, 'text': 'One more time.', 'start': 5750.12, 'duration': 0.5}, {'end': 5755.643, 'text': 'Okay, so we need to replace these.', 'start': 5753.382, 'duration': 2.261}, {'end': 5760.066, 'text': 'So instead of saying published three months ago, of course, this has to be the actual date.', 'start': 5755.883, 'duration': 4.183}, {'end': 5764.249, 'text': "So here's where we're gonna pull out information from the metadata of our WordPress theme.", 'start': 5760.547, 'duration': 3.702}, {'end': 5771.078, 'text': "So let's remove this published three months ago and we'll replace this with some PHP tags.", 'start': 5766.252, 'duration': 4.826}], 'summary': "Replace hard-coded 'published three months ago' with actual date using php tags", 'duration': 32.126, 'max_score': 5738.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo5738952.jpg'}, {'end': 5835.31, 'src': 'embed', 'start': 5808.09, 'weight': 2, 'content': [{'end': 5811.351, 'text': "There's a lot of different ways you can format the date, just exactly how you want.", 'start': 5808.09, 'duration': 3.261}, {'end': 5816.333, 'text': 'So I could literally have it say posted three months ago or posted today or however you want that to be.', 'start': 5811.391, 'duration': 4.942}, {'end': 5817.643, 'text': 'All right.', 'start': 5817.383, 'duration': 0.26}, {'end': 5820.964, 'text': "Now next we're going to mess with these tags, these post tags.", 'start': 5817.923, 'duration': 3.041}, {'end': 5826.266, 'text': "So they're inside of this span classes tag, and then we have an icon and then we have the actual tag.", 'start': 5821.204, 'duration': 5.062}, {'end': 5833.089, 'text': "So to make this a little bit easier to read, I'm just going to hit return here on a single tag so we can kind of see that.", 'start': 5826.687, 'duration': 6.402}, {'end': 5835.31, 'text': "And then I'll move these comments down as well.", 'start': 5833.209, 'duration': 2.101}], 'summary': 'Discussion on formatting dates and post tags for better readability.', 'duration': 27.22, 'max_score': 5808.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo5808090.jpg'}], 'start': 4899.474, 'title': 'Integrating dynamic content and customizing wordpress themes', 'summary': 'Discusses dynamically integrating custom logo, site name, and menu content into a wordpress website, along with the use of php functions and variables. it also covers adding posts to the wordpress theme, including creating new posts, adding tags and thumbnails, and modifying template files. additionally, it explains customizing wordpress single post templates, including splitting up posts into different types and adding metadata, with detailed steps and examples provided.', 'chapters': [{'end': 5109.027, 'start': 4899.474, 'title': 'Dynamic content integration', 'summary': 'Discusses the process of dynamically integrating custom logo, site name, and menu content into a wordpress website, as well as the use of php functions and variables for this purpose.', 'duration': 209.553, 'highlights': ["The logo source is dynamically integrated by replacing the 'source' with the variable containing the image source, leading to successful output. Demonstrates the process of dynamically replacing the logo source with a variable and successfully outputting the custom logo.", "The process of retrieving and displaying the site name dynamically using the 'get_bloginfo' PHP function is explained, allowing for customizable site title output. Describes the use of the 'get_bloginfo' function to dynamically display the site name, enabling customizable site title output.", "The dynamic integration and customization of menu content in WordPress is discussed, emphasizing the dynamic nature of the website's menu. Highlights the discussion on dynamically integrating and customizing menu content, emphasizing the dynamic nature of the website's menu."]}, {'end': 5404.477, 'start': 5110.387, 'title': 'Adding posts to wordpress theme', 'summary': 'Covers adding posts to the wordpress theme, including creating new posts, adding tags and thumbnails, and modifying template files to display individual posts, with a focus on practical implementation steps.', 'duration': 294.09, 'highlights': ['Creating new posts and adding tags and thumbnails The process involves adding sample titles and tags to multiple posts, with a mention of adding optional excerpts and setting featured images, as well as customizing image sizes.', 'Modifying template files to display individual posts The instructor demonstrates the process of copying and modifying template files to create a single.php file responsible for displaying individual posts, with a specific focus on practical implementation.', 'Practical steps for implementing the concepts The tutorial emphasizes practical implementation by providing specific steps, such as navigating to the WordPress backend, adding theme support for post thumbnails, and customizing image sizes.']}, {'end': 5946.226, 'start': 5405.799, 'title': 'Customizing wordpress single post templates', 'summary': 'Explains the process of customizing wordpress single post templates, including splitting up posts into different types and adding metadata, with detailed steps and examples provided.', 'duration': 540.427, 'highlights': ['The chapter explains how to split up single.php posts into different types, such as gallery, article, or video, and create template parts for each type. Demonstrates the process of categorizing posts into different types and creating corresponding template parts for each type within WordPress.', 'The chapter provides detailed steps for customizing the article template by adding metadata like published date and post tags. Walks through the process of adding metadata such as published date and post tags to the article template with specific PHP functions and parameters.', 'The chapter presents a step-by-step guide on adding post tags and customizing their appearance using PHP functions and parameters. Explains the process of adding post tags and customizing their appearance using PHP functions and parameters to ensure the tags are displayed correctly.']}], 'duration': 1046.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo4899474.jpg', 'highlights': ['Demonstrates the process of dynamically replacing the logo source with a variable and successfully outputting the custom logo.', "Describes the use of the 'get_bloginfo' function to dynamically display the site name, enabling customizable site title output.", "Highlights the discussion on dynamically integrating and customizing menu content, emphasizing the dynamic nature of the website's menu.", 'The process involves adding sample titles and tags to multiple posts, with a mention of adding optional excerpts and setting featured images, as well as customizing image sizes.', 'The instructor demonstrates the process of copying and modifying template files to create a single.php file responsible for displaying individual posts, with a specific focus on practical implementation.', 'The tutorial emphasizes practical implementation by providing specific steps, such as navigating to the WordPress backend, adding theme support for post thumbnails, and customizing image sizes.', 'Demonstrates the process of categorizing posts into different types and creating corresponding template parts for each type within WordPress.', 'Walks through the process of adding metadata such as published date and post tags to the article template with specific PHP functions and parameters.', 'Explains the process of adding post tags and customizing their appearance using PHP functions and parameters to ensure the tags are displayed correctly.']}, {'end': 6361.769, 'segs': [{'end': 6057.53, 'src': 'embed', 'start': 6030.684, 'weight': 2, 'content': [{'end': 6048.677, 'text': "so i'll close this down and we'll close this down and we'll come back to our comments website and open it comments.php and paste all right now there is a lot of code in here that we're going to end up deleting because wordpress is going to provide all this dynamically essentially all this code.", 'start': 6030.684, 'duration': 17.993}, {'end': 6054.987, 'text': 'So what we can do now is start replacing all of this.', 'start': 6050.103, 'duration': 4.884}, {'end': 6057.53, 'text': "So let's get rid of my sidebar here.", 'start': 6055.788, 'duration': 1.742}], 'summary': 'Guide to replacing code in comments.php for wordpress website.', 'duration': 26.846, 'max_score': 6030.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo6030684.jpg'}, {'end': 6126.907, 'src': 'embed', 'start': 6077.998, 'weight': 0, 'content': [{'end': 6081.363, 'text': "So inside of this header two, we're going to be writing a little bit of logic.", 'start': 6077.998, 'duration': 3.365}, {'end': 6083.786, 'text': 'This is the comment reply title.', 'start': 6081.903, 'duration': 1.883}, {'end': 6087.892, 'text': "So I'm going to open my PHP and close it here.", 'start': 6085.208, 'duration': 2.684}, {'end': 6089.494, 'text': 'So here I can say if.', 'start': 6088.292, 'duration': 1.202}, {'end': 6092.958, 'text': "And then here's where I'm gonna do a little logic here.", 'start': 6091.237, 'duration': 1.721}, {'end': 6099.401, 'text': "So I can say, if we don't have, this is a PHP command that's called have comments.", 'start': 6093.098, 'duration': 6.303}, {'end': 6107.204, 'text': 'In other words, if this post does not have comments, do what else? Do something else.', 'start': 6099.901, 'duration': 7.303}, {'end': 6110.185, 'text': "So in other words, I can change my title based on if there's comments or not.", 'start': 6107.224, 'duration': 2.961}, {'end': 6118.369, 'text': "So if I don't have comments, I can simply just echo out something like leave a comment.", 'start': 6110.646, 'duration': 7.723}, {'end': 6121.464, 'text': "Okay, we'll just do that.", 'start': 6120.043, 'duration': 1.421}, {'end': 6126.907, 'text': 'Otherwise, if I do have comments, I can echo out the number.', 'start': 6122.184, 'duration': 4.723}], 'summary': 'The php code checks for comments and modifies the title accordingly.', 'duration': 48.909, 'max_score': 6077.998, 'thumbnail': ''}, {'end': 6347.86, 'src': 'embed', 'start': 6319.996, 'weight': 3, 'content': [{'end': 6325.719, 'text': 'where we can pass in a set of key values in this array to determine how those comments are output.', 'start': 6319.996, 'duration': 5.723}, {'end': 6329.702, 'text': "So there's all sorts of things here that you can pass into this.", 'start': 6325.759, 'duration': 3.943}, {'end': 6332.783, 'text': "I'm just going to quickly show you a list of available options.", 'start': 6330.182, 'duration': 2.601}, {'end': 6339.147, 'text': 'The WordPress codecs, and you can see that this function here, the WordPress list comments takes a whole bunch of arguments.', 'start': 6334.384, 'duration': 4.763}, {'end': 6341.075, 'text': "And here's all the arguments.", 'start': 6340.134, 'duration': 0.941}, {'end': 6343.516, 'text': 'So you can do a custom walker, the maximum depth.', 'start': 6341.095, 'duration': 2.421}, {'end': 6347.86, 'text': 'so how many levels deep of replies you want to show your style?', 'start': 6343.516, 'duration': 4.344}], 'summary': 'Wordpress list comments function takes a variety of arguments for customizing comment output.', 'duration': 27.864, 'max_score': 6319.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo6319996.jpg'}], 'start': 5947.046, 'title': 'Wordpress comments functionality and logic', 'summary': 'Demonstrates adding proper markup and wordpress functionality to display comments dynamically, while also highlighting the process of pasting code into the comments.php file. it also discusses adding logic to wordpress comments templates to dynamically change the title based on the presence of comments, display the number of comments, and manage individual comments and replies, with the option to customize various aspects using wp_list_comments function.', 'chapters': [{'end': 6075.366, 'start': 5947.046, 'title': 'Wordpress comments functionality', 'summary': 'Demonstrates adding proper markup and wordpress functionality to display comments dynamically, while also highlighting the process of pasting code into the comments.php file.', 'duration': 128.32, 'highlights': ['The chapter demonstrates the process of adding proper markup to individual tags to display them properly, enhancing the visual presentation of the website.', 'It also showcases the use of a WordPress function called comments number to dynamically display the number of comments, replacing hard-coded numbers with dynamic functionality.', 'The process of pasting code into the comments.php file is detailed, emphasizing the importance of this file for implementing WordPress functionality and dynamically displaying comments.']}, {'end': 6361.769, 'start': 6077.998, 'title': 'Wordpress comments logic', 'summary': 'Discusses adding logic to wordpress comments templates to dynamically change the title based on the presence of comments, display the number of comments, and manage individual comments and replies, with the option to customize various aspects using wp_list_comments function.', 'duration': 283.771, 'highlights': ['The chapter discusses adding logic to WordPress comments templates to dynamically change the title based on the presence of comments, display the number of comments, and manage individual comments and replies. dynamically changing title based on presence of comments, displaying number of comments, managing individual comments and replies', 'The WP_list_comments function allows customization of various aspects such as the maximum depth of replies, the type of comments, the number of comments per page, and the size of the avatar image. customization of aspects using WP_list_comments function, options for maximum depth of replies, type of comments, number of comments per page, size of avatar image', "The PHP command 'have_comments' is used to determine if the post has comments, and based on its presence, the title is changed to either display 'leave a comment' or the number of comments. using 'have_comments' command to determine presence of comments, changing title based on its presence"]}], 'duration': 414.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo5947046.jpg', 'highlights': ['The chapter demonstrates the process of adding proper markup to individual tags to display them properly, enhancing the visual presentation of the website.', 'The process of pasting code into the comments.php file is detailed, emphasizing the importance of this file for implementing WordPress functionality and dynamically displaying comments.', 'The chapter discusses adding logic to WordPress comments templates to dynamically change the title based on the presence of comments, display the number of comments, and manage individual comments and replies.', 'The WP_list_comments function allows customization of various aspects such as the maximum depth of replies, the type of comments, the number of comments per page, and the size of the avatar image.', "The PHP command 'have_comments' is used to determine if the post has comments, and based on its presence, the title is changed to either display 'leave a comment' or the number of comments."]}, {'end': 6816.75, 'segs': [{'end': 6523.418, 'src': 'embed', 'start': 6490.774, 'weight': 2, 'content': [{'end': 6492.215, 'text': "We don't need a semicolon right there.", 'start': 6490.774, 'duration': 1.441}, {'end': 6494.889, 'text': 'There we go.', 'start': 6494.349, 'duration': 0.54}, {'end': 6496.69, 'text': "So that's looking correct now.", 'start': 6495.049, 'duration': 1.641}, {'end': 6503.874, 'text': "So the class form, we'll go ahead and add one more.", 'start': 6497.991, 'duration': 5.883}, {'end': 6508.137, 'text': "So this one's going to be the title underscore reply before.", 'start': 6503.914, 'duration': 4.223}, {'end': 6514.354, 'text': 'So this is the title reply before text.', 'start': 6511.673, 'duration': 2.681}, {'end': 6517.396, 'text': "And we're going to do that as a header two.", 'start': 6515.475, 'duration': 1.921}, {'end': 6522.318, 'text': "And it's going to have the ID, whoops, header two, ID equals.", 'start': 6518.356, 'duration': 3.962}, {'end': 6523.418, 'text': "And again, you don't need any of this.", 'start': 6522.338, 'duration': 1.08}], 'summary': 'Adding a class form with title reply before as a header two.', 'duration': 32.644, 'max_score': 6490.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo6490774.jpg'}, {'end': 6597.777, 'src': 'embed', 'start': 6570.495, 'weight': 3, 'content': [{'end': 6575.219, 'text': "Now I'm going to back this up and I'm going to zoom back out so we can kind of, whoops, wrong zoom.", 'start': 6570.495, 'duration': 4.724}, {'end': 6578.441, 'text': "Let's zoom back out our page here back to a normal default level.", 'start': 6575.459, 'duration': 2.982}, {'end': 6581.884, 'text': 'So now you can kind of see it says leave a reply.', 'start': 6579.702, 'duration': 2.182}, {'end': 6588.629, 'text': "That's coming from, you know, our header two over there inside of that header two.", 'start': 6581.904, 'duration': 6.725}, {'end': 6590.471, 'text': "There's the comment form.", 'start': 6589.37, 'duration': 1.101}, {'end': 6593.673, 'text': 'We have our name, email, website, all this stuff.', 'start': 6590.691, 'duration': 2.982}, {'end': 6595.615, 'text': 'And then I can actually click the post comment.', 'start': 6593.693, 'duration': 1.922}, {'end': 6597.777, 'text': 'So it should work correctly now.', 'start': 6596.095, 'duration': 1.682}], 'summary': 'Demonstrating website functionality, including leaving a reply and posting a comment.', 'duration': 27.282, 'max_score': 6570.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo6570495.jpg'}, {'end': 6673.291, 'src': 'embed', 'start': 6644.943, 'weight': 4, 'content': [{'end': 6650.187, 'text': "So let's scroll up and it's right here on line, this line right here where it says get comments count.", 'start': 6644.943, 'duration': 5.244}, {'end': 6652.988, 'text': "It's telling me that that function does not exist.", 'start': 6650.887, 'duration': 2.101}, {'end': 6656.07, 'text': "So I've got to double check my note here and see if that's spelled correctly.", 'start': 6653.149, 'duration': 2.921}, {'end': 6658.792, 'text': 'And sure enough, it is not.', 'start': 6657.571, 'duration': 1.221}, {'end': 6661.174, 'text': 'This is the exact same mistake I made earlier.', 'start': 6659.472, 'duration': 1.702}, {'end': 6664.816, 'text': "It's not comments count, it's get comments number.", 'start': 6661.534, 'duration': 3.282}, {'end': 6667.845, 'text': 'So if we save that, there we go.', 'start': 6665.782, 'duration': 2.063}, {'end': 6669.527, 'text': "Now it's actually outputting correctly.", 'start': 6667.905, 'duration': 1.622}, {'end': 6673.291, 'text': 'And sure enough, there is my comment.', 'start': 6671.309, 'duration': 1.982}], 'summary': 'Corrected function name to get comments number, resolving issue with output.', 'duration': 28.348, 'max_score': 6644.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo6644943.jpg'}, {'end': 6778.912, 'src': 'embed', 'start': 6750.816, 'weight': 0, 'content': [{'end': 6761.349, 'text': "And that's because the default WordPress code that's being output is not matching 100% to my style sheet that I have in my comments.", 'start': 6750.816, 'duration': 10.533}, {'end': 6765.403, 'text': "And the reason for that, I'll just explain that, I'm not gonna fix it.", 'start': 6762.361, 'duration': 3.042}, {'end': 6772.048, 'text': 'The reason for that is because I copied again all of my comments code from the WordPress 2020 theme.', 'start': 6765.503, 'duration': 6.545}, {'end': 6774.65, 'text': 'So most of my CSS was copied right from there.', 'start': 6772.188, 'duration': 2.462}, {'end': 6778.912, 'text': 'And so all of this comments belongs to that.', 'start': 6776.731, 'duration': 2.181}], 'summary': "Wordpress code doesn't match 100% with the style sheet due to copying from the wordpress 2020 theme.", 'duration': 28.096, 'max_score': 6750.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo6750816.jpg'}], 'start': 6361.809, 'title': 'Customizing and debugging comment section', 'summary': 'Covers customizing the comment section by setting avatar size to 120 pixels, changing style to divs, and adding a comment form. it also details the process of testing, identifying, and rectifying coding errors in comments functionality, leading to successful implementation.', 'chapters': [{'end': 6593.673, 'start': 6361.809, 'title': 'Customizing comment section in code', 'summary': 'Covers customizing the comment section in code by setting the avatar size to 120 pixels, changing the style to divs, and setting up the reply section, including adding a comment form with specific parameters.', 'duration': 231.864, 'highlights': ['The avatar size is customized to 120 pixels, and the style is changed to output as divs instead of the default unordered list.', "Setting up the reply section involves replacing the 'leave a reply' section with a comment form, including specifying parameters for the form's display.", "The function 'comments open' is used to check if the current page or post allows comments, and if so, the comment form is output with specific parameters."]}, {'end': 6816.75, 'start': 6593.693, 'title': 'Debugging and fixing comments functionality', 'summary': 'Details the process of testing, identifying, and rectifying a coding error in the comments functionality of a website, leading to successful implementation of comments and nested replies.', 'duration': 223.057, 'highlights': ['The function get comments count was causing an undefined error, which was rectified by changing it to get comments number, resulting in successful output of comments and automatic update of comment count to one.', 'The process of manually approving comments is demonstrated, and the automatic update of comment count upon approval is observed.', 'The difference in formatting of comments due to the default WordPress code not aligning completely with the custom style sheet is explained, attributed to copying code from the WordPress 2020 theme and not implementing a custom walker for defining classes.', 'The mistake of using the incorrect function name, comments count instead of get comments number, is identified and rectified, leading to the successful display of comments and automatic update of comment count.', 'The initial error of an undefined function, get comments count, is identified and rectified by changing the function name to get comments number, resulting in the successful output of comments and automatic update of the comment count to one.']}], 'duration': 454.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo6361809.jpg', 'highlights': ['The mistake of using the incorrect function name, comments count instead of get comments number, is identified and rectified, leading to the successful display of comments and automatic update of comment count.', 'The function get comments count was causing an undefined error, which was rectified by changing it to get comments number, resulting in successful output of comments and automatic update of comment count to one.', 'The process of manually approving comments is demonstrated, and the automatic update of comment count upon approval is observed.', 'The avatar size is customized to 120 pixels, and the style is changed to output as divs instead of the default unordered list.', "Setting up the reply section involves replacing the 'leave a reply' section with a comment form, including specifying parameters for the form's display."]}, {'end': 7923.925, 'segs': [{'end': 6866.331, 'src': 'embed', 'start': 6837.268, 'weight': 5, 'content': [{'end': 6842.993, 'text': 'So if we open up our sidebar here, we have a file called archive.php.', 'start': 6837.268, 'duration': 5.725}, {'end': 6845.935, 'text': 'So we can come into that file.', 'start': 6843.773, 'duration': 2.162}, {'end': 6851.419, 'text': 'Now the archive.php is going to be very similar to the single.php.', 'start': 6846.775, 'duration': 4.644}, {'end': 6856.643, 'text': "So I'll just copy all that and come over here and paste.", 'start': 6852.16, 'duration': 4.483}, {'end': 6859.185, 'text': "And then we'll remove the stuff we don't need.", 'start': 6857.163, 'duration': 2.022}, {'end': 6863.909, 'text': "So what we're going to do is change the template part.", 'start': 6861.427, 'duration': 2.482}, {'end': 6866.331, 'text': "So it's going to be template parts instead of content.", 'start': 6863.989, 'duration': 2.342}], 'summary': 'Updating archive.php to use template parts instead of content.', 'duration': 29.063, 'max_score': 6837.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo6837268.jpg'}, {'end': 7243.04, 'src': 'embed', 'start': 7187.93, 'weight': 0, 'content': [{'end': 7191.731, 'text': 'So our, not our post page, our archive page and see how we have this mocked up.', 'start': 7187.93, 'duration': 3.801}, {'end': 7200.953, 'text': 'So down here in this section, you can see that we have our content, then we have our container, and then we have our post.', 'start': 7192.751, 'duration': 8.202}, {'end': 7207.668, 'text': 'So this little post right here is repeated over and over and over.', 'start': 7202.327, 'duration': 5.341}, {'end': 7211.329, 'text': "So there's one, two, three, right for every single post archive and excerpt.", 'start': 7207.688, 'duration': 3.641}, {'end': 7213.81, 'text': "Uh, that's where that's repeated.", 'start': 7212.409, 'duration': 1.401}, {'end': 7220.391, 'text': "So I'm going to copy this code and we're going to jump back over here to our content dash archive.", 'start': 7213.83, 'duration': 6.561}, {'end': 7224.992, 'text': 'And we are simply gonna paste that into here.', 'start': 7221.612, 'duration': 3.38}, {'end': 7231.814, 'text': 'Okay So now we can begin to, let me just back that up, flesh this out.', 'start': 7225.993, 'duration': 5.821}, {'end': 7237.753, 'text': 'So the section right here, this is the actual where this div class is content.', 'start': 7233.126, 'duration': 4.627}, {'end': 7238.794, 'text': "That's my excerpt.", 'start': 7237.793, 'duration': 1.001}, {'end': 7241.678, 'text': "So I'll delete all the lorem ipsum.", 'start': 7239.535, 'duration': 2.143}, {'end': 7243.04, 'text': 'Let me wrap lines here again.', 'start': 7241.698, 'duration': 1.342}], 'summary': 'The transcript discusses modifying the archive page and repeating the post content.', 'duration': 55.11, 'max_score': 7187.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo7187930.jpg'}, {'end': 7510.725, 'src': 'heatmap', 'start': 7416.219, 'weight': 1, 'content': [{'end': 7418.28, 'text': 'And this one will take me into that individual post.', 'start': 7416.219, 'duration': 2.061}, {'end': 7419.739, 'text': 'Okay, perfect.', 'start': 7419.039, 'duration': 0.7}, {'end': 7422.32, 'text': 'So now we have the permalinks, we have the excerpts.', 'start': 7420.279, 'duration': 2.041}, {'end': 7425.201, 'text': "And the only thing we're missing now is our featured thumbnail image.", 'start': 7422.38, 'duration': 2.821}, {'end': 7428.302, 'text': "And we'll do that with getting the post thumbnail.", 'start': 7425.721, 'duration': 2.581}, {'end': 7431.263, 'text': "We'll do that up here in our image tag.", 'start': 7429.502, 'duration': 1.761}, {'end': 7434.264, 'text': "Now just to kind of show you there's two ways you can do this.", 'start': 7431.943, 'duration': 2.321}, {'end': 7440.585, 'text': 'The first the easy way is just calling the post thumbnail like this and saving.', 'start': 7434.344, 'duration': 6.241}, {'end': 7445.772, 'text': 'Um, Oops, I forgot an L right there.', 'start': 7441.846, 'duration': 3.926}, {'end': 7448.554, 'text': 'And you can see it outputs a thumbnail.', 'start': 7446.773, 'duration': 1.781}, {'end': 7456.88, 'text': 'Now, if I inspect this element, the problem with this is that, again, WordPress creates all these classes on it by itself.', 'start': 7448.714, 'duration': 8.166}, {'end': 7458.441, 'text': "And I don't really want that.", 'start': 7457.48, 'duration': 0.961}, {'end': 7461.283, 'text': 'I have my own image with my own set of classes.', 'start': 7458.761, 'duration': 2.522}, {'end': 7463.445, 'text': 'So really all I need is the URL.', 'start': 7461.643, 'duration': 1.802}, {'end': 7464.445, 'text': 'I want the source.', 'start': 7463.485, 'duration': 0.96}, {'end': 7468.288, 'text': 'So we can replace this with the thumb URL.', 'start': 7465.006, 'duration': 3.282}, {'end': 7470.91, 'text': 'Whoops and save and refresh.', 'start': 7468.928, 'duration': 1.982}, {'end': 7476.712, 'text': 'And you can see that will just return me with the absolute path to that thumbnail image, which is what I want.', 'start': 7470.93, 'duration': 5.782}, {'end': 7487.078, 'text': 'So now we can just grab this and replace that here in our source.', 'start': 7477.493, 'duration': 9.585}, {'end': 7492.6, 'text': "So we'll delete the source, PHP, replace that and save.", 'start': 7487.118, 'duration': 5.482}, {'end': 7495.702, 'text': 'Now we can delete this little code up here.', 'start': 7494.141, 'duration': 1.561}, {'end': 7503.522, 'text': 'and we should be getting that source to appear there.', 'start': 7498.46, 'duration': 5.062}, {'end': 7504.302, 'text': "so let's double check.", 'start': 7503.522, 'duration': 0.78}, {'end': 7510.725, 'text': 'so image sure enough, there is the image, so that should work fine.', 'start': 7504.302, 'duration': 6.423}], 'summary': 'Demonstrating how to retrieve and display a featured thumbnail image in wordpress.', 'duration': 94.506, 'max_score': 7416.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo7416219.jpg'}, {'end': 7759.377, 'src': 'embed', 'start': 7727.133, 'weight': 1, 'content': [{'end': 7729.994, 'text': 'So that should pretty much do it for the pagination.', 'start': 7727.133, 'duration': 2.861}, {'end': 7731.554, 'text': "So let's kind of see where we're at right now.", 'start': 7730.034, 'duration': 1.52}, {'end': 7735.815, 'text': 'We have our blog archive page that works fine.', 'start': 7732.214, 'duration': 3.601}, {'end': 7739.096, 'text': "We have our pagination that's letting us go from page to page.", 'start': 7736.055, 'duration': 3.041}, {'end': 7743.177, 'text': 'You can, of course, clean this tile up and break things around as you want in your CSS sheet.', 'start': 7739.596, 'duration': 3.581}, {'end': 7746.778, 'text': 'We have our single pages.', 'start': 7744.637, 'duration': 2.141}, {'end': 7749.058, 'text': "We don't have our single pages.", 'start': 7748.218, 'duration': 0.84}, {'end': 7751.519, 'text': 'We have our single blog posts done.', 'start': 7749.138, 'duration': 2.381}, {'end': 7753.935, 'text': 'Oh, whoops, we need to make that a link.', 'start': 7752.754, 'duration': 1.181}, {'end': 7759.377, 'text': 'So we need to make this title be a link, just like we have the read more link.', 'start': 7754.895, 'duration': 4.482}], 'summary': 'Implemented pagination for blog archive, with room for css customization.', 'duration': 32.244, 'max_score': 7727.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo7727133.jpg'}], 'start': 6816.77, 'title': 'Wordpress archive page customization', 'summary': 'Details customizing the wordpress archive page to display post excerpts, titles, dates, and read more links, emphasizing the use of archive.php and index.php templates, and mentions creating 12 posts to display on the archive page.', 'chapters': [{'end': 7038.792, 'start': 6816.77, 'title': 'Setting up post archive page', 'summary': 'Details the process of setting up an archive page, duplicating and modifying the single post template, adding a custom link to the menu, and configuring the posts page to be displayed as the blog page.', 'duration': 222.022, 'highlights': ['The chapter details the process of setting up an archive page Explains the main focus of the chapter.', 'Duplicating and modifying the single post template Describes the specific steps involved in duplicating and modifying the single post template to create the archive page template.', "Adding a custom link to the menu Explains the process of adding a custom link named 'blog' to the menu, enabling navigation to the archive page.", 'Configuring the posts page to be displayed as the blog page Explains the configuration of the posts page to be displayed as the blog page, ensuring the proper display of posts in the archive page.']}, {'end': 7418.28, 'start': 7039.192, 'title': 'Wordpress archive page customization', 'summary': 'Details customizing the wordpress archive page to display post excerpts, titles, dates, and read more links, emphasizing the use of archive.php and index.php templates, and mentions creating 12 posts to display on the archive page.', 'duration': 379.088, 'highlights': ['The archive.php template only shows things like category archives, template archives, tag archives, custom post type archives, date-based post archives, etc. The archive.php template is specified to display specific types of archives such as category, tag, custom post type, and date-based post archives.', 'Creating 12 posts to display on the archive page. The chapter suggests creating at least 10 to 12 posts to display on the archive page, as the default is 10 posts per page.', 'Customizing the archive.php and index.php templates to display post excerpts, titles, dates, and read more links. The chapter emphasizes customizing the archive.php and index.php templates to display post excerpts, titles, dates, and read more links on the archive page.']}, {'end': 7923.925, 'start': 7419.039, 'title': 'Adding featured thumbnail image and pagination links', 'summary': 'Covers the process of adding a featured thumbnail image with the post thumbnail url function and custom classes, as well as implementing pagination links with the posts pagination function, enabling navigation between blog pages and ensuring visibility of four posts per page.', 'duration': 504.886, 'highlights': ['The chapter covers the process of adding a featured thumbnail image with the post thumbnail URL function and custom classes. Demonstrates the method of adding a featured thumbnail image using the post thumbnail URL function and custom classes, emphasizing the need for the thumbnail URL to avoid default WordPress classes and the importance of specifying the size parameter for proper thumbnail display.', 'Implementing pagination links with the posts pagination function, enabling navigation between blog pages and ensuring visibility of four posts per page. Describes the implementation of pagination links using the posts pagination function, ensuring navigation between blog pages and setting the visibility of four posts per page, with guidance on adjusting backend settings to achieve the desired display.', 'Creating a template part for individual pages and removing unnecessary elements for a clean page template. Illustrates the creation of a template part for individual pages, removing unnecessary elements such as comments, tags, and headers to create a clean page template, ensuring the functionality of individual pages.']}], 'duration': 1107.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo6816770.jpg', 'highlights': ['The chapter details the process of setting up an archive page', 'Customizing the archive.php and index.php templates to display post excerpts, titles, dates, and read more links', 'The archive.php template only shows things like category archives, template archives, tag archives, custom post type archives, date-based post archives, etc.', 'Implementing pagination links with the posts pagination function, enabling navigation between blog pages and ensuring visibility of four posts per page', "Adding a custom link to the menu named 'blog' to enable navigation to the archive page", 'Creating 12 posts to display on the archive page']}, {'end': 9153.494, 'segs': [{'end': 7946.063, 'src': 'embed', 'start': 7923.925, 'weight': 10, 'content': [{'end': 7933.752, 'text': 'so the last thing we need to do before this entire tutorial is completely finalized is add just a couple of extra things with widgets.', 'start': 7923.925, 'duration': 9.827}, {'end': 7941.06, 'text': 'so, for example, if i wanted to have this area over here, be user customizable so they can drag and drop their own things in here.', 'start': 7933.752, 'duration': 7.308}, {'end': 7942.841, 'text': 'I need to set up what are known as widgets.', 'start': 7941.08, 'duration': 1.761}, {'end': 7944.102, 'text': 'Same thing with the footer.', 'start': 7943.301, 'duration': 0.801}, {'end': 7946.063, 'text': 'Maybe I want them to be able to customize the footer.', 'start': 7944.142, 'duration': 1.921}], 'summary': 'Finalizing tutorial by adding user-customizable widgets for better user experience.', 'duration': 22.138, 'max_score': 7923.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo7923925.jpg'}, {'end': 8084.451, 'src': 'embed', 'start': 8046.34, 'weight': 9, 'content': [{'end': 8048.661, 'text': "And right now I'm just going to leave that blank for now.", 'start': 8046.34, 'duration': 2.321}, {'end': 8053.742, 'text': "I'll show you what this does in a minute when we actually set them up in our actual theme here.", 'start': 8050.121, 'duration': 3.621}, {'end': 8057.403, 'text': "There's one called after title and I'll leave that one blank.", 'start': 8054.122, 'duration': 3.281}, {'end': 8061.364, 'text': "There's one called before widget.", 'start': 8058.923, 'duration': 2.441}, {'end': 8064.825, 'text': 'So this is before widget.', 'start': 8062.564, 'duration': 2.261}, {'end': 8067.005, 'text': "And I'll leave that blank.", 'start': 8066.225, 'duration': 0.78}, {'end': 8068.646, 'text': "And then there's another one called after widget.", 'start': 8067.025, 'duration': 1.621}, {'end': 8071.364, 'text': "And I'll leave that one blank.", 'start': 8070.503, 'duration': 0.861}, {'end': 8084.451, 'text': 'And then there is, so all of these are options that are in the first parameter for the register sidebar.', 'start': 8072.144, 'duration': 12.307}], 'summary': 'Demonstration of setting up theme options for register sidebar.', 'duration': 38.111, 'max_score': 8046.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo8046340.jpg'}, {'end': 8132.721, 'src': 'embed', 'start': 8104.501, 'weight': 6, 'content': [{'end': 8106.482, 'text': "One's going to be in my sidebar, one's going to be in my footer.", 'start': 8104.501, 'duration': 1.981}, {'end': 8114.307, 'text': 'Whoops So this one here will be called my sidebar area, for lack of a better name.', 'start': 8107.083, 'duration': 7.224}, {'end': 8117.129, 'text': "And the next one, we'll give this guy an ID.", 'start': 8115.008, 'duration': 2.121}, {'end': 8119.851, 'text': "And I'll just call this sidebar-1.", 'start': 8117.149, 'duration': 2.702}, {'end': 8123.869, 'text': "That's the CSS ID it will become.", 'start': 8121.926, 'duration': 1.943}, {'end': 8127.133, 'text': 'And then we can optionally give this guy a description.', 'start': 8124.449, 'duration': 2.684}, {'end': 8132.721, 'text': "So I'll just call this the sidebar widget area.", 'start': 8127.153, 'duration': 5.568}], 'summary': 'Creating a sidebar with id sidebar-1 and description sidebar widget area.', 'duration': 28.22, 'max_score': 8104.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo8104501.jpg'}, {'end': 8186.887, 'src': 'embed', 'start': 8160.72, 'weight': 1, 'content': [{'end': 8168.364, 'text': 'So when the widgets are initialized, our custom function will be executed, causing us to register this new sidebar.', 'start': 8160.72, 'duration': 7.644}, {'end': 8170.005, 'text': "So we'll save that.", 'start': 8169.104, 'duration': 0.901}, {'end': 8171.505, 'text': 'Oops, I missed a semicolon there.', 'start': 8170.025, 'duration': 1.48}, {'end': 8174.567, 'text': 'Looks like I have another issue here.', 'start': 8172.866, 'duration': 1.701}, {'end': 8177.108, 'text': 'Parse error unexpected.', 'start': 8175.407, 'duration': 1.701}, {'end': 8178.509, 'text': 'Oh, right here.', 'start': 8177.128, 'duration': 1.381}, {'end': 8180.23, 'text': 'Whoops These are all supposed to be commas.', 'start': 8178.609, 'duration': 1.621}, {'end': 8184.612, 'text': 'Comma, comma, comma, comma, because those are array arguments.', 'start': 8181.35, 'duration': 3.262}, {'end': 8186.887, 'text': 'Okay, there we go.', 'start': 8186.266, 'duration': 0.621}], 'summary': 'Custom function initializes widgets, registers new sidebar, and fixes syntax errors.', 'duration': 26.167, 'max_score': 8160.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo8160720.jpg'}, {'end': 8269.332, 'src': 'embed', 'start': 8238.228, 'weight': 0, 'content': [{'end': 8241.191, 'text': "So I'll just leave that and save to show this as an example.", 'start': 8238.228, 'duration': 2.963}, {'end': 8246.976, 'text': "Now, right now, I'm not seeing that in my sidebar at all because all I've done is register the sidebar.", 'start': 8241.732, 'duration': 5.244}, {'end': 8249.739, 'text': "I'm not actually outputting the sidebar in my sidebar yet.", 'start': 8247.056, 'duration': 2.683}, {'end': 8259.584, 'text': 'So what we need to do next is we need to then come into our template files and output that in our theme.', 'start': 8250.598, 'duration': 8.986}, {'end': 8262.727, 'text': 'Now our sidebar is in our section we called header.', 'start': 8260.025, 'duration': 2.702}, {'end': 8269.332, 'text': "So I'll come over here to my header dot PHP file and we will come down to the sort of right.", 'start': 8263.287, 'duration': 6.045}], 'summary': 'Registering a sidebar but not yet outputting it in the theme template files', 'duration': 31.104, 'max_score': 8238.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo8238227.jpg'}, {'end': 8397.606, 'src': 'embed', 'start': 8369.582, 'weight': 3, 'content': [{'end': 8373.763, 'text': 'So I could move this maybe outside of my nav, but still inside of my header.', 'start': 8369.582, 'duration': 4.181}, {'end': 8375.946, 'text': "But of course, you're going to get some.", 'start': 8374.885, 'duration': 1.061}, {'end': 8381.449, 'text': "My template wasn't built initially to have this in place, so I'm going to have some issues here, of course.", 'start': 8377.206, 'duration': 4.243}, {'end': 8384.43, 'text': "But that's how that works.", 'start': 8382.489, 'duration': 1.941}, {'end': 8388.773, 'text': 'So you can add in your little templates areas as you need.', 'start': 8384.731, 'duration': 4.042}, {'end': 8397.606, 'text': "So let's now, instead of having this guy just be a random tag cloud, I'm gonna make this guy be this unordered list here.", 'start': 8390.402, 'duration': 7.204}], 'summary': 'Discussion about modifying template structure and adding unordered list.', 'duration': 28.024, 'max_score': 8369.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo8369582.jpg'}, {'end': 8511.11, 'src': 'embed', 'start': 8465.338, 'weight': 4, 'content': [{'end': 8470.081, 'text': "So I'm going to delete the tag cloud and just replace it instead with an arbitrary text field.", 'start': 8465.338, 'duration': 4.743}, {'end': 8472.082, 'text': "I'm not going to have a title,", 'start': 8470.641, 'duration': 1.441}, {'end': 8487.75, 'text': 'but what this allows me to do is then I can come in here and in my text area I can just copy and paste all of the code for that in my header file right here.', 'start': 8472.082, 'duration': 15.668}, {'end': 8493.809, 'text': 'So all of the code that belongs basically to all of those little unordered lists.', 'start': 8489.485, 'duration': 4.324}, {'end': 8499.254, 'text': "So I'm going to copy all that unordered list, cut it out rather, and I'll paste it inside of the dynamic sidebar instead.", 'start': 8493.829, 'duration': 5.425}, {'end': 8503.038, 'text': 'So I can come in here and just paste all that, hit save.', 'start': 8500.135, 'duration': 2.903}, {'end': 8511.11, 'text': "And then when I come over here and refresh, We should still see all those links, but now they're editable from the user's front end.", 'start': 8503.739, 'duration': 7.371}], 'summary': "Replace tag cloud with text field, making links editable from user's front end.", 'duration': 45.772, 'max_score': 8465.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo8465338.jpg'}, {'end': 8730.085, 'src': 'embed', 'start': 8701.946, 'weight': 2, 'content': [{'end': 8707.567, 'text': "But now that that's in place, I can put whatever I want in there, right? Maybe I want to put a link to..", 'start': 8701.946, 'duration': 5.621}, {'end': 8709.688, 'text': "Oh, I don't know.", 'start': 8707.567, 'duration': 2.121}, {'end': 8711.588, 'text': 'Maybe I want my archives down there.', 'start': 8709.708, 'duration': 1.88}, {'end': 8714.109, 'text': 'So we can call this the archives and save.', 'start': 8711.948, 'duration': 2.161}, {'end': 8718.573, 'text': 'And now when I refresh, I get a link to all of my archives.', 'start': 8715.47, 'duration': 3.103}, {'end': 8719.735, 'text': 'I can click on an archive.', 'start': 8718.633, 'duration': 1.102}, {'end': 8722.097, 'text': "And of course, I'm going to get all the blog archives for March.", 'start': 8719.755, 'duration': 2.342}, {'end': 8730.085, 'text': "So that's how you do widget areas inside of WordPress to be able to customize those.", 'start': 8723.759, 'duration': 6.326}], 'summary': 'Customize widget areas in wordpress to include links and archives, enabling easy access for users.', 'duration': 28.139, 'max_score': 8701.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo8701946.jpg'}], 'start': 7923.925, 'title': 'Customizing wordpress themes and widgets', 'summary': 'Covers adding user-customizable widget areas, creating custom sidebar areas using register_sidebar function, adding dynamic sidebars in wordpress, and customizing a wordpress theme by adding a 404 template, search form, and integrating a search form in the footer.', 'chapters': [{'end': 8012.492, 'start': 7923.925, 'title': 'Adding user-customizable widgets', 'summary': 'Focuses on adding user-customizable widget areas to the wordpress admin interface, allowing users to drag and drop content, and it involves setting up and registering sidebars in the templates.php file.', 'duration': 88.567, 'highlights': ['The tutorial aims to add user-customizable widget areas for user interaction. By allowing users to drag and drop their own content, the tutorial focuses on enhancing user experience and customization.', "The process involves setting up and registering sidebars in the templates.php file. The chapter emphasizes the technical aspect of creating widget areas by using the 'register_sidebar' command in the templates.php file."]}, {'end': 8341.252, 'start': 8013.772, 'title': 'Creating custom sidebar in wordpress', 'summary': 'Demonstrates how to create custom sidebar areas in wordpress using register_sidebar function and explains the relevant parameters, such as before title, after title, before widget, and after widget, while also showing the process for outputting the sidebar in the theme.', 'duration': 327.48, 'highlights': ['The function register_sidebar takes an array of arguments to set up the defaults for the sidebar, including options like before title, after title, before widget, and after widget. The register_sidebar function takes an array of arguments to set up the defaults for the sidebar, including options like before title, after title, before widget, and after widget.', 'The second parameter in the register_sidebar function includes options such as the name of the widget area, the CSS ID, and an optional description, allowing for customization of the sidebar areas. The second parameter in the register_sidebar function includes options such as the name of the widget area, the CSS ID, and an optional description, allowing for customization of the sidebar areas.', 'The process of outputting the sidebar in the theme involves hooking the custom function into the widgets init action using the add_action method and then specifying the sidebar ID to be displayed in the template files. The process of outputting the sidebar in the theme involves hooking the custom function into the widgets init action using the add_action method and then specifying the sidebar ID to be displayed in the template files.']}, {'end': 8722.097, 'start': 8342.272, 'title': 'Adding dynamic sidebars in wordpress', 'summary': 'Discusses adding dynamic sidebars in wordpress, including modifying the template, adding widget areas, and customizing the content, resulting in user-editable links and metadata in the front end.', 'duration': 379.825, 'highlights': ['The chapter discusses adding dynamic sidebars in WordPress The speaker talks about the process of adding dynamic sidebars in WordPress, demonstrating the modification of the template and the placement of widget areas.', 'Customizing the content results in user-editable links and metadata in the front end The customization process allows for the creation of user-editable links and metadata in the front end, enabling users to modify the content from the WordPress admin.', 'Modifying the template and adding widget areas The transcript details the process of modifying the template and adding widget areas to enable the customization of content and the creation of user-editable elements.']}, {'end': 9153.494, 'start': 8723.759, 'title': 'Custom wordpress theme tutorial', 'summary': 'Covers customizing a wordpress theme, including adding a 404 template, implementing a search form, creating a search results page, and integrating a search form in the footer, providing essential guidance for building a custom wordpress theme.', 'duration': 429.735, 'highlights': ['The chapter covers customizing a WordPress theme, including adding a 404 template, implementing a search form, creating a search results page, and integrating a search form in the footer. The tutorial covers adding a 404 template, implementing a search form, creating a search results page, and integrating a search form in the footer for a comprehensive understanding of customizing a WordPress theme.', 'The tutorial explains the process of adding a 404 template, which is the page that shows when somebody navigates to a broken link on the website. The tutorial demonstrates the process of adding a 404 template, which is the page displayed when a broken link is accessed, providing practical guidance for handling broken links on the website.', 'It details the implementation of a search form and creating a search results page, allowing users to search for specific content within the website. The tutorial provides detailed steps for implementing a search form and creating a search results page, enabling users to search for specific content within the website, enhancing user experience and accessibility.', 'The tutorial also guides on integrating a search form in the footer, making the search function available on every page of the website. The tutorial offers guidance on integrating a search form in the footer, ensuring the search function is accessible on every page of the website, enhancing user convenience and navigation.']}], 'duration': 1229.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-h7gOJbIpmo/pics/-h7gOJbIpmo7923925.jpg', 'highlights': ['The tutorial covers adding user-customizable widget areas for enhancing user experience and customization.', 'The process involves setting up and registering sidebars in the templates.php file, emphasizing the technical aspect of creating widget areas.', 'The function register_sidebar takes an array of arguments to set up the defaults for the sidebar, including options like before title, after title, before widget, and after widget.', 'The second parameter in the register_sidebar function includes options such as the name of the widget area, the CSS ID, and an optional description, allowing for customization of the sidebar areas.', 'The process of outputting the sidebar in the theme involves hooking the custom function into the widgets init action using the add_action method and then specifying the sidebar ID to be displayed in the template files.', 'The chapter discusses adding dynamic sidebars in WordPress, demonstrating the modification of the template and the placement of widget areas.', 'Customizing the content results in user-editable links and metadata in the front end, enabling users to modify the content from the WordPress admin.', 'Modifying the template and adding widget areas enables the customization of content and the creation of user-editable elements.', 'The tutorial covers adding a 404 template, implementing a search form, creating a search results page, and integrating a search form in the footer for a comprehensive understanding of customizing a WordPress theme.', 'The tutorial explains the process of adding a 404 template, which is the page displayed when a broken link is accessed, providing practical guidance for handling broken links on the website.', 'It details the implementation of a search form and creating a search results page, enabling users to search for specific content within the website, enhancing user experience and accessibility.', 'The tutorial also guides on integrating a search form in the footer, ensuring the search function is accessible on every page of the website, enhancing user convenience and navigation.']}], 'highlights': ['The tutorial focuses on converting a design into a custom WordPress theme, applicable to any existing HTML template.', 'The design is fully responsive, based off of Bootstrap, featuring important pages such as home, post, blog archive, and contact us pages.', 'Understanding the template hierarchy in WordPress provides various ways to customize theme appearance for different types of pages and posts, such as singular, archive, category, and front-page.php.', 'Adding a screenshot to the theme folder is crucial as it serves as a thumbnail representation of the theme in the WordPress store, aiding in attracting users searching for themes.', 'The process of setting up a custom WordPress theme is demonstrated, including activating the theme and fleshing out WordPress template files.', 'Issues related to CSS and JavaScript file paths are addressed, emphasizing the importance of not hard coding paths.', "The php command 'wp_head' in WordPress injects extra files into the head section, showcasing dynamic loading of style sheets and additional elements.", 'Demonstrating the process of enqueuing JavaScript files for a website, including Bootstrap, Popper, and custom JavaScript files.', 'Adding custom thumbnail sizes for images, ensuring that images uploaded within WordPress are automatically resized based on the defined dimensions.', "Configuring the front page in WordPress, including creating a specific page and instructing WordPress to use it as the website's homepage.", 'Customizing page content and title dynamically using WordPress functions', 'Creating the main menu and adding menu items', 'Adding custom code for menu customization', 'Resolving issues with menu styling and customization', 'Adding a custom logo feature that allows users to upload a logo through the WordPress admin', 'The process involves adding sample titles and tags to multiple posts, with a mention of adding optional excerpts and setting featured images, as well as customizing image sizes.', 'The tutorial emphasizes practical implementation by providing specific steps, such as navigating to the WordPress backend, adding theme support for post thumbnails, and customizing image sizes.', 'Walks through the process of adding metadata such as published date and post tags to the article template with specific PHP functions and parameters.', 'The chapter discusses adding logic to WordPress comments templates to dynamically change the title based on the presence of comments, display the number of comments, and manage individual comments and replies.', 'The process of manually approving comments is demonstrated, and the automatic update of comment count upon approval is observed.', "Setting up the reply section involves replacing the 'leave a reply' section with a comment form, including specifying parameters for the form's display.", 'Customizing the archive.php and index.php templates to display post excerpts, titles, dates, and read more links', 'Implementing pagination links with the posts pagination function, enabling navigation between blog pages and ensuring visibility of four posts per page', "Adding a custom link to the menu named 'blog' to enable navigation to the archive page", 'Creating 12 posts to display on the archive page', 'The tutorial covers adding user-customizable widget areas for enhancing user experience and customization.', 'The process involves setting up and registering sidebars in the templates.php file, emphasizing the technical aspect of creating widget areas.', 'The function register_sidebar takes an array of arguments to set up the defaults for the sidebar, including options like before title, after title, before widget, and after widget.', 'The tutorial explains the process of adding a 404 template, which is the page displayed when a broken link is accessed, providing practical guidance for handling broken links on the website.', 'It details the implementation of a search form and creating a search results page, enabling users to search for specific content within the website, enhancing user experience and accessibility.', 'The tutorial also guides on integrating a search form in the footer, ensuring the search function is accessible on every page of the website, enhancing user convenience and navigation.']}