title
WordPress Custom Editable Theme Content (Image & Text) Tutorial

description
Let's customize our WordPress theme to support editable content. Join my full courses: https://learnwebcode.com/courses/ Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/wordpress-editable-theme-content-tutorial/ To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode

detail
{'title': 'WordPress Custom Editable Theme Content (Image & Text) Tutorial', 'heatmap': [{'end': 927.879, 'start': 886.866, 'weight': 0.983}, {'end': 1468.772, 'start': 1442.116, 'weight': 0.965}, {'end': 1561.949, 'start': 1519.418, 'weight': 0.783}], 'summary': 'This tutorial covers customizing wordpress admin screen by adding custom options and content fields, demonstrating footer and layout customization, adding new sections and custom fields to wordpress appearance, creating wp controls and customizing footer, updating footer layout in php, creating link and image fields in a wordpress theme, and introducing a web development video course.', 'chapters': [{'end': 68.46, 'segs': [{'end': 68.46, 'src': 'embed', 'start': 2.631, 'weight': 0, 'content': [{'end': 8.935, 'text': "It's been almost two years without any updates but yes the series lives on my friends.", 'start': 2.631, 'duration': 6.304}, {'end': 17.22, 'text': 'In this lesson we are going to learn how to add custom options and content fields to our themes customize admin screen.', 'start': 9.715, 'duration': 7.505}, {'end': 19.081, 'text': "It's hard to explain with words.", 'start': 17.66, 'duration': 1.421}, {'end': 23.784, 'text': "So let's just jump right into a demo of the finished product that we will be building together.", 'start': 19.361, 'duration': 4.423}, {'end': 25.443, 'text': 'All right.', 'start': 25.043, 'duration': 0.4}, {'end': 29.927, 'text': 'So down in the footer I want you to pay attention to this new light gray box.', 'start': 25.503, 'duration': 4.424}, {'end': 32.929, 'text': "It's a call out that links to the about page.", 'start': 30.688, 'duration': 2.241}, {'end': 40.455, 'text': "But let's imagine that I want it to link to the portfolio page instead and use different text and a different image.", 'start': 33.67, 'duration': 6.785}, {'end': 45.079, 'text': "But let's also imagine that this is my Web site but I'm not a Web developer.", 'start': 41.096, 'duration': 3.983}, {'end': 51.044, 'text': 'Someone else coded this site for me and I just use the WordPress admin panel to manage the site.', 'start': 45.579, 'duration': 5.465}, {'end': 60.38, 'text': 'Well all I would need to do to make those changes happen is jump over to the admin dashboard and under the appearance menu click on customize.', 'start': 51.624, 'duration': 8.756}, {'end': 68.46, 'text': 'Now in our previous lesson we set up this standard color section to allow for customizable colors.', 'start': 62.796, 'duration': 5.664}], 'summary': "Learn to add custom options and content to themes' admin screen, enabling easy site management through wordpress admin panel.", 'duration': 65.829, 'max_score': 2.631, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM2631.jpg'}], 'start': 2.631, 'title': 'Customizing wordpress admin screen', 'summary': "Focuses on adding custom options and content fields to themes' customize admin screen, allowing for easy website management through the wordpress admin panel, with a demonstration of a light gray box call out that links to the about page and the potential for easy modifications.", 'chapters': [{'end': 68.46, 'start': 2.631, 'title': 'Customizing wordpress admin screen', 'summary': "Focuses on adding custom options and content fields to themes' customize admin screen, allowing for easy website management through the wordpress admin panel, with a demonstration of a light gray box call out that links to the about page and the potential for easy modifications.", 'duration': 65.829, 'highlights': ["The chapter focuses on adding custom options and content fields to themes' customize admin screen, allowing for easy website management through the WordPress admin panel.", 'Demonstration of a light gray box call out that links to the about page, showcasing the potential for easy modifications and customization.', 'Introduction of the scenario where a non-web developer can easily manage website changes through the WordPress admin panel.']}], 'duration': 65.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM2631.jpg', 'highlights': ["The chapter focuses on adding custom options and content fields to themes' customize admin screen, allowing for easy website management through the WordPress admin panel.", 'Demonstration of a light gray box call out that links to the about page, showcasing the potential for easy modifications and customization.', 'Introduction of the scenario where a non-web developer can easily manage website changes through the WordPress admin panel.']}, {'end': 461.519, 'segs': [{'end': 97.2, 'src': 'embed', 'start': 69.101, 'weight': 0, 'content': [{'end': 73.424, 'text': "And now in this lesson you'll notice that we have a brand new footer call out section.", 'start': 69.101, 'duration': 4.323}, {'end': 78.488, 'text': 'So if I click on that we can begin customizing the gray call out box.', 'start': 74.105, 'duration': 4.383}, {'end': 83.833, 'text': "Let's begin by editing the headline to say view our portfolio instead.", 'start': 79.049, 'duration': 4.784}, {'end': 89.237, 'text': 'So in this field view our portfolio.', 'start': 84.653, 'duration': 4.584}, {'end': 94.359, 'text': 'We can see that the live preview gets updated on the fly.', 'start': 91.178, 'duration': 3.181}, {'end': 97.2, 'text': 'We can also update the paragraph text.', 'start': 95.039, 'duration': 2.161}], 'summary': 'Lesson on customizing a new footer call out section, updating headline and paragraph text with live preview.', 'duration': 28.099, 'max_score': 69.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM69101.jpg'}, {'end': 215.038, 'src': 'embed', 'start': 188.703, 'weight': 1, 'content': [{'end': 194.109, 'text': 'So behind the scenes I just reset my theme files back to the way they were from our previous lesson.', 'start': 188.703, 'duration': 5.406}, {'end': 196.472, 'text': 'So you and I are now on the same page.', 'start': 194.61, 'duration': 1.862}, {'end': 200.716, 'text': "So let's code together to add back in the custom footer call out box.", 'start': 196.992, 'duration': 3.724}, {'end': 207.456, 'text': "Let's begin by adding static dummy HTML content and styling it with CSS.", 'start': 201.874, 'duration': 5.582}, {'end': 212.397, 'text': "Then once that's done we can write PHP to actually make it dynamic.", 'start': 208.216, 'duration': 4.181}, {'end': 215.038, 'text': "So let's jump into our text editors.", 'start': 212.977, 'duration': 2.061}], 'summary': 'Reset theme files, add custom footer call out box with static html and css, then make it dynamic with php.', 'duration': 26.335, 'max_score': 188.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM188703.jpg'}, {'end': 409.766, 'src': 'embed', 'start': 378.339, 'weight': 2, 'content': [{'end': 383.384, 'text': 'So back in our footer PHP with our HTML on the main footer call out div.', 'start': 378.339, 'duration': 5.045}, {'end': 386.747, 'text': "Let's give it a secondary class of clear fix.", 'start': 383.564, 'duration': 3.183}, {'end': 390.189, 'text': "Let's save this and also our CSS file.", 'start': 387.547, 'duration': 2.642}, {'end': 398.765, 'text': 'And if we check out the browser We see a two column layout so the image will take up this space once we add an image and our text is here.', 'start': 390.59, 'duration': 8.175}, {'end': 399.647, 'text': 'Looks good.', 'start': 399.166, 'duration': 0.481}, {'end': 402.391, 'text': "Let's fine tune these font sizes just a bit.", 'start': 400.027, 'duration': 2.364}, {'end': 409.766, 'text': "So let's create a new rule and target footer call out text H2.", 'start': 404.264, 'duration': 5.502}], 'summary': "Adding secondary class 'clear fix' to footer php for two column layout", 'duration': 31.427, 'max_score': 378.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM378339.jpg'}], 'start': 69.101, 'title': 'Customizing footer & styling layout', 'summary': 'Demonstrates customizing footer call out section, editing headline, updating paragraph text, changing image, adjusting link field, saving changes, resetting theme files, styling with css, and setting up two column layout with specific widths and font sizes before transitioning to php development.', 'chapters': [{'end': 300.076, 'start': 69.101, 'title': 'Customizing footer call out section', 'summary': 'Demonstrates how to customize a footer call out section by editing the headline, updating paragraph text, changing an image, and adjusting a link field, showing real-time updates and saving the changes, while also resetting the theme files to add static dummy html content and styling it with css before making it dynamic using php.', 'duration': 230.975, 'highlights': ['The chapter demonstrates how to customize a footer call out section by editing the headline, updating paragraph text, changing an image, and adjusting a link field, showing real-time updates and saving the changes. It shows the process of customizing a footer call out section by making specific changes such as editing the headline, updating paragraph text, changing an image, and adjusting a link field, with real-time updates and saving the changes.', 'Resetting the theme files to add static dummy HTML content and styling it with CSS before making it dynamic using PHP. It explains the process of resetting the theme files to add static dummy HTML content and styling it with CSS before making it dynamic using PHP.']}, {'end': 461.519, 'start': 301.638, 'title': 'Styling footer and setting up two column layout', 'summary': 'Covers styling the footer by setting a background color, adding padding and margin, creating a two column layout with specific widths, clearing floats, and adjusting font sizes before transitioning to php development.', 'duration': 159.881, 'highlights': ['The chapter covers styling the footer by setting a background color, adding padding and margin, creating a two column layout with specific widths, clearing floats, and adjusting font sizes before transitioning to PHP development.', "The two column layout is achieved by floating the two child divs with classes 'footer call out image' and 'footer call out text' to the left and right respectively, with widths of 30% and 67%.", "Padding of 20 pixels and margin of 30 pixels on the top are added to the overall div with a class of 'footer call out' to create extra spacing.", "Specific font size adjustments are made for the heading and paragraph elements within the 'footer call out text' div, with the heading set to 1.7 rem and the paragraph text set to 0.9 rem for improved readability.", 'The PHP development phase is introduced to enable dynamic content pulling from WordPress data, marking the transition from HTML and CSS tasks.']}], 'duration': 392.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM69101.jpg', 'highlights': ['The chapter demonstrates customizing a footer call out section with real-time updates and saving changes.', 'Resetting theme files to add static dummy HTML content and styling it with CSS before making it dynamic using PHP.', 'Styling the footer by setting a background color, adding padding and margin, creating a two column layout with specific widths, clearing floats, and adjusting font sizes before transitioning to PHP development.']}, {'end': 753.631, 'segs': [{'end': 534.723, 'src': 'embed', 'start': 488.066, 'weight': 1, 'content': [{'end': 494.73, 'text': "We can name the function anything we'd like but it's a good idea to prefix the function name with our theme name.", 'start': 488.066, 'duration': 6.664}, {'end': 499.233, 'text': "So that way the function doesn't conflict with any WordPress or plug in functions.", 'start': 495.17, 'duration': 4.063}, {'end': 502.334, 'text': 'So my theme name is learning WordPress.', 'start': 499.853, 'duration': 2.481}, {'end': 513.895, 'text': "So I'll begin with LWP for short and then I'll include an underscore and say footer call out open up a pair of parentheses and then a pair of curly brackets.", 'start': 502.514, 'duration': 11.381}, {'end': 518.317, 'text': 'And before we even write anything within the body of this function,', 'start': 514.677, 'duration': 3.64}, {'end': 524.919, 'text': "let's first drop down to a new line and tell WordPress exactly when we want it to run this new function.", 'start': 518.317, 'duration': 6.602}, {'end': 528.66, 'text': "So on our new line let's say add action.", 'start': 525.479, 'duration': 3.181}, {'end': 530.921, 'text': 'This takes two arguments.', 'start': 529.66, 'duration': 1.261}, {'end': 534.723, 'text': 'The first is the WordPress action that we want to hook on to.', 'start': 531.401, 'duration': 3.322}], 'summary': 'Prefix function names with theme name to avoid conflicts with wordpress or plugins. use add_action to specify when the function should run.', 'duration': 46.657, 'max_score': 488.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM488066.jpg'}, {'end': 611.718, 'src': 'embed', 'start': 559.399, 'weight': 0, 'content': [{'end': 562.101, 'text': 'Now we are ready to begin actually writing our function.', 'start': 559.399, 'duration': 2.702}, {'end': 566.023, 'text': "So let's ask ourselves what's the first thing that we want to do here.", 'start': 562.561, 'duration': 3.462}, {'end': 570.106, 'text': 'Well we want to add a new section to the customize screen.', 'start': 566.424, 'duration': 3.682}, {'end': 576.79, 'text': 'So, for example, in the WordPress admin dashboard, if we go back to appearance customize,', 'start': 570.686, 'duration': 6.104}, {'end': 582.734, 'text': 'we can see that there are currently five sections and we want to add another one for the footer call out.', 'start': 576.79, 'duration': 5.944}, {'end': 584.095, 'text': 'So back in our code.', 'start': 583.134, 'duration': 0.961}, {'end': 593.942, 'text': 'Everything that we do is going to be tied to a WordPress native object named WP underscore customize.', 'start': 585.876, 'duration': 8.066}, {'end': 603.729, 'text': 'This is an object that the WordPress system ships with by default and it contains a method that we can leverage named add section.', 'start': 594.782, 'duration': 8.947}, {'end': 606.716, 'text': 'We want to pass this two arguments.', 'start': 604.775, 'duration': 1.941}, {'end': 611.718, 'text': 'The first is the short name or variable name for the new section we want to create.', 'start': 607.276, 'duration': 4.442}], 'summary': 'Creating a new section for the customize screen in wordpress, specifically for the footer call out.', 'duration': 52.319, 'max_score': 559.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM559399.jpg'}, {'end': 687.586, 'src': 'embed', 'start': 659.233, 'weight': 5, 'content': [{'end': 666.816, 'text': 'We want there to be a field for the headline another field for the paragraph text another field for the image so on and so forth.', 'start': 659.233, 'duration': 7.583}, {'end': 672.379, 'text': "Now in terms of our code for each field that we want to create we'll need two things.", 'start': 667.336, 'duration': 5.043}, {'end': 674.66, 'text': 'a setting and a control.', 'start': 672.999, 'duration': 1.661}, {'end': 676.921, 'text': 'Think of those two things as a pair.', 'start': 675.14, 'duration': 1.781}, {'end': 681.383, 'text': 'The setting is where data will be stored in our database for a field,', 'start': 677.361, 'duration': 4.022}, {'end': 687.586, 'text': 'and the control is the text box that users actually see in the admin panel and type text into.', 'start': 681.383, 'duration': 6.203}], 'summary': 'Need fields for headline, paragraph text, and image with settings and controls for each.', 'duration': 28.353, 'max_score': 659.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM659233.jpg'}], 'start': 461.899, 'title': 'Customizing wordpress appearance', 'summary': 'Covers adding a footer call out, a new section, and custom fields to the wordpress appearance, with examples and emphasis on best practices for avoiding conflicts and setting up custom controls and fields.', 'chapters': [{'end': 559.319, 'start': 461.899, 'title': 'Adding footer call out to admin appearance', 'summary': 'Explains how to create a new function in the functions.php file to add a footer call out section to the admin appearance customized screen in wordpress, emphasizing the importance of prefixing the function name with the theme name for avoiding conflicts with other functions.', 'duration': 97.42, 'highlights': ['Creating a new function in functions.php file Explains the process of creating a new function in the functions.php file to add a footer call out section to the admin appearance customized screen.', 'Emphasizing the importance of prefixing the function name with the theme name Highlights the significance of prefixing the function name with the theme name to avoid conflicts with other WordPress or plugin functions.', 'Using add_action to specify when the function should run Describes the usage of add_action to specify when the function should run, using the customize register action hook as an example.']}, {'end': 658.712, 'start': 559.399, 'title': 'Adding a new section to wordpress customize screen', 'summary': 'Discusses adding a new section to the wordpress customize screen, leveraging the wp_customize object and its method add_section, with the example of adding a footer call out section.', 'duration': 99.313, 'highlights': ['The chapter discusses leveraging the WP_customize object and its method add_section to add a new section to the WordPress customize screen.', 'In the WordPress admin dashboard, there are currently five sections, and the goal is to add another one for the footer call out.', 'The method add_section requires providing a short name and an array with additional options as arguments.', 'The array for add_section method includes setting the title property, which visually displays the section in the admin panel.', "The example demonstrates creating a new section named 'footer call out' to be displayed in the customize screen."]}, {'end': 753.631, 'start': 659.233, 'title': 'Creating custom fields in wordpress', 'summary': "Explains the process of creating custom fields in wordpress, emphasizing the necessity of settings and controls as pairs for each field and providing an example of creating a setting and control pair for a headline with a default value of 'example headline text'.", 'duration': 94.398, 'highlights': ['The chapter emphasizes the necessity of settings and controls as pairs for each field, and explains that the setting is where data will be stored in the database, while the control is the text box that users see in the admin panel and type text into.', "The process of creating a setting and control pair for a headline is outlined, with the example of setting a default value of 'example headline text' for the headline setting."]}], 'duration': 291.732, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM461899.jpg', 'highlights': ['Covers adding a footer call out, a new section, and custom fields to the wordpress appearance', 'Emphasizing the importance of prefixing the function name with the theme name', 'Describes the usage of add_action to specify when the function should run', 'The chapter discusses leveraging the WP_customize object and its method add_section to add a new section to the WordPress customize screen', "The example demonstrates creating a new section named 'footer call out' to be displayed in the customize screen", 'The chapter emphasizes the necessity of settings and controls as pairs for each field', 'The process of creating a setting and control pair for a headline is outlined']}, {'end': 1085.666, 'segs': [{'end': 809.851, 'src': 'embed', 'start': 755.307, 'weight': 0, 'content': [{'end': 764.632, 'text': 'So again, we want to begin with the WP customize object, and this time we want to leverage a method that it has named add control.', 'start': 755.307, 'duration': 9.325}, {'end': 767.053, 'text': 'the code for creating a control is a bit different.', 'start': 764.632, 'duration': 2.421}, {'end': 777.699, 'text': 'So in this case we want to create a new instance or a new object that is based on the WP customize control class.', 'start': 767.413, 'duration': 10.286}, {'end': 783.84, 'text': 'So open up a pair of parentheses and this constructor function takes three arguments.', 'start': 778.599, 'duration': 5.241}, {'end': 788.342, 'text': 'The first argument is simply the WP customize object.', 'start': 784.461, 'duration': 3.881}, {'end': 792.583, 'text': 'The second argument is the variable name that we want to give this control.', 'start': 788.862, 'duration': 3.721}, {'end': 799.165, 'text': 'So I will name it LWP footer call out headline control.', 'start': 792.943, 'duration': 6.222}, {'end': 803.706, 'text': 'And the third argument is an array with a few additional options.', 'start': 799.985, 'duration': 3.721}, {'end': 809.851, 'text': "So let's create an array open up a new pair of parentheses in between that new pair of parentheses.", 'start': 804.406, 'duration': 5.445}], 'summary': 'Using the wp customize object, create a new control instance with three arguments.', 'duration': 54.544, 'max_score': 755.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM755307.jpg'}, {'end': 893.468, 'src': 'embed', 'start': 863.359, 'weight': 3, 'content': [{'end': 868.701, 'text': 'So, for the setting property, we just set it to equal WP footer.', 'start': 863.359, 'duration': 5.342}, {'end': 873.702, 'text': "call out headline, because that's the name of the setting that we created just a moment ago.", 'start': 868.701, 'duration': 5.001}, {'end': 874.642, 'text': 'All right.', 'start': 874.262, 'duration': 0.38}, {'end': 878.404, 'text': 'Now, before we save this file and test what we have so far.', 'start': 874.702, 'duration': 3.702}, {'end': 886.166, 'text': 'if we are going to use the WP customize object, we need to make sure that we can actually access it from within our function.', 'start': 878.404, 'duration': 7.762}, {'end': 893.468, 'text': 'To be able to access it all we need to do is pass it as a parameter within our main functions parentheses.', 'start': 886.866, 'duration': 6.602}], 'summary': "Setting property equal to 'wp footer' and accessing wp customize object within function.", 'duration': 30.109, 'max_score': 863.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM863359.jpg'}, {'end': 927.879, 'src': 'heatmap', 'start': 886.866, 'weight': 0.983, 'content': [{'end': 893.468, 'text': 'To be able to access it all we need to do is pass it as a parameter within our main functions parentheses.', 'start': 886.866, 'duration': 6.602}, {'end': 898.91, 'text': 'So here we just include dollar sign WP customize.', 'start': 894.068, 'duration': 4.842}, {'end': 907.152, 'text': "All right now let's save this file and jump back into our admin dashboard and revisit the appearance customize screen.", 'start': 899.49, 'duration': 7.662}, {'end': 913.935, 'text': 'So here we see that we successfully added the new footer call out section, and if we click on it,', 'start': 908.325, 'duration': 5.61}, {'end': 917.561, 'text': "there's the headline field and it even has the default value that we set.", 'start': 913.935, 'duration': 3.626}, {'end': 927.879, 'text': 'Now, currently, if I change this to testing the field, We see that in the live preview the headline text did not update,', 'start': 918.182, 'duration': 9.697}], 'summary': 'Passed parameter within function to add new footer call out section successfully.', 'duration': 41.013, 'max_score': 886.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM886866.jpg'}, {'end': 992.342, 'src': 'embed', 'start': 963.812, 'weight': 4, 'content': [{'end': 970.154, 'text': "Now, this get the mod function will successfully retrieve that value, but we don't just want to store the value in memory.", 'start': 963.812, 'duration': 6.342}, {'end': 973.355, 'text': 'We want to actually echo it out onto the page.', 'start': 970.234, 'duration': 3.121}, {'end': 974.876, 'text': "So let's save this.", 'start': 973.795, 'duration': 1.081}, {'end': 977.517, 'text': 'And if we refresh in the admin panel.', 'start': 975.236, 'duration': 2.281}, {'end': 989.081, 'text': 'Now, if we go into footer call out and attempt to change this testing one, two, three, the live preview actually updates.', 'start': 980.358, 'duration': 8.723}, {'end': 992.342, 'text': 'Perfect So that takes care of the headline.', 'start': 989.481, 'duration': 2.861}], 'summary': 'The mod function retrieves and echoes a value onto the page, updating the live preview in the admin panel.', 'duration': 28.53, 'max_score': 963.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM963812.jpg'}], 'start': 755.307, 'title': 'Customizing wordpress controls and footer', 'summary': 'Covers creating wp controls using the add control method with required objects, variables, and options. it also explains customizing the footer by creating settings and controls for headline and paragraph, enabling users to preview changes in the admin panel and access stored values using php.', 'chapters': [{'end': 835.128, 'start': 755.307, 'title': 'Customizing wp control creation', 'summary': 'Covers the creation of a wp control using the add control method, requiring a wp customize object, a variable name, and an array with additional options.', 'duration': 79.821, 'highlights': ['The chapter covers the creation of a WP control using the add control method, requiring a WP customize object, a variable name, and an array with additional options.', 'The method for creating a control is different, as it involves creating a new instance based on the WP customize control class and providing three arguments.', 'The first argument is the WP customize object, the second is the variable name for the control, and the third is an array with additional options such as label and section.']}, {'end': 1085.666, 'start': 835.688, 'title': 'Customizing footer in wordpress', 'summary': 'Explains how to customize the footer in wordpress by creating settings and controls for the headline and paragraph, allowing users to update and preview the changes in the admin panel. it also demonstrates how to access and echo the stored values onto the page using php.', 'duration': 249.978, 'highlights': ['The chapter explains how to customize the footer in WordPress by creating settings and controls for the headline and paragraph, allowing users to update and preview the changes in the admin panel. creating settings and controls for the headline and paragraph', 'It also demonstrates how to access and echo the stored values onto the page using PHP. access and echo the stored values onto the page using PHP']}], 'duration': 330.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM755307.jpg', 'highlights': ['The chapter covers the creation of a WP control using the add control method, requiring a WP customize object, a variable name, and an array with additional options.', 'The method for creating a control is different, involving creating a new instance based on the WP customize control class and providing three arguments.', 'The first argument is the WP customize object, the second is the variable name for the control, and the third is an array with additional options such as label and section.', 'The chapter explains how to customize the footer in WordPress by creating settings and controls for the headline and paragraph, allowing users to update and preview the changes in the admin panel.', 'It also demonstrates how to access and echo the stored values onto the page using PHP.']}, {'end': 1535.922, 'segs': [{'end': 1112.23, 'src': 'embed', 'start': 1085.726, 'weight': 0, 'content': [{'end': 1093.349, 'text': "But before we test things out in the admin panel, let's first jump into footer dot PHP and update our HTML.", 'start': 1085.726, 'duration': 7.623}, {'end': 1099.671, 'text': "So let's remove this entire paragraph element that is static and instead let's drop into PHP.", 'start': 1093.749, 'duration': 5.922}, {'end': 1112.23, 'text': 'and echo out the results of the get theme mod function and we want to retrieve the setting that is named LWP footer call out text.', 'start': 1100.899, 'duration': 11.331}], 'summary': 'In the admin panel, update footer.php to retrieve lwp footer call out text using the get_theme_mod function.', 'duration': 26.504, 'max_score': 1085.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1085726.jpg'}, {'end': 1163.921, 'src': 'embed', 'start': 1139.191, 'weight': 4, 'content': [{'end': 1150.773, 'text': 'we can just jump back to our HTML and we can wrap this within a built in WordPress function that will parse plain text and return it as HTML that uses paragraph tags.', 'start': 1139.191, 'duration': 11.582}, {'end': 1155.674, 'text': "So let's wrap this in a function named WP Auto P.", 'start': 1151.193, 'duration': 4.481}, {'end': 1163.921, 'text': "Be sure to include an extra closing parentheses here and then let's save this file and refresh in the admin panel.", 'start': 1157.074, 'duration': 6.847}], 'summary': 'Wrap plain text in wordpress function wp auto p for html conversion.', 'duration': 24.73, 'max_score': 1139.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1139191.jpg'}, {'end': 1355.068, 'src': 'embed', 'start': 1321.477, 'weight': 5, 'content': [{'end': 1323.098, 'text': 'If we hover over this link.', 'start': 1321.477, 'duration': 1.621}, {'end': 1329, 'text': 'if you look in the bottom left corner of my browser, you can see the status bar that tells us where this link is pointing to,', 'start': 1323.098, 'duration': 5.902}, {'end': 1331.741, 'text': "and we can see that it's really just returning a value of six.", 'start': 1329, 'duration': 2.741}, {'end': 1337.723, 'text': "And that's because the post or page ID of the contact us page is the number six.", 'start': 1332.461, 'duration': 5.262}, {'end': 1355.068, 'text': 'So all we need to do to convert that ID number into a usable link is go back into our code and wrap this get theme mod function in another function named get permalink and be sure to include the extra closing parentheses here.', 'start': 1338.283, 'duration': 16.785}], 'summary': 'Hovering over a link reveals it points to page id six, which can be converted into a usable link by wrapping a function in another function.', 'duration': 33.591, 'max_score': 1321.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1321477.jpg'}, {'end': 1396.642, 'src': 'embed', 'start': 1369.119, 'weight': 3, 'content': [{'end': 1373.002, 'text': "Next let's work on adding a field so users can upload an image.", 'start': 1369.119, 'duration': 3.883}, {'end': 1377.846, 'text': "So back in the text editor let's jump into the functions dot php file.", 'start': 1373.563, 'duration': 4.283}, {'end': 1382.691, 'text': "Let's copy and paste the last setting in control pair so we don't have to type it all out again.", 'start': 1378.427, 'duration': 4.264}, {'end': 1387.355, 'text': 'So copy drop down a few lines and paste it in again.', 'start': 1383.291, 'duration': 4.064}, {'end': 1391.238, 'text': "Let's change this copy from link to image.", 'start': 1388.455, 'duration': 2.783}, {'end': 1396.642, 'text': "Let's change the control variable name from link to image update label.", 'start': 1391.758, 'duration': 4.884}], 'summary': 'Adding image upload field in functions.php file.', 'duration': 27.523, 'max_score': 1369.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1369119.jpg'}, {'end': 1468.772, 'src': 'heatmap', 'start': 1418.476, 'weight': 2, 'content': [{'end': 1430.824, 'text': "So instead of using this generic WP customize control class let's delete that and replace it with WP customize cropped image control.", 'start': 1418.476, 'duration': 12.348}, {'end': 1437.311, 'text': 'And this class will even let us specify an exact width and height aspect ratio for the image.', 'start': 1431.786, 'duration': 5.525}, {'end': 1441.755, 'text': 'So it will force admin users to crop the image to meet the ratio we set.', 'start': 1437.792, 'duration': 3.963}, {'end': 1450.723, 'text': 'So for example we can say width seven fifty and height 500.', 'start': 1442.116, 'duration': 8.607}, {'end': 1454.044, 'text': 'Obviously you could set any width and height aspect ratio you want.', 'start': 1450.723, 'duration': 3.321}, {'end': 1459.007, 'text': "This is just an example but let's save this file and refresh the admin panel.", 'start': 1454.444, 'duration': 4.563}, {'end': 1461.088, 'text': 'Here we can see the new image field.', 'start': 1459.407, 'duration': 1.681}, {'end': 1462.769, 'text': "Let's select an image.", 'start': 1461.688, 'duration': 1.081}, {'end': 1465.57, 'text': "I'll upload a new image from my computer.", 'start': 1463.589, 'duration': 1.981}, {'end': 1468.772, 'text': 'I use this photo of the beach.', 'start': 1465.59, 'duration': 3.182}], 'summary': 'Replacing generic wp customize control with wp customize cropped image control allows specifying exact width and height aspect ratio, forcing admin users to crop the image to meet the set ratio.', 'duration': 32.247, 'max_score': 1418.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1418476.jpg'}], 'start': 1085.726, 'title': 'Updating footer layout and creating link and image fields', 'summary': 'Demonstrates updating the footer layout in php, removing static html elements, using php to echo out the result of get theme mod function, and wrapping text within a wordpress function to parse plain text and return it as html. it also covers the process of creating link and image fields in a wordpress theme, including modifying settings and controls in functions.php, troubleshooting link functionality, and implementing an image upload field with wordpress-specific class for image control.', 'chapters': [{'end': 1184.769, 'start': 1085.726, 'title': 'Updating footer layout in php', 'summary': 'Demonstrates updating the footer layout in php, removing static html elements, using php to echo out the result of get theme mod function, and wrapping text within a wordpress function to parse plain text and return it as html.', 'duration': 99.043, 'highlights': ['Updating footer layout in PHP Demonstrates the process of updating the footer layout in PHP.', 'Using PHP to echo out the result of get theme mod function Switching from static HTML to using PHP to echo out the result of the get theme mod function.', 'Wrapping text within a WordPress function to parse plain text and return it as HTML Utilizing a built-in WordPress function, WP Auto P, to parse plain text and return it as HTML using paragraph tags.']}, {'end': 1535.922, 'start': 1185.29, 'title': 'Creating link and image fields', 'summary': 'Covers the process of creating link and image fields in a wordpress theme, including modifying settings and controls in functions.php, troubleshooting link functionality, and implementing an image upload field with wordpress-specific class for image control.', 'duration': 350.632, 'highlights': ['Troubleshooting link functionality The tutorial outlines the process of troubleshooting link functionality, where the issue of the link pointing to a numerical ID value instead of the actual page is addressed.', 'Implementing image upload field with WordPress-specific class for image control The chapter explains the process of implementing an image upload field using the WordPress-specific WP Customize Cropped Image Control class, stating the ability to set specific width, height, and aspect ratio for the image.', 'Modifying settings and controls in functions.php The tutorial details the modification of settings and controls in functions.php file to create link and image fields, including changing variable names, updating settings, and replacing generic control class with WP Customize Cropped Image Control.']}], 'duration': 450.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1085726.jpg', 'highlights': ['Using PHP to echo out the result of get theme mod function Switching from static HTML to using PHP to echo out the result of the get theme mod function.', 'Updating footer layout in PHP Demonstrates the process of updating the footer layout in PHP.', 'Implementing image upload field with WordPress-specific class for image control The chapter explains the process of implementing an image upload field using the WordPress-specific WP Customize Cropped Image Control class, stating the ability to set specific width, height, and aspect ratio for the image.', 'Modifying settings and controls in functions.php The tutorial details the modification of settings and controls in functions.php file to create link and image fields, including changing variable names, updating settings, and replacing generic control class with WP Customize Cropped Image Control.', 'Wrapping text within a WordPress function to parse plain text and return it as HTML Utilizing a built-in WordPress function, WP Auto P, to parse plain text and return it as HTML using paragraph tags.', 'Troubleshooting link functionality The tutorial outlines the process of troubleshooting link functionality, where the issue of the link pointing to a numerical ID value instead of the actual page is addressed.']}, {'end': 1804.913, 'segs': [{'end': 1566.572, 'src': 'embed', 'start': 1536.422, 'weight': 1, 'content': [{'end': 1539.023, 'text': 'Be sure to add the extra closing parentheses here.', 'start': 1536.422, 'duration': 2.601}, {'end': 1542.444, 'text': "Let's save this file and refresh the admin panel.", 'start': 1539.583, 'duration': 2.861}, {'end': 1544.244, 'text': "And there's the image.", 'start': 1543.364, 'duration': 0.88}, {'end': 1547.365, 'text': 'And finally before we bring this lesson to a close.', 'start': 1544.784, 'duration': 2.581}, {'end': 1552.146, 'text': "What if the admin user decides that they don't want to display this footer box at all.", 'start': 1547.785, 'duration': 4.361}, {'end': 1559.168, 'text': "So, to address that, let's create one final field that asks the user do you want to display this section?", 'start': 1552.586, 'duration': 6.582}, {'end': 1561.949, 'text': 'and then they can choose between values of yes or no?', 'start': 1559.168, 'duration': 2.781}, {'end': 1566.572, 'text': "So, to set that up back in our text editor, let's jump into functions dot,", 'start': 1562.569, 'duration': 4.003}], 'summary': 'Adding a final field for displaying a section with yes/no choice.', 'duration': 30.15, 'max_score': 1536.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1536422.jpg'}, {'end': 1669.006, 'src': 'embed', 'start': 1638.833, 'weight': 2, 'content': [{'end': 1640.339, 'text': 'The first option is no.', 'start': 1638.833, 'duration': 1.506}, {'end': 1643.774, 'text': 'which will have a value of no.', 'start': 1642.233, 'duration': 1.541}, {'end': 1647.215, 'text': 'And the second option is obviously yes.', 'start': 1644.594, 'duration': 2.621}, {'end': 1648.296, 'text': "So that's the label.", 'start': 1647.416, 'duration': 0.88}, {'end': 1650.337, 'text': 'And it has a value of yes.', 'start': 1648.656, 'duration': 1.681}, {'end': 1655.159, 'text': "Let's go ahead and save this file and then jump into our footer dot PHP.", 'start': 1651.057, 'duration': 4.102}, {'end': 1662.443, 'text': 'And we only want to display this footer call out content if the user answers yes to that display field question.', 'start': 1655.639, 'duration': 6.804}, {'end': 1667.225, 'text': "So let's just wrap this entire bit of content in a PHP if statement.", 'start': 1662.823, 'duration': 4.402}, {'end': 1669.006, 'text': 'So drop into PHP.', 'start': 1667.865, 'duration': 1.141}], 'summary': 'The transcript discusses setting up a conditional display based on user input: if yes, then display the footer callout content.', 'duration': 30.173, 'max_score': 1638.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1638833.jpg'}, {'end': 1788.718, 'src': 'embed', 'start': 1760.959, 'weight': 0, 'content': [{'end': 1763.981, 'text': 'Git and GitHub so we can collaborate with other developers.', 'start': 1760.959, 'duration': 3.022}, {'end': 1767.664, 'text': 'Node.js tools like NPM and Gulp.', 'start': 1764.682, 'duration': 2.982}, {'end': 1772.647, 'text': 'You may already have a strong understanding of CSS but we are going to take it to another level.', 'start': 1768.084, 'duration': 4.563}, {'end': 1776.189, 'text': 'Mobile first performance so our sites will load super quickly.', 'start': 1773.127, 'duration': 3.062}, {'end': 1781.973, 'text': 'JavaScript will cover ES6 basics and how to use tools like Babel and Webpack.', 'start': 1776.69, 'duration': 5.283}, {'end': 1788.718, 'text': "We'll learn about the basics of object oriented programming with JavaScript and we'll also cover the popular module pattern.", 'start': 1782.313, 'duration': 6.405}], 'summary': 'Learn git, node.js, css, mobile-first design, es6 javascript, and object-oriented programming for web development.', 'duration': 27.759, 'max_score': 1760.959, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1760959.jpg'}], 'start': 1536.422, 'title': 'Customizing footer display and web development course introduction', 'summary': "Covers adding a display option for the footer box with default value set to 'no' and implementing a php if statement to display the footer content based on user's input. additionally, it introduces a new web development video course covering various advanced topics in web development.", 'chapters': [{'end': 1638.371, 'start': 1536.422, 'title': 'Adding display option for footer box', 'summary': "Covers adding a display option for the footer box, allowing the admin user to choose whether to display the section or not, with the default value set to 'no' and the available choices being 'yes' or 'no'.", 'duration': 101.949, 'highlights': ["The chapter covers adding a display option for the footer box, allowing the admin user to choose whether to display the section or not, with the default value set to 'no' and the available choices being 'yes' or 'no'.", "The setting name is updated to 'display' from 'headline' and the control variable name is also updated to 'display' with the label 'display this section', with the default value set to 'no'.", 'The control type is set to a select element (a drop down) and the available choices are specified within an array.']}, {'end': 1723.29, 'start': 1638.833, 'title': 'Php if statement for footer call out', 'summary': "Covers implementing a php if statement to display the footer content based on the user's input, with a demonstration of the functionality, resulting in the footer box being displayed upon changing the input value from 'no' to 'yes'.", 'duration': 84.457, 'highlights': ["The chapter covers implementing a PHP if statement to display the footer content based on the user's input, with a demonstration of the functionality, resulting in the footer box being displayed upon changing the input value from 'no' to 'yes'.", "Demonstrates the process of using PHP if statements to conditionally display content based on user input, showcasing the functionality by switching between 'no' and 'yes' values for the footer display field.", "The value of the 'LWP footer call out display' field is used to control the display of the footer content, with the demonstration showing the content being displayed when the value is 'yes' and hidden when the value is 'no'."]}, {'end': 1804.913, 'start': 1723.971, 'title': 'New web development course', 'summary': 'Introduces a new web development video course aimed at bridging the gap between basic html and css knowledge and the skill set required by employers, covering topics such as git, github, node.js, mobile-first performance, es6 javascript, object-oriented programming, and career progression.', 'duration': 80.942, 'highlights': ['The course aims to bridge the gap between basic HTML and CSS knowledge and the skill set required by employers, covering Git, GitHub, Node.js, mobile-first performance, ES6 JavaScript, object-oriented programming, and career progression.', 'The course is paced for just about anyone to follow along, with the only prerequisite being basic HTML and CSS knowledge.', 'Topics covered in the course include Git and GitHub, Node.js tools like NPM and Gulp, advanced CSS, mobile-first performance, ES6 JavaScript, object-oriented programming, and career progression.', "The course covers topics such as Git, GitHub, Node.js, mobile-first performance, ES6 JavaScript, and object-oriented programming to enhance a web developer's skill set.", 'The course is designed for just about anyone with basic HTML and CSS knowledge, aiming to bridge the gap between this knowledge and the skill set required by employers.']}], 'duration': 268.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YzNfIM_9TaM/pics/YzNfIM_9TaM1536422.jpg', 'highlights': ["The course covers topics such as Git, GitHub, Node.js, mobile-first performance, ES6 JavaScript, and object-oriented programming to enhance a web developer's skill set.", "The chapter covers adding a display option for the footer box, allowing the admin user to choose whether to display the section or not, with the default value set to 'no' and the available choices being 'yes' or 'no'.", "The chapter covers implementing a PHP if statement to display the footer content based on the user's input, with a demonstration of the functionality, resulting in the footer box being displayed upon changing the input value from 'no' to 'yes'."]}], 'highlights': ["The course covers topics such as Git, GitHub, Node.js, mobile-first performance, ES6 JavaScript, and object-oriented programming to enhance a web developer's skill set.", "The chapter covers adding a display option for the footer box, allowing the admin user to choose whether to display the section or not, with the default value set to 'no' and the available choices being 'yes' or 'no'.", "The chapter covers implementing a PHP if statement to display the footer content based on the user's input, with a demonstration of the functionality, resulting in the footer box being displayed upon changing the input value from 'no' to 'yes'.", 'The chapter demonstrates customizing a footer call out section with real-time updates and saving changes.', "The chapter focuses on adding custom options and content fields to themes' customize admin screen, allowing for easy website management through the WordPress admin panel.", 'Covers adding a footer call out, a new section, and custom fields to the wordpress appearance', 'Demonstration of a light gray box call out that links to the about page, showcasing the potential for easy modifications and customization.', 'Introduction of the scenario where a non-web developer can easily manage website changes through the WordPress admin panel.', 'The chapter explains how to customize the footer in WordPress by creating settings and controls for the headline and paragraph, allowing users to update and preview the changes in the admin panel.', "The example demonstrates creating a new section named 'footer call out' to be displayed in the customize screen"]}