title
WordPress Plugin Development: Gutenberg Blocks, React & More

description
Join my full course: https://learnwebcode.com/courses/ This video assumes you're already familiar with WordPress and how how to install a local dev environment. If you aren't familiar with that yet I suggest watching another one of my videos first: https://www.youtube.com/watch?v=FVqzKAUsM68 0:00:00 Intro 0:02:56 Overview 0:16:32 Our First Plugin 0:27:12 Settings Page 0:42:11 Settings API 1:02:02 Settings Form 1:22:01 Word Count 1:41:57 Localization 2:02:12 JavaScript Intro 2:21:57 JSX & Workflow 2:41:43 Block Attributes 3:01:42 Block Output 3:24:01 Pros & Cons of Custom Post Types Follow me for updates on new videos or projects: Instagram: https://www.instagram.com/javaschiff/ Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/ Twitch: https://www.twitch.tv/learnwebcode

detail
{'title': 'WordPress Plugin Development: Gutenberg Blocks, React & More', 'heatmap': [{'end': 3644.873, 'start': 3365.419, 'weight': 0.741}, {'end': 7823.502, 'start': 7682.789, 'weight': 1}, {'end': 9039.476, 'start': 8900.271, 'weight': 0.787}, {'end': 9445.763, 'start': 9305.789, 'weight': 0.715}], 'summary': 'A comprehensive video on wordpress plugin development covers creating settings pages, using javascript and react js, php usage, custom post types vs custom database tables, wordpress plugin basics, creating settings, custom fields, translations, integrating javascript with wordpress, using jsx, managing dynamic block attributes, custom and dynamic block types, and wordpress database optimization with insights on performance improvements and premium content availability.', 'chapters': [{'end': 484.81, 'segs': [{'end': 114.528, 'src': 'embed', 'start': 89.794, 'weight': 0, 'content': [{'end': 99.121, 'text': 'in the full course we learn even more about plugin development, including How to set up your own admin sidebar menu with your own custom SVG icon.', 'start': 89.794, 'duration': 9.327}, {'end': 104.924, 'text': '16 lessons where we build two super custom Gutenberg block types together.', 'start': 99.141, 'duration': 5.783}, {'end': 111.107, 'text': 'One is a multiple choice quiz block type that uses React even on the public front end.', 'start': 105.464, 'duration': 5.643}, {'end': 114.528, 'text': 'And the other is called Featured Professor.', 'start': 111.867, 'duration': 2.661}], 'summary': 'The course covers plugin development, with 16 lessons creating custom gutenberg block types, including a react-based multiple choice quiz block and a featured professor block.', 'duration': 24.734, 'max_score': 89.794, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q89794.jpg'}, {'end': 201.497, 'src': 'embed', 'start': 156.474, 'weight': 1, 'content': [{'end': 160.916, 'text': "So if you work through this video and you're still interested and you want to learn more,", 'start': 156.474, 'duration': 4.442}, {'end': 167.439, 'text': 'you can find a super discounted coupon in the description for this video to join my full course at the best price.', 'start': 160.916, 'duration': 6.523}, {'end': 174.202, 'text': 'Having said all of that, I hope this video helps you on your WordPress, your PHP and your JavaScript journey.', 'start': 167.859, 'duration': 6.343}, {'end': 176.302, 'text': 'Now enjoy the actual video.', 'start': 174.642, 'duration': 1.66}, {'end': 179.964, 'text': 'Hello, everyone.', 'start': 179.204, 'duration': 0.76}, {'end': 186.927, 'text': "In this video, we're starting a new three chapter section of the course that is all about plugin development.", 'start': 180.464, 'duration': 6.463}, {'end': 192.049, 'text': "Without further ado, let's review what these three new chapters are going to be about.", 'start': 187.567, 'duration': 4.482}, {'end': 195.612, 'text': 'So the first chapter will be about PHP.', 'start': 192.95, 'duration': 2.662}, {'end': 201.497, 'text': 'This will cover sort of the traditional skeleton or building blocks of creating a new plug in.', 'start': 196.313, 'duration': 5.184}], 'summary': 'A video offers a discounted coupon for a full course on plugin development, covering php, wordpress, and javascript.', 'duration': 45.023, 'max_score': 156.474, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q156474.jpg'}, {'end': 484.81, 'src': 'embed', 'start': 458.304, 'weight': 4, 'content': [{'end': 467.647, 'text': 'So we could say What color is the sky on a clear and sunny day? And then you give it multiple options or answers.', 'start': 458.304, 'duration': 9.343}, {'end': 475.228, 'text': 'So we could say orange, add another answer, green, add another answer, blue.', 'start': 467.787, 'duration': 7.441}, {'end': 482.509, 'text': "And then I'm not sure if you can see it but there are yellow star outlines and that's how you can mark which answer is the correct answer.", 'start': 475.848, 'duration': 6.661}, {'end': 484.81, 'text': "So I'll star the blue answer.", 'start': 482.569, 'duration': 2.241}], 'summary': 'Creating a question with multiple choice answers and marking the correct answer with a yellow star.', 'duration': 26.506, 'max_score': 458.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q458304.jpg'}], 'start': 0.81, 'title': 'Wordpress plugin development and databases', 'summary': 'Covers a four-hour video on wordpress plugin development, including creating settings page, localization, using javascript and react js, understanding wordpress npm workflow, php usage for dynamic block types, and custom post types vs custom database table. additionally, a premium course of 10+ hours is mentioned, focusing on plugin development with custom gutenberg block types, creating custom database tables, and a discounted coupon for the full course. it also discusses creating wordpress plugins with a focus on databases and examples, such as building a post statistics plugin, a word filter plugin, and creating a new block type named quick question in javascript.', 'chapters': [{'end': 226.176, 'start': 0.81, 'title': 'Wordpress plugin development overview', 'summary': 'Covers a four-hour video on wordpress plugin development, including creating settings page, localization, using javascript and react js, understanding wordpress npm workflow, php usage for dynamic block types, and custom post types vs custom database table. additionally, a premium course of 10+ hours is mentioned, focusing on plugin development with custom gutenberg block types, creating custom database tables, and a discounted coupon for the full course.', 'duration': 225.366, 'highlights': ['A premium course of 10+ hours is mentioned, focusing on plugin development with custom Gutenberg block types, creating custom database tables, and a discounted coupon for the full course. The speaker mentions adding 10+ hours of new lessons to a premium WordPress development course, covering plugin development with custom Gutenberg block types, creating custom database tables, and offering a discounted coupon for the full course.', 'The chapter covers a four-hour video on WordPress plugin development, including creating settings page, localization, using JavaScript and React JS, understanding WordPress NPM workflow, PHP usage for dynamic block types, and custom post types vs custom database table. The chapter provides a comprehensive overview of a four-hour video on WordPress plugin development, encompassing creating settings page, localization, using JavaScript and React JS, understanding WordPress NPM workflow, PHP usage for dynamic block types, and custom post types vs custom database table.', 'The first chapter will be about PHP, covering the traditional skeleton or building blocks of creating a new plugin. The first chapter focuses on PHP and covers the traditional skeleton or building blocks of creating a new plugin.']}, {'end': 484.81, 'start': 226.777, 'title': 'Creating wordpress plugins: databases and examples', 'summary': 'Discusses creating wordpress plugins with a focus on databases and examples, including building a post statistics plugin and a word filter plugin, as well as creating a new block type named quick question in javascript.', 'duration': 258.033, 'highlights': ['The chapter discusses creating a WordPress plugin that dynamically adds post statistics, with options to customize the statistics headline, placement, and content in the admin dashboard. The plugin dynamically adds post statistics, displaying word count, character count, and estimated reading time. It provides options to customize the statistics headline, placement, and content in the admin dashboard.', 'It covers the creation of a word filter plugin that allows users to filter out specific words from website or blog post content, with options to set replacement text and customize filtering rules in the admin dashboard. The word filter plugin enables users to filter out specific words from website or blog post content, with options to set replacement text and customize filtering rules in the admin dashboard. It provides a user interface to include or exclude filtered words.', 'The chapter also delves into creating a new block type named quick question in JavaScript, allowing website owners to engage viewers by posing questions with multiple options and marking correct answers. The chapter explores the creation of a new block type named quick question in JavaScript, enabling website owners to engage viewers by posing questions with multiple options and marking correct answers. This block type facilitates interactive engagement with website visitors.']}], 'duration': 484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q810.jpg', 'highlights': ['The chapter covers a four-hour video on WordPress plugin development, including creating settings page, localization, using JavaScript and React JS, understanding WordPress NPM workflow, PHP usage for dynamic block types, and custom post types vs custom database table.', 'A premium course of 10+ hours is mentioned, focusing on plugin development with custom Gutenberg block types, creating custom database tables, and a discounted coupon for the full course.', 'The chapter discusses creating a WordPress plugin that dynamically adds post statistics, with options to customize the statistics headline, placement, and content in the admin dashboard.', 'It covers the creation of a word filter plugin that allows users to filter out specific words from website or blog post content, with options to set replacement text and customize filtering rules in the admin dashboard.', 'The chapter also delves into creating a new block type named quick question in JavaScript, allowing website owners to engage viewers by posing questions with multiple options and marking correct answers.', 'The first chapter will be about PHP, covering the traditional skeleton or building blocks of creating a new plugin.']}, {'end': 1537.794, 'segs': [{'end': 758.788, 'src': 'embed', 'start': 701.681, 'weight': 3, 'content': [{'end': 710.804, 'text': 'What if instead I only want to see the pets that are of the species cat and only cats that have a favorite hobby of scratching furniture?', 'start': 701.681, 'duration': 9.123}, {'end': 724.277, 'text': 'So if I go up into the address bar and add on question mark, species equals cat and fav hobby equals scratching furniture.', 'start': 711.86, 'duration': 12.417}, {'end': 728.344, 'text': 'Let me scroll down a little bit.', 'start': 727.403, 'duration': 0.941}, {'end': 734.049, 'text': 'So you can see out of the 100,000 pets, there are 805 that match that specific search.', 'start': 728.644, 'duration': 5.405}, {'end': 738.093, 'text': 'However, that took almost a full second to complete.', 'start': 734.37, 'duration': 3.723}, {'end': 741.236, 'text': 'Let me refresh again so we can see sort of an average speed.', 'start': 738.113, 'duration': 3.123}, {'end': 742.057, 'text': 'That took 1.1 seconds.', 'start': 741.276, 'duration': 0.781}, {'end': 747.101, 'text': "Everything's subjective, but I feel like that's very slow.", 'start': 744.179, 'duration': 2.922}, {'end': 754.826, 'text': "Now this example that we're looking at right now, this is using custom post types to store the pet data.", 'start': 747.661, 'duration': 7.165}, {'end': 758.788, 'text': 'So each one of these hundred thousand pets is a post.', 'start': 755.166, 'duration': 3.622}], 'summary': 'Searching for cats with scratching hobby took 1.1 seconds, 805 matching pets out of 100,000.', 'duration': 57.107, 'max_score': 701.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q701681.jpg'}, {'end': 1226.103, 'src': 'embed', 'start': 1199.288, 'weight': 4, 'content': [{'end': 1204.57, 'text': "For now, though, let's just go ahead and save this file and then back in WordPress.", 'start': 1199.288, 'duration': 5.282}, {'end': 1206.731, 'text': 'If we go into the admin dashboard.', 'start': 1204.61, 'duration': 2.121}, {'end': 1210.712, 'text': 'And then in the sidebar, look for plugins.', 'start': 1207.991, 'duration': 2.721}, {'end': 1217.298, 'text': 'Well now in this list of plugins we see our test plugin.', 'start': 1212.335, 'duration': 4.963}, {'end': 1218.919, 'text': "There's the description.", 'start': 1217.778, 'duration': 1.141}, {'end': 1221.02, 'text': "There's the version number and there's the author.", 'start': 1218.979, 'duration': 2.041}, {'end': 1226.103, 'text': "So just like any other plugin let's go ahead and activate it.", 'start': 1221.68, 'duration': 4.423}], 'summary': 'In wordpress, activate the test plugin with version number and author details.', 'duration': 26.815, 'max_score': 1199.288, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q1199288.jpg'}, {'end': 1278.412, 'src': 'embed', 'start': 1253.257, 'weight': 0, 'content': [{'end': 1259.921, 'text': "filter Be sure to have a semi colon after we call that and then we're just going to give it two arguments here.", 'start': 1253.257, 'duration': 6.664}, {'end': 1261.782, 'text': 'So a comma B as placeholders.', 'start': 1260.001, 'duration': 1.781}, {'end': 1269.527, 'text': 'The first argument instead of this a placeholder would be quotes the underscore content.', 'start': 1262.282, 'duration': 7.245}, {'end': 1274.47, 'text': 'WordPress has all sorts of different filters that we can hook on to.', 'start': 1270.447, 'duration': 4.023}, {'end': 1276.571, 'text': 'This one is aptly named.', 'start': 1275.19, 'duration': 1.381}, {'end': 1278.412, 'text': "I think you can guess what it's going to do.", 'start': 1276.631, 'duration': 1.781}], 'summary': 'Explaining how to use wordpress filters with placeholders and a semi colon.', 'duration': 25.155, 'max_score': 1253.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q1253257.jpg'}, {'end': 1462.721, 'src': 'embed', 'start': 1439.002, 'weight': 1, 'content': [{'end': 1448.89, 'text': 'Cool One last thing that I do want to cover in this video is what if we only wanted to add this extra sentence on a detail view for a blog post.', 'start': 1439.002, 'duration': 9.888}, {'end': 1457.156, 'text': "For example if you had other pages that use the content to display the content maybe you don't want to use this filter everywhere.", 'start': 1449.31, 'duration': 7.846}, {'end': 1462.721, 'text': 'So a common technique here would just be to wrap this line within an if statement.', 'start': 1457.937, 'duration': 4.784}], 'summary': 'Technique to selectively add content in a blog post detail view using if statement', 'duration': 23.719, 'max_score': 1439.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q1439002.jpg'}, {'end': 1541.616, 'src': 'embed', 'start': 1514.139, 'weight': 9, 'content': [{'end': 1519.544, 'text': 'And then if this is not true we would just want to return content without manipulating it at all.', 'start': 1514.139, 'duration': 5.405}, {'end': 1523.384, 'text': "Now we don't even really need an else block here.", 'start': 1520.782, 'duration': 2.602}, {'end': 1526.786, 'text': 'A function will end as soon as you return something.', 'start': 1523.944, 'duration': 2.842}, {'end': 1530.889, 'text': 'So if this is true, this will end from this return.', 'start': 1526.826, 'duration': 4.063}, {'end': 1537.794, 'text': 'So then below this if statement, we can just return $content, right, if this is not the case.', 'start': 1531.149, 'duration': 6.645}, {'end': 1541.616, 'text': "So we can go ahead and save that, and it's going to work just the same.", 'start': 1538.294, 'duration': 3.322}], 'summary': 'The function will return unmanipulated content if a condition is not met, ending as soon as it returns something.', 'duration': 27.477, 'max_score': 1514.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q1514139.jpg'}], 'start': 486.07, 'title': 'Wordpress plugin development basics', 'summary': 'Delves into wordpress plugin development basics, showcasing core building blocks, common features, and emphasizing the need for a solid foundation. it also demonstrates the creation of a basic plugin and its functionality.', 'chapters': [{'end': 550.333, 'start': 486.07, 'title': 'Creating custom blocks in wordpress', 'summary': 'Explores creating custom blocks in wordpress using javascript and react, showcasing the ability to mark correct answers with a green checkmark and customize background colors.', 'duration': 64.263, 'highlights': ['The chapter showcases the ability to mark correct answers with a green checkmark and lets viewers know which answers are wrong using JavaScript and React.', 'Demonstrates the process of customizing background colors for a block using JavaScript and React in WordPress.', 'Explains the process of saving or updating a post and viewing it on the front end of the website in WordPress.']}, {'end': 877.033, 'start': 550.373, 'title': 'Wordpress plugin development', 'summary': 'Covers the implementation of professor callout feature, dynamic data injection, and the comparison between using wordpress custom post types and custom database tables for efficient data storage and retrieval, with the latter being approximately 10 times faster.', 'duration': 326.66, 'highlights': ['Comparison between using WordPress custom post types and custom database tables The transcript discusses the efficiency of using custom database tables over WordPress custom post types, with the custom database tables being approximately 10 times faster for data retrieval.', 'Implementation of dynamic data injection The chapter demonstrates the dynamic data injection for the Professor Callout feature, showcasing the real-time data update without hard-coded content, ensuring automatic content update upon future changes.', 'Introduction of Professor Callout feature The chapter introduces the Professor Callout feature, enabling the selection and highlighting of a specific professor in a blog post, exemplified by the selection of Dr. Barks a lot and the subsequent real-time data retrieval for the featured professor.']}, {'end': 1537.794, 'start': 878.024, 'title': 'Wordpress plugin development basics', 'summary': 'Explains the core building blocks and most common features of wordpress plugin development, emphasizing the infinite possibilities and the need for a rock solid foundation to build upon, and then proceeds to demonstrate the creation of a basic plugin and its functionality.', 'duration': 659.77, 'highlights': ['The chapter emphasizes the infinite possibilities of extending or customizing WordPress using plugins, highlighting that every single option, parameter, action, filter, or setting can be manipulated using plugins. WordPress plugin development offers infinite possibilities for extending or customizing the platform, allowing manipulation of every single option, parameter, action, filter, or setting.', 'It is mentioned that the course focuses on showing the core basic building blocks and the most common features necessary for building plugins, rather than attempting to cover every feature of WordPress, as the topic is too vast and covering everything would make the course excessively long. The course focuses on demonstrating core basic building blocks and most common features essential for building plugins, prioritizing practicality due to the vastness of the topic.', 'The chapter introduces the creation of a basic plugin by demonstrating the process of creating a new folder, adding a PHP file with plugin information, and activating the plugin in the WordPress admin dashboard. The chapter demonstrates the creation of a basic plugin, including the process of creating a new folder, adding a PHP file with plugin information, and activating the plugin in the WordPress admin dashboard.', 'The process of dynamically adding an extra sentence at the end of a blog post detail screen using a basic plugin is explained, including creating a new folder, adding a PHP file, and writing the necessary code using filters and functions. The process of dynamically adding an extra sentence at the end of a blog post detail screen using a basic plugin is explained, covering the creation of a new folder, addition of a PHP file, and implementation of code using filters and functions.']}], 'duration': 1051.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q486070.jpg', 'highlights': ['Demonstrates the process of customizing background colors for a block using JavaScript and React in WordPress.', 'The chapter introduces the creation of a basic plugin by demonstrating the process of creating a new folder, adding a PHP file with plugin information, and activating the plugin in the WordPress admin dashboard.', 'The chapter demonstrates the creation of a basic plugin, including the process of creating a new folder, adding a PHP file with plugin information, and activating the plugin in the WordPress admin dashboard.', 'The process of dynamically adding an extra sentence at the end of a blog post detail screen using a basic plugin is explained, including creating a new folder, adding a PHP file, and writing the necessary code using filters and functions.', 'The chapter emphasizes the infinite possibilities of extending or customizing WordPress using plugins, highlighting that every single option, parameter, action, filter, or setting can be manipulated using plugins.', 'The course focuses on demonstrating core basic building blocks and most common features essential for building plugins, prioritizing practicality due to the vastness of the topic.', 'Implementation of dynamic data injection The chapter demonstrates the dynamic data injection for the Professor Callout feature, showcasing the real-time data update without hard-coded content, ensuring automatic content update upon future changes.', 'Introduction of Professor Callout feature The chapter introduces the Professor Callout feature, enabling the selection and highlighting of a specific professor in a blog post, exemplified by the selection of Dr. Barks a lot and the subsequent real-time data retrieval for the featured professor.', 'Comparison between using WordPress custom post types and custom database tables The transcript discusses the efficiency of using custom database tables over WordPress custom post types, with the custom database tables being approximately 10 times faster for data retrieval.', 'Explains the process of saving or updating a post and viewing it on the front end of the website in WordPress.']}, {'end': 3192.94, 'segs': [{'end': 1685.456, 'src': 'embed', 'start': 1658.286, 'weight': 0, 'content': [{'end': 1664.868, 'text': "However, a big part of what plug ins do isn't just the feature that they bring to the table,", 'start': 1658.286, 'duration': 6.582}, {'end': 1669.329, 'text': "but it's also letting the user adjust settings and preferences.", 'start': 1664.868, 'duration': 4.461}, {'end': 1673.385, 'text': 'So, for example, what if the owner of this site?', 'start': 1670.222, 'duration': 3.163}, {'end': 1678.65, 'text': 'they wanted the word count and they wanted the read time, but maybe they did not want the character count?', 'start': 1673.385, 'duration': 5.265}, {'end': 1685.456, 'text': 'Well this is where a plug in setting screen or an admin setting screen comes into play.', 'start': 1679.37, 'duration': 6.086}], 'summary': 'Plugins enable users to customize settings, e.g., word count and read time, providing flexibility and control.', 'duration': 27.17, 'max_score': 1658.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q1658286.jpg'}, {'end': 2212.055, 'src': 'embed', 'start': 2176.116, 'weight': 4, 'content': [{'end': 2178.057, 'text': 'So just right here below the curly brackets,', 'start': 2176.116, 'duration': 1.941}, {'end': 2190.568, 'text': "let's say new instance of word count and time plugin in parentheses to actually use the class semicolon as well.", 'start': 2178.057, 'duration': 12.511}, {'end': 2194.69, 'text': 'Now this would work with the new object just sort of floating in outer space.', 'start': 2190.929, 'duration': 3.761}, {'end': 2198.151, 'text': 'But let me show you what I like to do at the very beginning of this line.', 'start': 2194.73, 'duration': 3.421}, {'end': 2204.033, 'text': "Let's create a new variable and let's just name it this exact same thing but start it with a lowercase letter.", 'start': 2198.631, 'duration': 5.402}, {'end': 2212.055, 'text': 'so word count and time plugin equals, so dollar sign for a variable.', 'start': 2204.873, 'duration': 7.182}], 'summary': 'Creating a new instance of word count and time plugin using a variable.', 'duration': 35.939, 'max_score': 2176.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q2176116.jpg'}, {'end': 2907.991, 'src': 'embed', 'start': 2882.159, 'weight': 5, 'content': [{'end': 2888.125, 'text': 'So how we want to either sanitize or validate the value and then also a default value.', 'start': 2882.159, 'duration': 5.966}, {'end': 2895.128, 'text': 'So if no value exists in the database yet what do we want to sort of consider the standard or default answer to be.', 'start': 2888.746, 'duration': 6.382}, {'end': 2903.43, 'text': "So let's just say quotes, sanitize underscore callback and then the arrow symbol right.", 'start': 2895.808, 'duration': 7.622}, {'end': 2907.991, 'text': "so equal sign greater than, and let's just set that to underscore.", 'start': 2903.43, 'duration': 4.561}], 'summary': 'The process involves sanitizing or validating values and setting a default if none exists in the database.', 'duration': 25.832, 'max_score': 2882.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q2882159.jpg'}, {'end': 3104.661, 'src': 'embed', 'start': 3076.31, 'weight': 3, 'content': [{'end': 3081.892, 'text': "The third argument is a function that's responsible for actually outputting the HTML.", 'start': 3076.31, 'duration': 5.582}, {'end': 3082.852, 'text': 'So this is really nice.', 'start': 3081.952, 'duration': 0.9}, {'end': 3086.613, 'text': 'We can include our own custom HTML which is very flexible.', 'start': 3082.892, 'duration': 3.721}, {'end': 3089.974, 'text': "So instead of this three placeholder let's give it an array.", 'start': 3087.213, 'duration': 2.761}, {'end': 3093.595, 'text': 'First argument is dollar sign this comma.', 'start': 3090.494, 'duration': 3.101}, {'end': 3097.176, 'text': 'The second argument is just a function or method name that we get to make up.', 'start': 3093.635, 'duration': 3.541}, {'end': 3104.661, 'text': "Let's call it location HTML will actually create this function in just a moment.", 'start': 3097.876, 'duration': 6.785}], 'summary': 'Demonstrates flexibility of including custom html in a function.', 'duration': 28.351, 'max_score': 3076.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q3076310.jpg'}, {'end': 3157.618, 'src': 'embed', 'start': 3125.956, 'weight': 2, 'content': [{'end': 3130.96, 'text': 'And remember, we chose a value of word count settings page for the slug of this page.', 'start': 3125.956, 'duration': 5.004}, {'end': 3132.601, 'text': 'So you can just copy that.', 'start': 3131.02, 'duration': 1.581}, {'end': 3136.825, 'text': 'And then that is the fourth argument where we were just working.', 'start': 3133.482, 'duration': 3.343}, {'end': 3144.33, 'text': 'OK, and then the fifth and final argument is the section that you want to add this field to.', 'start': 3138.266, 'duration': 6.064}, {'end': 3146.972, 'text': "We haven't created any sections yet.", 'start': 3145.211, 'duration': 1.761}, {'end': 3149.614, 'text': "We will in just a moment but let's just make up a name.", 'start': 3147.032, 'duration': 2.582}, {'end': 3157.618, 'text': 'How about WCP for word count plug in maybe underscore first section.', 'start': 3150.034, 'duration': 7.584}], 'summary': 'Choosing a word count settings page slug, adding arguments and creating a new section', 'duration': 31.662, 'max_score': 3125.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q3125956.jpg'}], 'start': 1538.294, 'title': 'Wordpress plugin development', 'summary': 'Covers creating wordpress plugin settings, php classes for wordpress, customized settings page, and wordpress settings and html forms, with detailed steps and best practices. it explains adding admin settings pages, creating php classes, renaming functions, and registering settings and fields, with about five options to be registered and tied to html fields, making the code more efficient and manageable.', 'chapters': [{'end': 2035.905, 'start': 1538.294, 'title': 'Creating wordpress plugin settings', 'summary': 'Explains how to create wordpress plugin settings, including adding an admin settings page, leveraging action and filter hooks, and customizing user preferences. the chapter also introduces the process of adding a new link in the admin settings menu, utilizing php functions and unique names.', 'duration': 497.611, 'highlights': ['The chapter explains how to create WordPress plugin settings, including adding an admin settings page, leveraging action and filter hooks, and customizing user preferences. The chapter covers the process of creating plugin settings, including adding an admin settings page, leveraging action and filter hooks, and customizing user preferences.', 'The chapter introduces the process of adding a new link in the admin settings menu, utilizing PHP functions and unique names. The chapter introduces the process of adding a new link in the admin settings menu, utilizing PHP functions and unique names.', 'The chapter explains how to leverage different action hooks and filter hooks that WordPress makes available to customize WordPress in various ways. The chapter emphasizes leveraging different action hooks and filter hooks provided by WordPress to customize the platform extensively.']}, {'end': 2303.398, 'start': 2036.625, 'title': 'Creating php classes for wordpress', 'summary': 'Explains the process of creating a php class in wordpress to simplify function naming and improve code organization, demonstrating how to create a class, define a constructor, and move functions inside the class, ultimately making the code more efficient and manageable.', 'duration': 266.773, 'highlights': ['The chapter introduces the concept of using PHP classes to simplify function naming and improve code organization in WordPress, demonstrating the creation of a class and explaining that within a class, properties or methods do not need to have unique names. The chapter highlights the benefit of using PHP classes to simplify function naming and improve code organization in WordPress, explaining that properties or methods within a class do not need to have unique names.', 'The chapter demonstrates the creation of a PHP class and the definition of a constructor function named underscore, underscore construct, explaining that this function is automatically called when a new instance of the class is created in PHP. The chapter details the creation of a PHP class and the definition of a constructor function named underscore, underscore construct, explaining that this function is automatically called when a new instance of the class is created in PHP.', 'The chapter explains the process of moving functions inside the class to improve code organization, demonstrating how to cut and paste functions into the class after the constructor function. The chapter explains the process of moving functions inside the class to improve code organization, demonstrating the steps to cut and paste functions into the class after the constructor function.']}, {'end': 2708.26, 'start': 2304.853, 'title': 'Creating customized settings page', 'summary': 'Covers creating a customized settings page in wordpress, including renaming functions for simplicity, using callable syntax in php, styling the html for a settings page, and understanding the end goal of permanently saving user preferences into the database.', 'duration': 403.407, 'highlights': ['Understanding the end goal of permanently saving user preferences into the database The chapter emphasizes the importance of permanently saving user preferences into the database as the end goal, with a clear explanation of how the options table in the WordPress database stores settings and options.', 'Using callable syntax in PHP to reference functions The usage of callable syntax in PHP is explained, where an array with object and method name is used instead of a simple function name, providing a clear understanding of referencing functions.', 'Renaming functions and methods for simplicity The process of renaming functions and methods for simplicity is demonstrated, highlighting the importance of using short, generic, and conflict-free names for functions and methods.', 'Styling the HTML for a settings page to resemble a real settings page The step-by-step process of styling the HTML to resemble a real settings page is outlined, including creating a wrapper div, adding a heading, and achieving standardized spacing and typography.']}, {'end': 3192.94, 'start': 2709.403, 'title': 'Wordpress settings and html forms', 'summary': 'Explains the process of registering settings and fields in wordpress, including creating a new action, registering settings and fields, and tying html to the registered settings, with about five options to be registered and tied to html fields.', 'duration': 483.537, 'highlights': ['The chapter explains the process of registering settings and fields in WordPress, including creating a new action, registering settings and fields, and tying HTML to the registered settings, with about five options to be registered and tied to HTML fields. The chapter covers the process of registering settings and fields in WordPress, including creating a new action, registering settings and fields, and tying HTML to the registered settings. It mentions that there are about five options to be registered and tied to HTML fields.', "The function 'register_setting' is used once for each option and the first setting registered is the display location, which will have about five options in total. The function 'register_setting' is used once for each option, and the first setting registered is the display location with about five options in total.", "The 'add_settings_field' function is used to tie HTML to the registered settings, with five arguments including the name of the option, the HTML label text, a function for outputting the HTML, the page slug, and the section. The 'add_settings_field' function is used to tie HTML to the registered settings, with five arguments including the name of the option, the HTML label text, a function for outputting the HTML, the page slug, and the section."]}], 'duration': 1654.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q1538294.jpg', 'highlights': ['The chapter covers the process of registering settings and fields in WordPress, including creating a new action, registering settings and fields, and tying HTML to the registered settings, with about five options to be registered and tied to HTML fields.', 'The chapter explains how to leverage different action hooks and filter hooks that WordPress makes available to customize WordPress in various ways.', 'The chapter introduces the concept of using PHP classes to simplify function naming and improve code organization in WordPress, demonstrating the creation of a class and explaining that within a class, properties or methods do not need to have unique names.', 'The chapter emphasizes the importance of permanently saving user preferences into the database as the end goal, with a clear explanation of how the options table in the WordPress database stores settings and options.', 'The step-by-step process of styling the HTML to resemble a real settings page is outlined, including creating a wrapper div, adding a heading, and achieving standardized spacing and typography.', 'The usage of callable syntax in PHP is explained, where an array with object and method name is used instead of a simple function name, providing a clear understanding of referencing functions.', 'The process of renaming functions and methods for simplicity is demonstrated, highlighting the importance of using short, generic, and conflict-free names for functions and methods.']}, {'end': 5170.256, 'segs': [{'end': 3263.109, 'src': 'embed', 'start': 3222.106, 'weight': 0, 'content': [{'end': 3227.351, 'text': 'so we chose wcp first section.', 'start': 3222.106, 'duration': 5.245}, {'end': 3231.415, 'text': 'the second argument is the title for the section.', 'start': 3227.351, 'duration': 4.064}, {'end': 3234.418, 'text': 'now you can include a subtitle for each section.', 'start': 3231.415, 'duration': 3.003}, {'end': 3241.785, 'text': 'for example, if your settings page was going to have three different sections, you could have a subtitle here, a subtitle here, subtitle here.', 'start': 3234.418, 'duration': 7.367}, {'end': 3244.708, 'text': "I don't really want a subtitle.", 'start': 3242.646, 'duration': 2.062}, {'end': 3253.375, 'text': "So while we do need to include this argument, if you don't actually want a visible subtitle, you can just make this be a value of null.", 'start': 3245.288, 'duration': 8.087}, {'end': 3257.487, 'text': 'Okay, and then a similar thing is going on with the third argument.', 'start': 3254.406, 'duration': 3.081}, {'end': 3263.109, 'text': 'The third argument allows you to have a little bit of content towards the top of the section.', 'start': 3257.867, 'duration': 5.242}], 'summary': 'Choosing wcp first section, providing title and optional subtitle and content.', 'duration': 41.003, 'max_score': 3222.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q3222106.jpg'}, {'end': 3644.873, 'src': 'heatmap', 'start': 3365.419, 'weight': 0.741, 'content': [{'end': 3371.823, 'text': "Remember we set this up at the end of our last lesson and right now it's just outputting that rapper did with an H1.", 'start': 3365.419, 'duration': 6.404}, {'end': 3373.365, 'text': "Right That's all we see here.", 'start': 3372.124, 'duration': 1.241}, {'end': 3377.807, 'text': 'So this is where we just actually start to build out the HTML form.', 'start': 3374.105, 'duration': 3.702}, {'end': 3381.329, 'text': "So below the heading level one let's have a form tag.", 'start': 3377.847, 'duration': 3.482}, {'end': 3382.81, 'text': "If you're using V.S.", 'start': 3381.95, 'duration': 0.86}, {'end': 3385.312, 'text': 'code you can just type form and then hit tab.', 'start': 3382.85, 'duration': 2.462}, {'end': 3392.116, 'text': "OK For the action let's give it a value of options dot P.H.P.", 'start': 3385.332, 'duration': 6.784}, {'end': 3394.477, 'text': 'WordPress will know what to do with this.', 'start': 3392.536, 'duration': 1.941}, {'end': 3396.518, 'text': "That's all we need to say.", 'start': 3395.538, 'duration': 0.98}, {'end': 3400.861, 'text': "Let's also give it an attribute of method and set that to equal post.", 'start': 3396.918, 'duration': 3.943}, {'end': 3406.369, 'text': 'OK Now inside the HTML form this is where things are pretty cool.', 'start': 3401.866, 'duration': 4.503}, {'end': 3408.49, 'text': "We don't need to spell out very much.", 'start': 3406.789, 'duration': 1.701}, {'end': 3410.671, 'text': 'WordPress will do a lot of this for us.', 'start': 3408.75, 'duration': 1.921}, {'end': 3412.152, 'text': 'So check this out.', 'start': 3411.432, 'duration': 0.72}, {'end': 3417.195, 'text': 'We just drop into PHP and we drop down then exit PHP again.', 'start': 3412.192, 'duration': 5.003}, {'end': 3427.761, 'text': "But inside here in PHP mode we're just going to say do underscore settings sections semi colon in these parentheses.", 'start': 3417.295, 'duration': 10.466}, {'end': 3430.003, 'text': 'We just give it the slug of our settings page.', 'start': 3427.801, 'duration': 2.202}, {'end': 3436.233, 'text': "So again remember up in the address bar for me it's word count settings page.", 'start': 3431.089, 'duration': 5.144}, {'end': 3443.158, 'text': 'OK, WordPress will automatically look through any sections that have been registered.', 'start': 3438.214, 'duration': 4.944}, {'end': 3449.082, 'text': 'and remember, we added that one section called the first section and we tied it to this same page.', 'start': 3443.158, 'duration': 5.924}, {'end': 3456.107, 'text': 'So WordPress will see this and it will automatically loop through the sections and the fields for us that we registered.', 'start': 3449.262, 'duration': 6.845}, {'end': 3461.629, 'text': "Then right below this, let's have the signature looking WordPress blue save or submit button.", 'start': 3456.587, 'duration': 5.042}, {'end': 3468.531, 'text': 'So we just can call a WordPress function called submit button, parentheses to call it, semicolon.', 'start': 3462.089, 'duration': 6.442}, {'end': 3471.552, 'text': "Let's give this a save and see what it looks like.", 'start': 3469.011, 'duration': 2.541}, {'end': 3474.523, 'text': 'So if we refresh our page.', 'start': 3472.742, 'duration': 1.781}, {'end': 3478.944, 'text': "Cool. So we only have one field, so it's not very impressive,", 'start': 3475.223, 'duration': 3.721}, {'end': 3486.847, 'text': 'but the idea is that WordPress will automatically generate the HTML for us right where this column is your label,', 'start': 3478.944, 'duration': 7.903}, {'end': 3489.148, 'text': 'and then this column is the actual input field.', 'start': 3486.847, 'duration': 2.301}, {'end': 3491.789, 'text': 'And then we have the signature looking blue button.', 'start': 3489.628, 'duration': 2.161}, {'end': 3495.25, 'text': 'Now remember we just set this to be hello as a quick test.', 'start': 3492.369, 'duration': 2.881}, {'end': 3502.692, 'text': "So instead let's go back right now and change this to be a drop down write an HTML select form element.", 'start': 3495.43, 'duration': 7.262}, {'end': 3509.774, 'text': "So back in our text editor we're just looking for this location HTML function instead of hello.", 'start': 3503.392, 'duration': 6.382}, {'end': 3515.636, 'text': "Let's have a select element so you can just type select and hit tab and V.S.", 'start': 3510.294, 'duration': 5.342}, {'end': 3524.019, 'text': 'code We do not need it to have an ID but we do want it to have a name that matches the setting that we registered.', 'start': 3515.696, 'duration': 8.323}, {'end': 3530.662, 'text': 'So remember sort of the variable name that we gave that setting was WCP underscore location.', 'start': 3524.599, 'duration': 6.063}, {'end': 3535.224, 'text': "So that's what we want this name to be WCP underscore location.", 'start': 3530.702, 'duration': 4.522}, {'end': 3537.365, 'text': 'OK Inside the select.', 'start': 3536.104, 'duration': 1.261}, {'end': 3539.586, 'text': "Let's have one option.", 'start': 3537.485, 'duration': 2.101}, {'end': 3550.213, 'text': 'You can just type option hit tab, give it a value of zero, but then the actual text that the user sees would be beginning of post set,', 'start': 3539.606, 'duration': 10.607}, {'end': 3553.556, 'text': 'drop down and type option again hit tab, give it a value of one.', 'start': 3550.213, 'duration': 3.343}, {'end': 3557.36, 'text': 'But what the user will actually see is end of post.', 'start': 3554.057, 'duration': 3.303}, {'end': 3560.263, 'text': "OK Let's go ahead and save that.", 'start': 3558.301, 'duration': 1.962}, {'end': 3561.544, 'text': 'And then if we refresh.', 'start': 3560.423, 'duration': 1.121}, {'end': 3569.291, 'text': "Cool Now if we tried to actually select end of post I will warn you when we click Save Changes we're going to run into some errors.", 'start': 3562.364, 'duration': 6.927}, {'end': 3572.074, 'text': 'So you can see all sorts of errors here.', 'start': 3570.371, 'duration': 1.703}, {'end': 3574.377, 'text': 'Let me show you the solution to this.', 'start': 3572.935, 'duration': 1.442}, {'end': 3578.683, 'text': "The reason this failed is because we're missing one line of code.", 'start': 3574.778, 'duration': 3.905}, {'end': 3583.65, 'text': 'So just navigate right back to your word count setting screen like this and let me show you what to fix.', 'start': 3579.324, 'duration': 4.326}, {'end': 3592.189, 'text': 'down in our overall, our html function, right where we have our wrapper div and the heading level one and the form tags.', 'start': 3584.685, 'duration': 7.504}, {'end': 3594.791, 'text': 'right before this do settings sections line.', 'start': 3592.189, 'duration': 2.602}, {'end': 3605.016, 'text': "let's add a new line and we just say settings underscore fields semicolon, And we just give it the name of the field group that we chose earlier.", 'start': 3594.791, 'duration': 10.225}, {'end': 3610.678, 'text': 'So remember when we registered our setting, we made up a group name of word count plugin.', 'start': 3605.116, 'duration': 5.562}, {'end': 3612.399, 'text': "So that's what we would use here.", 'start': 3610.938, 'duration': 1.461}, {'end': 3615.1, 'text': 'Quotes, word count plugin.', 'start': 3613.359, 'duration': 1.741}, {'end': 3618.741, 'text': 'And what this is going to do, WordPress will do all of the hard work for us.', 'start': 3615.52, 'duration': 3.221}, {'end': 3624.884, 'text': "It's going to see this and then add the appropriate hidden HTML fields.", 'start': 3619.382, 'duration': 5.502}, {'end': 3632.027, 'text': "with the nonce value, the action value, it's going to handle sort of the security and permission aspects for us.", 'start': 3624.884, 'duration': 7.143}, {'end': 3642.412, 'text': 'So just by including this if we save and reload the page Now, if we try to set this to end of post and hit save,', 'start': 3632.487, 'duration': 9.925}, {'end': 3644.873, 'text': 'it actually worked and we see settings saved.', 'start': 3642.412, 'duration': 2.461}], 'summary': 'Setting up an html form with php for wordpress plugin settings, generating html and solving errors.', 'duration': 279.454, 'max_score': 3365.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q3365419.jpg'}, {'end': 4743.242, 'src': 'embed', 'start': 4710.521, 'weight': 5, 'content': [{'end': 4714.283, 'text': "We just want to check to see, you know, whatever logic we're checking.", 'start': 4710.521, 'duration': 3.762}, {'end': 4723.606, 'text': "So in this case, for this field, I want to check to see if the value is not zero and it's not one, then we have a problem.", 'start': 4714.463, 'duration': 9.143}, {'end': 4725.926, 'text': "So let's set up that conditional logic.", 'start': 4724.206, 'duration': 1.72}, {'end': 4734.876, 'text': "I'll say if parentheses curly brackets for the condition, if input does not equal, so exclamation equal,", 'start': 4725.986, 'duration': 8.89}, {'end': 4743.242, 'text': 'if it does not equal zero and if input does not equal one.', 'start': 4734.876, 'duration': 8.366}], 'summary': 'Setting up conditional logic to check if input is not 0 or 1.', 'duration': 32.721, 'max_score': 4710.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q4710521.jpg'}, {'end': 4915.805, 'src': 'embed', 'start': 4892.444, 'weight': 3, 'content': [{'end': 4900.77, 'text': "Now that our form is complete, now that we're saving the user's preferences, it's time to actually build the plug in itself.", 'start': 4892.444, 'duration': 8.326}, {'end': 4911.059, 'text': "Right. So if we look at the finished product, it's time to actually write the code that assembles the text that gets added in to a blog post detail screen.", 'start': 4901.231, 'duration': 9.828}, {'end': 4915.805, 'text': 'It should be fun to sort of connect the dots and get our plug in truly up and running.', 'start': 4911.539, 'duration': 4.266}], 'summary': 'Building plugin to assemble text for blog post detail screen.', 'duration': 23.361, 'max_score': 4892.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q4892444.jpg'}, {'end': 5056.347, 'src': 'embed', 'start': 5006.019, 'weight': 2, 'content': [{'end': 5010.22, 'text': "So you could choose any name you want but I'm actually going to name it if rap.", 'start': 5006.019, 'duration': 4.201}, {'end': 5017.184, 'text': 'OK then I would just create a function with that names function if wrap parentheses curly brackets.', 'start': 5011.235, 'duration': 5.949}, {'end': 5026.036, 'text': "Now. I'm doing this because we only really need to change or filter the content if a you're on a single blog post screen,", 'start': 5017.604, 'duration': 8.432}, {'end': 5030.5, 'text': 'and B If the user has any of the three checkboxes checked.', 'start': 5026.036, 'duration': 4.464}, {'end': 5038.264, 'text': 'So, for example, if I go into settings, word count, if someone unchecks all three of these checkboxes,', 'start': 5030.84, 'duration': 7.424}, {'end': 5042.026, 'text': "then we don't need to filter or manipulate the content.", 'start': 5038.264, 'duration': 3.762}, {'end': 5049.785, 'text': 'Now you could have wrapped this overall add filter line in an if statement that would make a lot of sense.', 'start': 5042.782, 'duration': 7.003}, {'end': 5056.347, 'text': "However it's just my personal preference that I like my constructor function to be very clean and minimal.", 'start': 5050.145, 'duration': 6.202}], 'summary': "Create a function 'if wrap' to filter content on single blog post screen if any of the three checkboxes are checked.", 'duration': 50.328, 'max_score': 5006.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q5006019.jpg'}], 'start': 3193.86, 'title': 'Wordpress plugin development', 'summary': 'Explains creating sections, word count settings, building settings form, adding custom fields, creating checkbox functions, and custom validation, with a focus on providing examples and clarifications for each process.', 'chapters': [{'end': 3285.862, 'start': 3193.86, 'title': 'Creating section with arguments', 'summary': 'Explains how to create a section with arguments, including the name, title, content, and page slug, with a focus on providing examples and clarifications for each argument.', 'duration': 92.002, 'highlights': ['The fourth argument is the page slug that the section will be added to, emphasizing the importance of specifying the page location (e.g., URL) for the section (e.g., wcp-first-section).', 'The third argument allows adding content at the top of the section, providing flexibility for including additional information or HTML content, with the option to set it as null if no content is needed.', 'The second argument entails the title for the section, with the possibility of including a subtitle for each section, offering an example of having multiple sections with subtitles and the option to set it as null if no visible subtitle is required.', 'The first argument involves naming the section, demonstrating the process of choosing a name for the section (e.g., wcp first section) to uniquely identify it within the settings page.']}, {'end': 3618.741, 'start': 3286.583, 'title': 'Word count settings page', 'summary': 'Discusses creating a function to output an html form, connecting to wordpress, and resolving errors, demonstrating how to automatically generate html and resolve issues with missing code while creating a word count settings page.', 'duration': 332.158, 'highlights': ["Demonstrating how to automatically generate HTML for WordPress settings page The chapter discusses using WordPress functions to automatically generate the HTML for a settings page, such as using 'do_settings_sections' to loop through registered sections and fields and 'submit_button' to display a signature blue button.", "Resolving errors by adding missing code in the HTML function The solution to errors encountered when selecting options in the form involves adding 'settings_fields' with the name of the field group chosen earlier, which in this case is 'word count plugin', demonstrating how to resolve issues with missing code.", "Creating a function to output an HTML form and connecting to WordPress The chapter discusses creating a function called 'location_html' to output an HTML form, connecting to WordPress by setting the action attribute to 'options.php' and method to 'post', demonstrating how to tie things together and have things make sense in the browser."]}, {'end': 3935.941, 'start': 3619.382, 'title': 'Building settings form for plugin', 'summary': 'Covers setting up security aspects using hidden html fields, updating the select html to pull current value from the database, and explaining the usage of get_option function in wordpress.', 'duration': 316.559, 'highlights': ['The chapter covers setting up security aspects using hidden HTML fields, such as nonce value and action value, to handle security and permission.', 'Explaining how to update the select HTML to pull the current value from the database, ensuring that the selected option is reflected when the admin page is refreshed.', 'Explanation of the usage of get_option function in WordPress to load options from the database, highlighting that there is no performance hit as WordPress loads options into memory for faster access.']}, {'end': 4189.279, 'start': 3936.161, 'title': 'Adding custom fields and settings', 'summary': 'Demonstrates the process of adding custom fields and settings, starting with duplicating lines of code for subsequent fields, naming the option and changing the label, creating a method for outputting html, and ensuring security measures by escaping dynamic values for html.', 'duration': 253.118, 'highlights': ['The process of adding subsequent fields and settings is simplified by duplicating lines of code for the first field, making minimal changes, and organizing the code for better understanding. The process of adding subsequent fields and settings is simplified by duplicating lines of code for the first field, making minimal changes, and organizing the code for better understanding.', 'Creating a method for outputting HTML, pre-populating the field with a previous value from the database, and ensuring security by escaping dynamic values before putting them into HTML are essential steps in setting up custom fields and settings. Creating a method for outputting HTML, pre-populating the field with a previous value from the database, and ensuring security by escaping dynamic values before putting them into HTML are essential steps in setting up custom fields and settings.', 'The demonstration involves the process of adding custom fields and settings, starting with duplicating lines of code for subsequent fields, naming the option and changing the label, creating a method for outputting HTML, and ensuring security measures by escaping dynamic values for HTML. The demonstration involves the process of adding custom fields and settings, starting with duplicating lines of code for subsequent fields, naming the option and changing the label, creating a method for outputting HTML, and ensuring security measures by escaping dynamic values for HTML.']}, {'end': 4614.197, 'start': 4190.319, 'title': 'Creating checkbox functions and custom validation', 'summary': 'Covers the process of creating checkbox functions for displaying word count, character count, and read time, including creating a reusable function and adding custom validation logic for select options.', 'duration': 423.878, 'highlights': ['The process of creating a reusable function called checkbox HTML for displaying checkbox options for word count, character count, and read time, to avoid creating multiple copies of the same function. Creating a single reusable function called checkbox HTML, which can receive an incoming parameter, to display checkbox options for word count, character count, and read time.', 'Adding custom validation logic to ensure that the select options for display location are limited to a value of either zero or one, preventing unauthorized changes through Chrome dev tools. Implementing custom validation logic to restrict the select options for display location to only have a value of either zero or one, preventing unauthorized changes through Chrome dev tools.']}, {'end': 5170.256, 'start': 4614.617, 'title': 'Wordpress custom plugin development', 'summary': 'Explores creating a custom wordpress plugin, demonstrating how to create a sanitized callback, manipulate content based on user preferences, and filter the content on a single blog post screen.', 'duration': 555.639, 'highlights': ['Demonstrating the creation of a sanitized callback for a specific field in the WordPress plugin, utilizing a custom function instead of the default WordPress provided function. The chapter discusses the process of creating a sanitized callback for a specific field in the WordPress plugin, replacing the default WordPress provided function with a custom function.', 'Explaining the logic and implementation of manipulating content based on user preferences, including the usage of conditional logic to check and return values based on user input. The transcript details the logic and implementation of manipulating content based on user preferences, utilizing conditional logic to check and return values based on user input.', 'Detailing the process of filtering content on a single blog post screen based on user preferences, utilizing conditionals to determine when to manipulate the content. The chapter provides details on filtering content on a single blog post screen based on user preferences, using conditionals to determine when to manipulate the content.']}], 'duration': 1976.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q3193860.jpg', 'highlights': ['The process of adding subsequent fields and settings is simplified by duplicating lines of code for the first field, making minimal changes, and organizing the code for better understanding.', 'Creating a method for outputting HTML, pre-populating the field with a previous value from the database, and ensuring security by escaping dynamic values before putting them into HTML are essential steps in setting up custom fields and settings.', 'Demonstrating the creation of a sanitized callback for a specific field in the WordPress plugin, utilizing a custom function instead of the default WordPress provided function.', 'The chapter covers setting up security aspects using hidden HTML fields, such as nonce value and action value, to handle security and permission.', 'Creating a reusable function called checkbox HTML for displaying checkbox options for word count, character count, and read time, to avoid creating multiple copies of the same function.', 'Explaining the logic and implementation of manipulating content based on user preferences, including the usage of conditional logic to check and return values based on user input.']}, {'end': 6599.98, 'segs': [{'end': 5204.681, 'src': 'embed', 'start': 5170.276, 'weight': 1, 'content': [{'end': 5174.117, 'text': "So then WordPress will use this value that we're providing here as a fallback.", 'start': 5170.276, 'duration': 3.841}, {'end': 5186.757, 'text': 'OK so just after that one set of parentheses now we can say or if get option this one will be quotes WCP underscore character count.', 'start': 5174.85, 'duration': 11.907}, {'end': 5191.706, 'text': 'after the quotes comma, default value.', 'start': 5187.961, 'duration': 3.745}, {'end': 5204.681, 'text': 'after just the one closing parentheses, one more or get option quotes, wcp, read time again the second option, the default value.', 'start': 5191.706, 'duration': 12.975}], 'summary': 'Wordpress will use the provided value as a fallback for character count and read time options.', 'duration': 34.405, 'max_score': 5170.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q5170276.jpg'}, {'end': 5748.68, 'src': 'embed', 'start': 5718.443, 'weight': 0, 'content': [{'end': 5724.85, 'text': "because we're going to need the word count for both outputting the word count and for calculating the read time.", 'start': 5718.443, 'duration': 6.407}, {'end': 5728.634, 'text': "So we don't want to have to calculate or count the word count more than once.", 'start': 5725.091, 'duration': 3.543}, {'end': 5737.455, 'text': "Okay, now we can make up any variable name we want, but I'll call it word count equals,", 'start': 5729.412, 'duration': 8.043}, {'end': 5748.68, 'text': "and then in PHP there's a function called strwordcount semicolon here, And then you could just include dollar sign content inside here.", 'start': 5737.455, 'duration': 11.225}], 'summary': 'Efficiently calculate word count using strwordcount function in php.', 'duration': 30.237, 'max_score': 5718.443, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q5718443.jpg'}, {'end': 5800.001, 'src': 'embed', 'start': 5767.472, 'weight': 4, 'content': [{'end': 5772.973, 'text': 'However, if your blog post had thousands and thousands of words,', 'start': 5767.472, 'duration': 5.501}, {'end': 5779.955, 'text': 'maybe you would only want to bother counting how many words there are if the word count or read time check boxes were checked.', 'start': 5772.973, 'duration': 6.982}, {'end': 5786.457, 'text': 'Right Because if only the character count check box was checked this would just be a wasted calculation.', 'start': 5780.375, 'duration': 6.082}, {'end': 5800.001, 'text': 'So what you could do is just cut this line into your clipboard and say if parentheses credit brackets and the condition would just be if get option WCP word count,', 'start': 5787.369, 'duration': 12.632}], 'summary': 'For lengthy blog posts, word count analysis should be conditional based on user input to avoid unnecessary calculations.', 'duration': 32.529, 'max_score': 5767.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q5767472.jpg'}, {'end': 6050.75, 'src': 'embed', 'start': 6025.225, 'weight': 3, 'content': [{'end': 6034.632, 'text': "So just right down here, before this, if logic, where we're actually returning something just right here, I would say $HTML.", 'start': 6025.225, 'duration': 9.407}, {'end': 6038.556, 'text': 'just give it a string of a closing paragraph, tag semicolon.', 'start': 6034.632, 'duration': 3.924}, {'end': 6040.718, 'text': "give it a save and we're in business.", 'start': 6038.556, 'duration': 2.162}, {'end': 6044.281, 'text': "So let's test this out if you put this back to the beginning of the post.", 'start': 6041.018, 'duration': 3.263}, {'end': 6048.009, 'text': 'So beginning of post save reload.', 'start': 6045.247, 'duration': 2.762}, {'end': 6050.75, 'text': 'Perfect I think this looks pretty good.', 'start': 6048.669, 'duration': 2.081}], 'summary': 'Implementing html code to generate a closing paragraph and confirming successful testing.', 'duration': 25.525, 'max_score': 6025.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q6025225.jpg'}, {'end': 6381.511, 'src': 'embed', 'start': 6353.527, 'weight': 6, 'content': [{'end': 6358.31, 'text': 'We just made that little piece of text or that string dynamic and easily translatable.', 'start': 6353.527, 'duration': 4.783}, {'end': 6360.292, 'text': "Let's move on to the second example.", 'start': 6358.791, 'duration': 1.501}, {'end': 6366.536, 'text': 'Remember we want to make this text that says this post has blank words easy to translate.', 'start': 6360.432, 'duration': 6.104}, {'end': 6371.901, 'text': "So back in our code, let's look in our function that we named create HTML.", 'start': 6367.156, 'duration': 4.745}, {'end': 6373.022, 'text': 'Here it is.', 'start': 6372.522, 'duration': 0.5}, {'end': 6375.385, 'text': "And then we're looking for the word count.", 'start': 6373.242, 'duration': 2.143}, {'end': 6377.187, 'text': "For me, it's around line number 40.", 'start': 6375.525, 'duration': 1.662}, {'end': 6378.668, 'text': 'It will be a little bit different for you.', 'start': 6377.187, 'duration': 1.481}, {'end': 6381.511, 'text': 'But we see this post has.', 'start': 6379.629, 'duration': 1.882}], 'summary': 'The transcript discusses making text dynamic and easily translatable, focusing on the word count around line number 40.', 'duration': 27.984, 'max_score': 6353.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q6353527.jpg'}], 'start': 5170.276, 'title': 'Wordpress plugin development', 'summary': 'Covers setting fallback values, creating php functions for modifying blog content, developing a wordpress plugin, making the plugin translatable, and adding translation support. it includes demonstrations, code examples, and emphasizes the availability of downloadable code files after each lesson.', 'chapters': [{'end': 5226.035, 'start': 5170.276, 'title': 'Setting fallback values in wordpress', 'summary': 'Explains setting fallback values in wordpress, demonstrating the process through a complex line of code, and emphasizing the availability of downloadable code files after each lesson.', 'duration': 55.759, 'highlights': ['The chapter demonstrates the process of setting fallback values in WordPress through a complex line of code.', 'The speaker highlights the availability of downloadable zip files containing finished code for each lesson.', 'The speaker emphasizes the importance of ensuring the truth of two conditions in the overall process.']}, {'end': 5376.674, 'start': 5227.126, 'title': 'Php function for modifying blog content', 'summary': "Discusses creating a php function to manipulate blog post content, passing a parameter for the content, and testing the function's output with specific examples.", 'duration': 149.548, 'highlights': ['Creating a PHP function to manipulate blog post content by passing a parameter, such as $content, and delegating the manipulation task to a separate function for increased clarity and simplicity.', "Demonstrating the testing of the function's output using specific examples, such as adding 'hello' to the content and verifying the changes by checking plugin settings.", 'Explaining the usage of if-else conditions to determine whether to modify the content within the function and returning the unmodified content if the condition is not met.']}, {'end': 6073.944, 'start': 5381.137, 'title': 'Wordpress plugin development', 'summary': 'Covers the process of coding the real content for a wordpress plugin, including explanations of syntax differences, creating html content, including post statistics, word count, character count, and read time, and ensuring security by escaping dynamic content.', 'duration': 692.807, 'highlights': ["The chapter covers the process of coding the real content for a WordPress plugin The transcript discusses the practical coding aspect of a WordPress plugin, emphasizing the real implementation of the plugin's functionality.", 'Creating HTML content with post statistics, word count, character count, and read time The transcript details the process of creating a method to output HTML content, including post statistics, word count, character count, and read time, offering insights into the code and logic involved in the process.', 'Explanation of syntax differences and security measures The explanation of syntax differences in method calling and method reference usage is provided, along with a reminder about ensuring security by escaping dynamic content to prevent potential malicious data injection.']}, {'end': 6224.32, 'start': 6074.824, 'title': 'Making wordpress plugin translatable', 'summary': 'Discusses how to make a plugin or theme easy to translate into another language, involving hollowing out the code and using software to create a template file, aiming to make the process simple and flexible for contributors, further emphasizing the importance of making the wordpress code easy to translate into any language in the world.', 'duration': 149.496, 'highlights': ['The importance of making the WordPress code easy to translate into any language in the world It emphasizes the significance of making the WordPress code easy to translate into any language in the world to ensure a flexible and simple translation process.', 'Discussing the steps involved in making a plugin or theme easy to translate into another language It outlines the two main steps involved: hollowing out the code to make it flexible and using software to create a template file, aiming to simplify the translation process for contributors.', 'Examples of text in the plugin that are made translatable It provides specific examples of text in the plugin, such as in the admin dashboard and front end post info, that are made translatable, demonstrating the practical application of the translation process.']}, {'end': 6599.98, 'start': 6224.36, 'title': 'Wordpress plugin translation', 'summary': 'Outlines the process of adding translation support to a wordpress plugin, including adding properties for text domain and domain path, dynamically translating strings of text, and loading text domain files.', 'duration': 375.62, 'highlights': ['The chapter outlines the process of adding translation support to a WordPress plugin The process of adding translation support to a WordPress plugin is detailed, including adding properties for text domain and domain path, dynamically translating strings of text, and loading text domain files.', "Adding properties for text domain and domain path The first step involves adding properties like 'text domain' and 'domain path' to the plugin, with the example of using 'WCP domain' as the text domain and '/languages' as the domain path.", "Dynamically translating strings of text The process of dynamically translating strings of text within the plugin is explained, including using the function 'underscore underscore' with placeholders for original text and the plugin's text domain.", "Loading text domain files The chapter explains the process of loading text domain files using the 'load_plugin_text_domain' function, with details on the arguments required and a mention of using 'false' as the second argument based on WordPress documentation."]}], 'duration': 1429.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q5170276.jpg', 'highlights': ['The chapter demonstrates the process of setting fallback values in WordPress through a complex line of code.', 'The speaker emphasizes the importance of ensuring the truth of two conditions in the overall process.', 'The speaker highlights the availability of downloadable zip files containing finished code for each lesson.', 'Creating a PHP function to manipulate blog post content by passing a parameter, such as $content, and delegating the manipulation task to a separate function for increased clarity and simplicity.', "Demonstrating the testing of the function's output using specific examples, such as adding 'hello' to the content and verifying the changes by checking plugin settings.", "The chapter covers the process of coding the real content for a WordPress plugin The transcript discusses the practical coding aspect of a WordPress plugin, emphasizing the real implementation of the plugin's functionality.", 'Creating HTML content with post statistics, word count, character count, and read time The transcript details the process of creating a method to output HTML content, including post statistics, word count, character count, and read time, offering insights into the code and logic involved in the process.', 'The importance of making the WordPress code easy to translate into any language in the world It emphasizes the significance of making the WordPress code easy to translate into any language in the world to ensure a flexible and simple translation process.', 'Discussing the steps involved in making a plugin or theme easy to translate into another language It outlines the two main steps involved: hollowing out the code to make it flexible and using software to create a template file, aiming to simplify the translation process for contributors.', 'The chapter outlines the process of adding translation support to a WordPress plugin The process of adding translation support to a WordPress plugin is detailed, including adding properties for text domain and domain path, dynamically translating strings of text, and loading text domain files.']}, {'end': 8163.829, 'segs': [{'end': 6782.53, 'src': 'embed', 'start': 6743.971, 'weight': 1, 'content': [{'end': 6751.118, 'text': "Okay, now in the admin dashboard down towards the very bottom, you'll see a new option called loco translate.", 'start': 6743.971, 'duration': 7.147}, {'end': 6752.78, 'text': "Let's go ahead and click on that.", 'start': 6751.498, 'duration': 1.282}, {'end': 6759.772, 'text': "So yes you can also use this plug in to translate a theme but right now we're interested in translating a plug in.", 'start': 6754.008, 'duration': 5.764}, {'end': 6762.914, 'text': 'So if you scroll down towards the bottom here running plug ins,', 'start': 6759.812, 'duration': 3.102}, {'end': 6770.079, 'text': "here we see our test plug in and we know it's the plug in that we were just recently working on, because we see that it's text domain.", 'start': 6762.914, 'duration': 7.165}, {'end': 6773.042, 'text': 'is that familiar WCP domain?', 'start': 6770.079, 'duration': 2.963}, {'end': 6776.144, 'text': "So let's just go ahead and click on our test plug in.", 'start': 6773.142, 'duration': 3.002}, {'end': 6782.53, 'text': "OK, now, before we actually create a translation, let's first create a template,", 'start': 6777.327, 'duration': 5.203}], 'summary': 'Using loco translate plugin to translate a plugin in the admin dashboard.', 'duration': 38.559, 'max_score': 6743.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q6743971.jpg'}, {'end': 7253.822, 'src': 'embed', 'start': 7222.599, 'weight': 3, 'content': [{'end': 7225.76, 'text': 'So let me give you a sneak peek preview in our next lesson.', 'start': 7222.599, 'duration': 3.161}, {'end': 7230.841, 'text': "The PHP based plug in that we're going to create is this word filter.", 'start': 7226.12, 'duration': 4.721}, {'end': 7236.566, 'text': 'There are two big things that make this plug in unique or different from the plug in we just built.', 'start': 7231.721, 'duration': 4.845}, {'end': 7245.575, 'text': 'So number one if I click onto the settings page this settings page is not using the WordPress generated form builder.', 'start': 7237.126, 'duration': 8.449}, {'end': 7253.822, 'text': 'So remember all of those confusing functions like section and field and having WordPress automatically loop through them.', 'start': 7245.975, 'duration': 7.847}], 'summary': 'Next lesson preview: creating a unique php word filter plugin with custom settings.', 'duration': 31.223, 'max_score': 7222.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q7222599.jpg'}, {'end': 7823.502, 'src': 'heatmap', 'start': 7682.789, 'weight': 1, 'content': [{'end': 7692.855, 'text': "So we've already seen this back during the theme development chapters, but it's a function that WordPress offers to us named WP on queue script.", 'start': 7682.789, 'duration': 10.066}, {'end': 7694.656, 'text': 'Semi colon.', 'start': 7693.875, 'duration': 0.781}, {'end': 7697.199, 'text': "We're going to give it three arguments for now.", 'start': 7695.277, 'duration': 1.922}, {'end': 7705.027, 'text': "So ABC, the first argument is just a name that we're sort of giving this JavaScript file, right? Sort of a short name, a variable name.", 'start': 7697.339, 'duration': 7.688}, {'end': 7706.769, 'text': 'So WordPress can identify it.', 'start': 7705.068, 'duration': 1.701}, {'end': 7708.932, 'text': 'You can make up anything you want.', 'start': 7707.23, 'duration': 1.702}, {'end': 7712.155, 'text': "I'll call it our new block type.", 'start': 7709.032, 'duration': 3.123}, {'end': 7716.918, 'text': 'The second argument is just a URL that points towards our JavaScript file.', 'start': 7712.856, 'duration': 4.062}, {'end': 7723.761, 'text': "So let's use the WordPress function called plug in dirt URL parentheses to call it inside there.", 'start': 7717.498, 'duration': 6.263}, {'end': 7728.824, 'text': "Let's use the constant of underscore underscore file underscore underscore.", 'start': 7723.801, 'duration': 5.023}, {'end': 7734.727, 'text': 'So this will give us the URL of the folder that the current file is in and then after that.', 'start': 7729.424, 'duration': 5.303}, {'end': 7738.469, 'text': "So after the parentheses but before the comma we're just going to concatenate on.", 'start': 7734.947, 'duration': 3.522}, {'end': 7742.795, 'text': 'a string of text and just point towards our JavaScript file.', 'start': 7739.614, 'duration': 3.181}, {'end': 7745.735, 'text': 'So we named it test dot J.S.', 'start': 7742.815, 'duration': 2.92}, {'end': 7750.156, 'text': 'OK The third argument is a list of dependencies.', 'start': 7745.735, 'duration': 4.421}, {'end': 7752.397, 'text': "So let's give this an array.", 'start': 7750.937, 'duration': 1.46}, {'end': 7760.779, 'text': 'And for now the only thing we really truly need to load is something called so a string of text WP dash blocks.', 'start': 7752.497, 'duration': 8.282}, {'end': 7765.51, 'text': "Now, don't worry, in a few minutes we will learn what WP blocks is,", 'start': 7761.806, 'duration': 3.704}, {'end': 7770.876, 'text': "so we'll learn why we're loading it here as a dependency and actually how to begin leveraging and using it.", 'start': 7765.51, 'duration': 5.366}, {'end': 7775.661, 'text': "But for now why don't we go ahead and save this and test it out.", 'start': 7771.396, 'duration': 4.265}, {'end': 7780.97, 'text': 'So back in WordPress the first thing we need to do is go activate our new plugin.', 'start': 7776.786, 'duration': 4.184}, {'end': 7787.676, 'text': "So back on the generic admin dashboard screen in the sidebar let's go under plugins.", 'start': 7781.53, 'duration': 6.146}, {'end': 7789.898, 'text': "Let's find the new one that we just created.", 'start': 7788.297, 'duration': 1.601}, {'end': 7791.34, 'text': 'So remember I named mine.', 'start': 7789.998, 'duration': 1.342}, {'end': 7793.482, 'text': 'Are you paying attention quiz.', 'start': 7791.88, 'duration': 1.602}, {'end': 7796.444, 'text': 'So just go ahead and activate your plug in.', 'start': 7794.142, 'duration': 2.302}, {'end': 7803.069, 'text': 'OK What we want to do now is test to make sure that the editor screen is loading our JavaScript file.', 'start': 7797.145, 'duration': 5.924}, {'end': 7806.632, 'text': 'So if we just go into posts and begin editing a post.', 'start': 7803.469, 'duration': 3.163}, {'end': 7810.553, 'text': 'Perfect We see that annoying alert pop up.', 'start': 7808.311, 'duration': 2.242}, {'end': 7812.734, 'text': 'Hello from our new JavaScript file.', 'start': 7811.033, 'duration': 1.701}, {'end': 7813.935, 'text': 'This is great.', 'start': 7813.335, 'duration': 0.6}, {'end': 7819.819, 'text': 'So that means our own custom JavaScript file is loading on this screen from here.', 'start': 7814.055, 'duration': 5.764}, {'end': 7823.502, 'text': "It's very easy to register a new custom block type.", 'start': 7820.239, 'duration': 3.263}], 'summary': 'Wordpress offers wp on queue script to load javascript files with dependencies and activate new plugins.', 'duration': 140.713, 'max_score': 7682.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q7682789.jpg'}, {'end': 7887.725, 'src': 'embed', 'start': 7864.171, 'weight': 0, 'content': [{'end': 7871.135, 'text': 'register block type and this is a method so we want to call it before we give it any arguments.', 'start': 7864.171, 'duration': 6.964}, {'end': 7874.237, 'text': "Let's first talk about where this is coming from.", 'start': 7871.235, 'duration': 3.002}, {'end': 7881.101, 'text': "So WordPress itself is going to add something called WP to the browser's global scope.", 'start': 7874.837, 'duration': 6.264}, {'end': 7887.725, 'text': "Inside that object there's going to be something called blocks and inside that there's something called register block type.", 'start': 7881.741, 'duration': 5.984}], 'summary': 'Wordpress adds wp to global scope with blocks and register block type.', 'duration': 23.554, 'max_score': 7864.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q7864171.jpg'}], 'start': 6600.58, 'title': 'Wordpress plugin and block creation', 'summary': 'Explains creating a language translation in a plugin, translating a wordpress plugin with loco translate, creating a wordpress plugin, and registering a block type in wordpress.', 'chapters': [{'end': 6668.89, 'start': 6600.58, 'title': 'Creating language translation in plugin', 'summary': "Explains how to create a language translation in a plugin, including specifying the path to the languages folder, creating the folder if it doesn't exist, and preparing to save the file for translation.", 'duration': 68.31, 'highlights': ["The chapter focuses on specifying the path to the languages folder and creating it if it doesn't exist.", 'It explains the use of the plug-in base name function and adding a string of text slash languages to the path.', "The chapter emphasizes the importance of creating the 'languages' folder in the plugin directory."]}, {'end': 7429.099, 'start': 6669.53, 'title': 'Wordpress plugin translation with loco translate', 'summary': 'Covers the process of translating a wordpress plugin using loco translate, with a focus on creating a spanish translation, demonstrating the installation, template and translation creation, and the potential security issue related to rendering translated text as html.', 'duration': 759.569, 'highlights': ['The chapter covers the process of translating a WordPress plugin using Loco Translate The chapter focuses on translating a WordPress plugin using Loco Translate, demonstrating an alternative to PoEdit and emphasizing the optimization for WordPress.', 'Demonstrating the installation, template, and translation creation The chapter demonstrates the installation of Loco Translate, the creation of a template file for translation, and the process of creating a Spanish translation, showcasing the steps involved in translating specific words and phrases.', "Potential security issue related to rendering translated text as HTML The chapter addresses a potential security issue where translated text could contain malicious HTML or script tags, and demonstrates the use of 'escape' functions to prevent the rendering of HTML from translations, enhancing security measures."]}, {'end': 7863.251, 'start': 7429.86, 'title': 'Creating wordpress plugin', 'summary': 'Covers creating a new empty plugin folder, adding javascript and php files, as well as registering and loading the javascript file in wordpress, including the process of activating the plugin and testing the javascript file loading on the editor screen.', 'duration': 433.391, 'highlights': ['The process of creating a new empty plugin folder in the WordPress installation is explained, with guidance on naming the folder uniquely and opening it in a text editor. Instructions on creating a new empty plugin folder, emphasizing the importance of a unique name and opening it in a text editor.', 'The steps for creating a new JavaScript file, adding an alert pop up, and saving it are outlined, along with the significance of using PHP to register the new plugin and load the JavaScript file when on the post editor screen. Explanation of creating a new JavaScript file, adding an alert pop up, and saving it, as well as the necessity of using PHP to register the new plugin and load the JavaScript file on the post editor screen.', 'Guidance on creating a PHP class, adding a constructor function, and instructing WordPress to load the JavaScript file when on the block editor screen is provided, including the process of activating the new plugin and testing the JavaScript file loading on the editor screen. Instructions on creating a PHP class, adding a constructor function, and directing WordPress to load the JavaScript file on the block editor screen, along with the process of activating the new plugin and testing the JavaScript file loading on the editor screen.']}, {'end': 8163.829, 'start': 7864.171, 'title': 'Creating wordpress block type', 'summary': 'Explains how to register a block type in wordpress, leveraging the wp global scope and adding properties to the configuration object, including the edit and save functions for controlling the admin post editor screen and public content, respectively.', 'duration': 299.658, 'highlights': ['Leveraging the WP global scope and adding properties to the configuration object. The chapter emphasizes leveraging the WP global scope and adding properties to the configuration object, such as title, icon, category, edit, and save functions, for creating a WordPress block type.', 'Explaining the edit and save functions for controlling the admin post editor screen and public content. The chapter details the purpose of the edit and save functions, explaining that edit function controls the admin post editor screen, while the save function controls the public content.', 'Describing the official WordPress way of creating an HTML element from within JavaScript. The chapter explains the official WordPress method of creating an HTML element within JavaScript by leveraging the WP.element.createElement method with three arguments: type of HTML element, attributes, and children.']}], 'duration': 1563.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q6600580.jpg', 'highlights': ["The chapter emphasizes the importance of creating the 'languages' folder in the plugin directory.", 'The chapter demonstrates the installation of Loco Translate, the creation of a template file for translation, and the process of creating a Spanish translation, showcasing the steps involved in translating specific words and phrases.', 'Instructions on creating a new empty plugin folder, emphasizing the importance of a unique name and opening it in a text editor.', 'The chapter emphasizes leveraging the WP global scope and adding properties to the configuration object, such as title, icon, category, edit, and save functions, for creating a WordPress block type.']}, {'end': 9445.763, 'segs': [{'end': 8215.271, 'src': 'embed', 'start': 8164.149, 'weight': 0, 'content': [{'end': 8168.811, 'text': 'So this is where we would include the actual text that would live inside the heading level three.', 'start': 8164.149, 'duration': 4.662}, {'end': 8170.272, 'text': "So let's say quotes.", 'start': 8168.911, 'duration': 1.361}, {'end': 8176.816, 'text': 'Hello This is from the admin editor screen.', 'start': 8171.093, 'duration': 5.723}, {'end': 8184.9, 'text': "OK Now in terms of our save function let's just use this exact same code but slightly edit it.", 'start': 8178.519, 'duration': 6.381}, {'end': 8191.702, 'text': "So I'm just going to copy this entire line into my clipboard, paste it into the save function.", 'start': 8185.501, 'duration': 6.201}, {'end': 8198.403, 'text': "only let's change the third argument to instead say this is the front end.", 'start': 8191.702, 'duration': 6.701}, {'end': 8204.545, 'text': 'OK And just to make the difference crystal clear you could even change the element to a heading level one.', 'start': 8199.263, 'duration': 5.282}, {'end': 8207.005, 'text': "Let's go ahead and save this.", 'start': 8205.285, 'duration': 1.72}, {'end': 8213.85, 'text': 'Now technically WordPress will always load WP element on the post editor screen.', 'start': 8207.466, 'duration': 6.384}, {'end': 8215.271, 'text': "That's a very safe bet.", 'start': 8213.87, 'duration': 1.401}], 'summary': "Editing the save function to change the third argument to 'front end' and the element to heading level one in wordpress post editor screen.", 'duration': 51.122, 'max_score': 8164.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q8164149.jpg'}, {'end': 8269.077, 'src': 'embed', 'start': 8242.088, 'weight': 2, 'content': [{'end': 8249.674, 'text': 'just to be 100 percent sure that that will already be loaded and exist before WordPress loads our file.', 'start': 8242.088, 'duration': 7.586}, {'end': 8252.777, 'text': "So let's save that and give it a test.", 'start': 8250.334, 'duration': 2.443}, {'end': 8256.639, 'text': 'So on the post editor screen, be sure to reload or refresh.', 'start': 8253.297, 'duration': 3.342}, {'end': 8262.834, 'text': 'Okay, now imagine in between these two paragraphs, I want to insert a new block.', 'start': 8258.171, 'duration': 4.663}, {'end': 8267.236, 'text': 'So cool, you should see it as the very first option.', 'start': 8264.215, 'duration': 3.021}, {'end': 8269.077, 'text': 'Are you paying attention??', 'start': 8267.897, 'duration': 1.18}], 'summary': 'The transcript discusses testing and inserting a new block in wordpress, emphasizing the need for 100% certainty before loading and refreshing the post editor screen.', 'duration': 26.989, 'max_score': 8242.088, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q8242088.jpg'}, {'end': 8498.268, 'src': 'embed', 'start': 8474.41, 'weight': 6, 'content': [{'end': 8483.015, 'text': 'however, in order to use it, it does require a little bit of configuration or installation of development workflow tools on your computer.', 'start': 8474.41, 'duration': 8.605}, {'end': 8489.2, 'text': 'Now, while that can typically be complex or difficult to set up, luckily for us,', 'start': 8483.695, 'duration': 5.505}, {'end': 8498.268, 'text': 'the WordPress team has created an official JavaScript package called WordPress Scripts that makes the entire process 150 million percent easier and simpler.', 'start': 8489.2, 'duration': 9.068}], 'summary': 'Wordpress scripts makes development 150 million percent easier.', 'duration': 23.858, 'max_score': 8474.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q8474410.jpg'}, {'end': 8759.702, 'src': 'embed', 'start': 8733.393, 'weight': 10, 'content': [{'end': 8739.294, 'text': 'It can live in a folder named source and then the automatic tool that converts this code.', 'start': 8733.393, 'duration': 5.901}, {'end': 8748.476, 'text': "So if I put it back to this this version of the file can live in a different folder called build and that's what will tell WordPress to actually load.", 'start': 8739.814, 'duration': 8.662}, {'end': 8754.799, 'text': 'So right now let me put my edit function back to the exact same way that yours is from our previous lesson.', 'start': 8749.136, 'duration': 5.663}, {'end': 8759.702, 'text': "OK and now let's start to learn how we can use J.S.", 'start': 8754.819, 'duration': 4.883}], 'summary': 'Code can be converted using an automatic tool and edited to use j.s.', 'duration': 26.309, 'max_score': 8733.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q8733393.jpg'}, {'end': 9039.476, 'src': 'heatmap', 'start': 8900.271, 'weight': 0.787, 'content': [{'end': 8908.433, 'text': 'Now that we have node, we can go ahead and set up the tool in the middle that will convert our JSX into code that looks like this.', 'start': 8900.271, 'duration': 8.162}, {'end': 8913.674, 'text': 'In the past, setting up an automated tool like that might have been a bit complicated.', 'start': 8909.293, 'duration': 4.381}, {'end': 8918.715, 'text': 'But luckily for us, there is an official WordPress JavaScript package.', 'start': 8914.234, 'duration': 4.481}, {'end': 8923.216, 'text': "So it's just the at symbol WordPress slash scripts.", 'start': 8919.395, 'duration': 3.821}, {'end': 8926.357, 'text': 'So how do we download and use this.', 'start': 8924.176, 'duration': 2.181}, {'end': 8936.64, 'text': 'Well when we installed node on our computer we also installed something called NPM short for node package manager.', 'start': 8927.037, 'duration': 9.603}, {'end': 8941.762, 'text': 'Now, before we use NPM to download that WordPress scripts package,', 'start': 8937.161, 'duration': 4.601}, {'end': 8948.965, 'text': "let's first sort of create a grocery list in our folder that will keep track of any JavaScript dependencies we need.", 'start': 8941.762, 'duration': 7.203}, {'end': 8952.446, 'text': 'To do that, I want you to run the following command with me.', 'start': 8949.665, 'duration': 2.781}, {'end': 8960.789, 'text': "So it's NPM space in it space and then dash why it's press enter.", 'start': 8952.646, 'duration': 8.143}, {'end': 8968.212, 'text': "OK, so that will create a package dot JSON file that keeps track of everything we're going to install with NPM.", 'start': 8961.83, 'duration': 6.382}, {'end': 8971.874, 'text': 'Really, though, we only need to install one package right now.', 'start': 8968.953, 'duration': 2.921}, {'end': 8976.882, 'text': 'Right We want the at WordPress slash scripts package.', 'start': 8972.679, 'duration': 4.203}, {'end': 8979.345, 'text': 'So type this command in with me now.', 'start': 8977.363, 'duration': 1.982}, {'end': 8982.687, 'text': 'NPM install.', 'start': 8980.125, 'duration': 2.562}, {'end': 8990.253, 'text': 'And then the name of the package was at symbol WordPress forward slash scripts.', 'start': 8983.668, 'duration': 6.585}, {'end': 8994.017, 'text': "And in 2021, this isn't 100 percent necessary.", 'start': 8991.014, 'duration': 3.003}, {'end': 9001.303, 'text': 'But if you want to, you can say dash dash save dash dev to market as a dev dependency.', 'start': 8994.057, 'duration': 7.246}, {'end': 9003.085, 'text': 'Go ahead and press enter.', 'start': 9002.003, 'duration': 1.082}, {'end': 9007.231, 'text': 'And now depending on the speed of your internet connection, this will take a minute or two.', 'start': 9003.185, 'duration': 4.046}, {'end': 9013.741, 'text': 'The official WordPress JavaScript package makes use of lots and lots of other smaller packages.', 'start': 9007.852, 'duration': 5.889}, {'end': 9015.183, 'text': 'So be patient.', 'start': 9013.841, 'duration': 1.342}, {'end': 9016.245, 'text': 'This will take a minute.', 'start': 9015.303, 'duration': 0.942}, {'end': 9021.389, 'text': 'Once it completes the question becomes how do we use it.', 'start': 9018.268, 'duration': 3.121}, {'end': 9027.292, 'text': 'Well the nice thing about this package is that it requires almost zero configuration.', 'start': 9021.869, 'duration': 5.423}, {'end': 9032.194, 'text': "In other words it has a certain folder and file structure that it's going to look for.", 'start': 9027.832, 'duration': 4.362}, {'end': 9039.476, 'text': 'So in our plug in folder I want you to create a new sub folder with this exact name.', 'start': 9032.914, 'duration': 6.562}], 'summary': 'Setting up wordpress javascript package using npm for automated jsx conversion.', 'duration': 139.205, 'max_score': 8900.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q8900271.jpg'}, {'end': 9073.62, 'src': 'embed', 'start': 9045.879, 'weight': 5, 'content': [{'end': 9053.909, 'text': "OK Inside that new source folder I want you to create a new file and let's name it index dot J.S.", 'start': 9045.879, 'duration': 8.03}, {'end': 9059.011, 'text': 'Now inside this brand new totally blank index dot J.S.', 'start': 9055.649, 'duration': 3.362}, {'end': 9065.315, 'text': "file Why don't we just copy and paste over the contents from our test dot J.S.", 'start': 9059.051, 'duration': 6.264}, {'end': 9072.56, 'text': 'So open up test just select everything in this entire file copy it back in our new index dot J.S.', 'start': 9065.315, 'duration': 7.245}, {'end': 9073.62, 'text': 'file paste it in.', 'start': 9072.6, 'duration': 1.02}], 'summary': 'Create a new file named index.js in the new source folder and paste the contents from test.js into it.', 'duration': 27.741, 'max_score': 9045.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q9045879.jpg'}, {'end': 9251.624, 'src': 'embed', 'start': 9223.428, 'weight': 3, 'content': [{'end': 9231.773, 'text': "Notice, in our folder we didn't create this folder named build, so the WordPress JavaScript package did this for us.", 'start': 9223.428, 'duration': 8.345}, {'end': 9237.276, 'text': 'inside of the build folder is a converted copy of our index dot J.S.', 'start': 9231.773, 'duration': 5.503}, {'end': 9244.06, 'text': "file Now it's not meant to be human readable so if you open it up it's not the easiest thing to look through.", 'start': 9237.316, 'duration': 6.744}, {'end': 9251.624, 'text': "It's optimized for a browser not for a human to read but if you scroll down For me, it's around line number 106.", 'start': 9244.12, 'duration': 7.504}], 'summary': 'Wordpress javascript package automatically creates a build folder containing an optimized, browser-friendly copy of the index.js file, which is not human-readable.', 'duration': 28.196, 'max_score': 9223.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q9223428.jpg'}, {'end': 9453.987, 'src': 'heatmap', 'start': 9292.773, 'weight': 7, 'content': [{'end': 9296.936, 'text': "Well it wasn't a huge change but the point is it just ran again.", 'start': 9292.773, 'duration': 4.163}, {'end': 9300.198, 'text': 'So if you check the copy that lives in the build folder.', 'start': 9297.456, 'duration': 2.742}, {'end': 9303.847, 'text': "Look it's automatically been updated.", 'start': 9301.704, 'duration': 2.143}, {'end': 9305.288, 'text': 'There are the two exclamations.', 'start': 9303.907, 'duration': 1.381}, {'end': 9308.993, 'text': 'So the point is we just now want to tell it let me close this file.', 'start': 9305.789, 'duration': 3.204}, {'end': 9315.74, 'text': 'We just want to tell WordPress to load this version of the JavaScript file in the browser.', 'start': 9309.473, 'duration': 6.267}, {'end': 9320.286, 'text': 'So to do that we would just go into our index dot php file.', 'start': 9316.581, 'duration': 3.705}, {'end': 9325.576, 'text': "And we're looking for our function that we named admin assets.", 'start': 9321.934, 'duration': 3.642}, {'end': 9329.697, 'text': "We're just looking for the path that points towards our JavaScript file.", 'start': 9326.136, 'duration': 3.561}, {'end': 9331.978, 'text': 'So instead of test dot J.S.', 'start': 9330.237, 'duration': 1.741}, {'end': 9333.399, 'text': "Let's hollow out these quotes.", 'start': 9332.018, 'duration': 1.381}, {'end': 9342.762, 'text': 'We would instead just say go into the build folder slash and load the file named index dot J.S.', 'start': 9333.599, 'duration': 9.163}, {'end': 9343.883, 'text': "Let's give this a save.", 'start': 9342.762, 'duration': 1.121}, {'end': 9350.971, 'text': 'And now if we refresh the post editor screen in WordPress, Awesome.', 'start': 9344.323, 'duration': 6.648}, {'end': 9353.193, 'text': 'This is H3 from JSX.', 'start': 9351.211, 'duration': 1.982}, {'end': 9359.999, 'text': "Now that it's up and running let's practice with more complex or nested HTML.", 'start': 9354.194, 'duration': 5.805}, {'end': 9365.024, 'text': 'So back in our source code so in the source folder index dot J.S.', 'start': 9360.6, 'duration': 4.424}, {'end': 9370.766, 'text': 'If you only have one single element in a single line of code you can use this syntax.', 'start': 9365.845, 'duration': 4.921}, {'end': 9380.729, 'text': 'However if you want to have multiple lines and multiple elements we do want to return a pair of parentheses and then inside those parentheses.', 'start': 9371.206, 'duration': 9.523}, {'end': 9383.77, 'text': 'Now we can have multiple line HTML.', 'start': 9381.249, 'duration': 2.521}, {'end': 9389.071, 'text': "Well technically it's not HTML it's JSX but you get the point.", 'start': 9384.11, 'duration': 4.961}, {'end': 9390.471, 'text': "So let's practice.", 'start': 9389.611, 'duration': 0.86}, {'end': 9392.172, 'text': "Let's have a div.", 'start': 9390.571, 'duration': 1.601}, {'end': 9394.67, 'text': "So I'll type div and then hit tab.", 'start': 9393.109, 'duration': 1.561}, {'end': 9396.231, 'text': 'Now your V.S.', 'start': 9394.99, 'duration': 1.241}, {'end': 9400.693, 'text': 'code might not give you the automatic tab triggers right away.', 'start': 9396.271, 'duration': 4.422}, {'end': 9403.034, 'text': 'If you want to make sure that your V.S.', 'start': 9401.453, 'duration': 1.581}, {'end': 9409.917, 'text': 'code is set up like mine and that HTML tab triggers are recognized inside of JSX.', 'start': 9403.074, 'duration': 6.843}, {'end': 9411.078, 'text': "Here's what you can do.", 'start': 9410.277, 'duration': 0.801}, {'end': 9418.285, 'text': "There are multiple ways to set this up, but this is the simplest and I've yet to see a single drawback or downside to it.", 'start': 9411.678, 'duration': 6.607}, {'end': 9419.767, 'text': 'So open up your V.S.', 'start': 9418.846, 'duration': 0.921}, {'end': 9421.389, 'text': 'code settings on Windows.', 'start': 9419.807, 'duration': 1.582}, {'end': 9424.392, 'text': "That's control and comma on Mac.", 'start': 9421.429, 'duration': 2.963}, {'end': 9426.234, 'text': "That's command and comma.", 'start': 9424.633, 'duration': 1.601}, {'end': 9431.1, 'text': 'OK, then I want you to click this icon right here towards the top right.', 'start': 9427.155, 'duration': 3.945}, {'end': 9436.419, 'text': 'So you can control all sorts of different settings and options in this file.', 'start': 9433.137, 'duration': 3.282}, {'end': 9440.58, 'text': "The one that I want to draw your attention to is the one that I'm highlighting right now.", 'start': 9436.759, 'duration': 3.821}, {'end': 9445.763, 'text': "So I've just set a global and permanent file association.", 'start': 9441.161, 'duration': 4.602}, {'end': 9453.987, 'text': "So I'm saying that any JavaScript files should not just use the JavaScript syntax reader or interpreter.", 'start': 9445.783, 'duration': 8.204}], 'summary': 'Updating javascript file in wordpress to load from build folder. practicing jsx in source code.', 'duration': 161.214, 'max_score': 9292.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q9292773.jpg'}], 'start': 8164.149, 'title': 'Integrating javascript with wordpress and learning jsx for html interfaces', 'summary': 'Provides a practical overview of integrating javascript with wordpress, emphasizing the importance of best practices and the wordpress scripts package. it also introduces jsx as a solution for spelling out complex html interfaces and discusses using jsx in node.js, installing wordpress scripts, and utilizing the wordpress javascript package for automated code conversion and updating.', 'chapters': [{'end': 8498.268, 'start': 8164.149, 'title': 'Wordpress javascript overview', 'summary': 'Provides a practical overview of integrating javascript with wordpress, emphasizing the importance of best practices and the wordpress scripts package to streamline the process, while also demystifying the backend and front-end processes of saving and rendering elements.', 'duration': 334.119, 'highlights': ["The chapter emphasizes the best practice of specifying plugin dependencies in WordPress by ensuring the WP element is loaded before the plugin's file. It is recommended to specify plugin dependencies by ensuring the WP element is loaded before the plugin's file, which contributes to a safer and more efficient integration with WordPress.", 'The backend process involves WordPress calling the JavaScript function to generate the element on the admin screen, while the save method returns text that gets saved into the database. On the admin screen, WordPress calls the JavaScript function to generate the element, while the save method returns text that gets saved into the database, demonstrating the backend process of saving elements in WordPress.', 'The chapter demystifies the process of saving and rendering elements, clarifying that the front end of WordPress does not directly involve JavaScript, with the save method returning text added into the database. The chapter demystifies the process of saving and rendering elements, clarifying that the front end of WordPress does not directly involve JavaScript, as the save method returns text added into the database, providing a clear understanding of the front-end process.', 'The chapter introduces the concept of using JSX for creating complex HTML interfaces in JavaScript, highlighting its benefits and the need for installation of development workflow tools. The chapter introduces the concept of using JSX for creating complex HTML interfaces in JavaScript, emphasizing its benefits while also highlighting the need for installation of development workflow tools to leverage JSX.']}, {'end': 8754.799, 'start': 8501.551, 'title': 'Learning jsx for html interfaces', 'summary': "Introduces jsx as a solution for easily and elegantly spelling out complex html interfaces, highlighting the inefficiency and lack of intuitiveness of manually typing out html structures using javascript's create element function, and emphasizing the need for a tool to convert jsx into javascript for web browsers.", 'duration': 253.248, 'highlights': ['JSX as a solution for easily and elegantly spelling out complex HTML interfaces Introduces JSX as a solution for easily and elegantly spelling out complex HTML interfaces.', "Inefficiency and lack of intuitiveness of manually typing out HTML structures using JavaScript's create element function Highlights the inefficiency and lack of intuitiveness of manually typing out HTML structures using JavaScript's create element function, especially for complex nested HTML structures.", 'Emphasizing the need for a tool to convert JSX into JavaScript for web browsers Emphasizes the need for a tool to convert JSX into JavaScript for web browsers to enable the use of JSX for creating HTML interfaces.']}, {'end': 9016.245, 'start': 8754.819, 'title': 'Using jsx in node.js and installing wordpress scripts', 'summary': 'Discusses how to check for node.js installation, install it if necessary, and set up the tool to convert jsx into code, as well as how to download and use the official wordpress javascript package using npm.', 'duration': 261.426, 'highlights': ['The chapter discusses how to check for Node.js installation and install it if necessary. The instructor explains how to check for Node.js installation and how to download and install it if it is not found, providing steps for both Windows and Mac users.', 'Instructions for setting up the tool to convert JSX into code are provided. The instructor explains the process of setting up an automated tool to convert JSX into code, highlighting that it is made easier due to the availability of the official WordPress JavaScript package.', 'Guidance on downloading and using the official WordPress JavaScript package using NPM is given. The instructor guides on creating a package dot JSON file to keep track of JavaScript dependencies, then proceeds to demonstrate the use of NPM to download the official WordPress scripts package, emphasizing patience due to its reliance on numerous smaller packages.']}, {'end': 9445.763, 'start': 9018.268, 'title': 'Using wordpress javascript package', 'summary': 'Explains how to use the wordpress javascript package, detailing the folder and file structure, configuring scripts in package.json, and utilizing start and build commands to convert and watch changes in the code, resulting in automated conversion of jsx to create element, and updating the javascript file in the browser.', 'duration': 427.495, 'highlights': ['Automated conversion of JSX to create element using start and build commands in package.json, resulting in optimized code for the browser and automatic bundling on file changes. Automated conversion of JSX, optimized code for the browser, automatic bundling on file changes.', 'Instructions for configuring scripts in package.json to create start and build commands for converting and watching changes in the code, providing a streamlined process for development. Configuring scripts in package.json, creating start and build commands, streamlined process for development.', "Details on creating specific folder and file structure, such as subfolder 'src' and file 'index.js', with step-by-step guidance on configuring the setup. Creating specific folder and file structure, step-by-step guidance on setup."]}], 'duration': 1281.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q8164149.jpg', 'highlights': ["The chapter emphasizes the best practice of specifying plugin dependencies in WordPress by ensuring the WP element is loaded before the plugin's file.", 'The backend process involves WordPress calling the JavaScript function to generate the element on the admin screen, while the save method returns text that gets saved into the database.', 'The chapter introduces the concept of using JSX for creating complex HTML interfaces in JavaScript, highlighting its benefits and the need for installation of development workflow tools.', 'JSX as a solution for easily and elegantly spelling out complex HTML interfaces.', 'Emphasizing the need for a tool to convert JSX into JavaScript for web browsers.', 'The chapter discusses how to check for Node.js installation and install it if necessary.', 'Instructions for setting up the tool to convert JSX into code are provided.', 'Guidance on downloading and using the official WordPress JavaScript package using NPM is given.', 'Automated conversion of JSX to create element using start and build commands in package.json, resulting in optimized code for the browser and automatic bundling on file changes.', 'Instructions for configuring scripts in package.json to create start and build commands for converting and watching changes in the code, providing a streamlined process for development.', "Details on creating specific folder and file structure, such as subfolder 'src' and file 'index.js', with step-by-step guidance on configuring the setup."]}, {'end': 10567.062, 'segs': [{'end': 9759.728, 'src': 'embed', 'start': 9735.933, 'weight': 0, 'content': [{'end': 9743.176, 'text': 'So instead of that, what we really want is a text input field where the user can actually click and then begin typing.', 'start': 9735.933, 'duration': 7.243}, {'end': 9748.718, 'text': 'Not only that, we want to be sure that we save and store the value that they enter.', 'start': 9743.676, 'duration': 5.042}, {'end': 9754.703, 'text': "So throughout this video lesson we're going to learn how attributes make this possible.", 'start': 9749.298, 'duration': 5.405}, {'end': 9759.728, 'text': "Without further ado let's jump into the code and change what we're outputting here.", 'start': 9755.404, 'duration': 4.324}], 'summary': 'Learning how attributes enable text input and value storage.', 'duration': 23.795, 'max_score': 9735.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q9735933.jpg'}, {'end': 9821.945, 'src': 'embed', 'start': 9790.407, 'weight': 2, 'content': [{'end': 9793.889, 'text': 'And it can be so placeholder for grass color.', 'start': 9790.407, 'duration': 3.482}, {'end': 9802.655, 'text': 'Just a quick note about JSX elements must either have a matching closing tag or a self closing tag like this.', 'start': 9794.79, 'duration': 7.865}, {'end': 9807.958, 'text': 'So notice at the end of our input there is a forward slash to make this a self closing element.', 'start': 9802.875, 'duration': 5.083}, {'end': 9811.38, 'text': 'If you got rid of that this is no longer valid JSX.', 'start': 9808.018, 'duration': 3.362}, {'end': 9813.562, 'text': 'So just keep that in mind.', 'start': 9812.461, 'duration': 1.101}, {'end': 9816.343, 'text': 'Every element needs to be closed in one way or another.', 'start': 9813.702, 'duration': 2.641}, {'end': 9821.945, 'text': "Anyways let's imagine we have these two input fields sky color and grass color.", 'start': 9817.163, 'duration': 4.782}], 'summary': 'Jsx elements must have matching closing tags or self closing tags. every element needs to be closed in one way or another.', 'duration': 31.538, 'max_score': 9790.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q9790407.jpg'}, {'end': 10002.07, 'src': 'embed', 'start': 9979.162, 'weight': 1, 'content': [{'end': 9986.365, 'text': "What I mean by this is in terms of the event that we're going to listen for, we're not interested in any form being submitted.", 'start': 9979.162, 'duration': 7.203}, {'end': 9992.108, 'text': "Instead, we're interested in each one of these inputs having their value changed.", 'start': 9986.945, 'duration': 5.163}, {'end': 10002.07, 'text': 'After every keystroke as the user is typing into this field, we want to update the value of that property in our attribute.', 'start': 9993.388, 'duration': 8.682}], 'summary': 'Listening for input value changes, updating attributes after each keystroke.', 'duration': 22.908, 'max_score': 9979.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q9979162.jpg'}, {'end': 10216.321, 'src': 'embed', 'start': 10188.61, 'weight': 3, 'content': [{'end': 10192.734, 'text': 'So this gets into the way that react and really just web browsers in general work.', 'start': 10188.61, 'duration': 4.124}, {'end': 10196.937, 'text': 'But essentially when an HTML element has an event listener.', 'start': 10193.314, 'duration': 3.623}, {'end': 10200.22, 'text': 'Well, when it runs the function that you told it to run,', 'start': 10197.498, 'duration': 2.722}, {'end': 10206.625, 'text': "it's going to pass into it an argument that has all sorts of information about the event that just happened.", 'start': 10200.22, 'duration': 6.405}, {'end': 10212.65, 'text': 'So let me show you how we can pull in whatever the user has typed into the field right here.', 'start': 10207.266, 'duration': 5.384}, {'end': 10216.321, 'text': 'Within this function update sky color.', 'start': 10213.618, 'duration': 2.703}], 'summary': 'Html event listeners pass event information to functions, enabling user input retrieval.', 'duration': 27.711, 'max_score': 10188.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q10188610.jpg'}], 'start': 9445.783, 'title': 'Using javascript react, interactive block attributes, react framework basics, and wordpress front-end testing', 'summary': 'Provides guidance on using javascript react (jsx) in vs code, creating interactive block attributes, understanding react framework basics, and testing a wordpress front-end. it includes addressing limitations, creating dynamic attributes, and resolving error messages.', 'chapters': [{'end': 9644.538, 'start': 9445.783, 'title': 'Using javascript react in vs code', 'summary': 'Explains how to use javascript react (jsx) syntax in vs code for javascript files, highlighting the benefits and demonstrating the use of jsx syntax in creating nested html structures, while emphasizing the limitation of having only one top-level element and the use of a react fragment. the chapter also addresses the issue of unexpected or invalid content in wordpress blocks and the solution of deleting and inserting a new copy of the block.', 'duration': 198.755, 'highlights': ['The chapter explains how to use JavaScript React (JSX) syntax in VS Code for JavaScript files, emphasizing that it does not require any installation and is built into V.S Code, enabling the use of HTML tab triggers inside a block of JSX.', 'Demonstrates the use of JSX syntax in creating nested HTML structures, with examples of paragraph and heading elements, showcasing the benefits of using JavaScript React.', 'Highlights the limitation of having only one top-level element in JSX and introduces the concept of a react fragment as a solution to avoid semantically meaningless div wrappers.', 'Addresses the issue of unexpected or invalid content in WordPress blocks due to modifications in the save function, providing guidance to delete and insert a new copy of the block as a solution.']}, {'end': 9953.591, 'start': 9644.758, 'title': 'Interactive block attributes', 'summary': 'Covers how to create an interactive block type with attributes, allowing users to input values, store them, and bridge the gap between admin editor code and saved public output. it includes instructions on how to stop a running task in the command line, adding text input fields, and defining attributes for the block type.', 'duration': 308.833, 'highlights': ['Instructions on stopping a running task in the command line using control C, applicable to Windows, Mac, and Linux users. The chapter provides a quick guide on stopping a running task in the command line using the keyboard shortcut control C, which is applicable to users on Windows, Mac, and Linux.', 'Guidance on creating an interactive block type with text input fields for users to input values and instructions on how to store the entered values. The chapter explains the process of creating an interactive block type with text input fields, allowing users to input values and provides instructions on storing the entered values.', 'Explanation on defining attributes for the block type, including specifying the type of attribute such as string, array, number, or Boolean. The chapter provides an explanation on defining attributes for the block type, including specifying the type of attribute, such as string, array, number, or Boolean, and the required properties for describing the attribute.']}, {'end': 10351.12, 'start': 9954.497, 'title': 'React framework basics', 'summary': 'Discusses how to update attributes in a react framework by creating functions for on change events and utilizing event data to dynamically change attribute values, ultimately demonstrating how to access attribute values for the save function.', 'duration': 396.623, 'highlights': ['Creating functions for on change events The chapter discusses creating separate functions for on change events in the React framework to update attribute values.', 'Utilizing event data to dynamically change attribute values The tutorial explains how to use event data to dynamically change attribute values based on user input in the React framework.', 'Accessing attribute values for the save function The transcript demonstrates how to access attribute values for the save function by utilizing the data passed as an argument from WordPress.']}, {'end': 10567.062, 'start': 10352.284, 'title': 'Wordpress front-end testing', 'summary': 'Discusses setting up and testing a wordpress front-end, covering running the workflow, resolving error messages, pre-populating input values, and checking database storage.', 'duration': 214.778, 'highlights': ['The importance of running the WordPress scripts start task is emphasized, which can be done using NPM run start in the command line. N/A', "Resolving the error message 'block contains unexpected or invalid content' by deleting the instance of the block and inserting a fresh copy is discussed. N/A", 'Pre-populating input values by leveraging the props dot attributes dot sky color and grass color to display real values is explained, ensuring the front end works perfectly. N/A', 'Demonstrating the storage of user values in the database, navigating to the posts table, and editing the post content field to view the stored data is illustrated. N/A']}], 'duration': 1121.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q9445783.jpg', 'highlights': ['The chapter explains how to use JavaScript React (JSX) syntax in VS Code for JavaScript files, emphasizing that it does not require any installation and is built into V.S Code, enabling the use of HTML tab triggers inside a block of JSX.', 'Instructions on stopping a running task in the command line using control C, applicable to Windows, Mac, and Linux users. The chapter provides a quick guide on stopping a running task in the command line using the keyboard shortcut control C, which is applicable to users on Windows, Mac, and Linux.', 'Creating functions for on change events The chapter discusses creating separate functions for on change events in the React framework to update attribute values.', 'The importance of running the WordPress scripts start task is emphasized, which can be done using NPM run start in the command line.']}, {'end': 11298.764, 'segs': [{'end': 10823.931, 'src': 'embed', 'start': 10777.935, 'weight': 4, 'content': [{'end': 10785.502, 'text': "So in admin or you'll need to go back a page refresh and just make sure that you are indeed editing the very last or final post.", 'start': 10777.935, 'duration': 7.567}, {'end': 10789.525, 'text': 'Notice there is no comment with those attributes.', 'start': 10786.182, 'duration': 3.343}, {'end': 10793.428, 'text': "Instead it's just this HTML string of text.", 'start': 10789.965, 'duration': 3.463}, {'end': 10796.411, 'text': 'So this still works perfectly in the admin area.', 'start': 10794.009, 'duration': 2.402}, {'end': 10799.153, 'text': 'If I refresh the front end it still works perfectly there.', 'start': 10796.451, 'duration': 2.702}, {'end': 10805.179, 'text': "The only difference is WordPress doesn't need to save a copy of our attributes in the comment.", 'start': 10799.614, 'duration': 5.565}, {'end': 10812.223, 'text': "Instead, we're using this string of text as our source of truth and we're extracting or pulling values out of it.", 'start': 10805.899, 'duration': 6.324}, {'end': 10814.405, 'text': "Now, there's nothing wrong with this approach.", 'start': 10812.804, 'duration': 1.601}, {'end': 10818.727, 'text': "I'm sure it's the correct option for certain types of plugins and block types.", 'start': 10814.445, 'duration': 4.282}, {'end': 10823.931, 'text': 'But personally, in my opinion, I never use this approach.', 'start': 10818.807, 'duration': 5.124}], 'summary': 'In wordpress, using a string of text as the source of truth for attributes is viable but not preferred by the speaker.', 'duration': 45.996, 'max_score': 10777.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q10777935.jpg'}, {'end': 11014.386, 'src': 'embed', 'start': 10986.909, 'weight': 0, 'content': [{'end': 10995.294, 'text': 'towards the end of our last lesson, we learned that if you let the saved string of text act as your source of truth,', 'start': 10986.909, 'duration': 8.385}, {'end': 11000.317, 'text': "then WordPress doesn't even need to save your attributes in a comment like this.", 'start': 10995.294, 'duration': 5.023}, {'end': 11010.503, 'text': "Well, even though we aren't using that approach and we do have our attributes in the comment, WordPress wants to keep that option open to us,", 'start': 11001.158, 'duration': 9.345}, {'end': 11014.386, 'text': 'meaning it needs to be able to trust the saved text.', 'start': 11010.503, 'duration': 3.883}], 'summary': 'Using saved text as source of truth can eliminate the need for saving attributes in wordpress comments.', 'duration': 27.477, 'max_score': 10986.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q10986909.jpg'}, {'end': 11140.153, 'src': 'embed', 'start': 11111.521, 'weight': 2, 'content': [{'end': 11113.103, 'text': "let's add a new top level property.", 'start': 11111.521, 'duration': 1.582}, {'end': 11115.205, 'text': 'call it deprecated.', 'start': 11113.103, 'duration': 2.102}, {'end': 11120.37, 'text': 'it needs to be this exact name, colon and then you give it an array.', 'start': 11115.205, 'duration': 5.165}, {'end': 11124.372, 'text': 'And what do you give it an array of? Well objects.', 'start': 11120.39, 'duration': 3.982}, {'end': 11129.679, 'text': "So for now let's just give it one object you can drop down inside this object.", 'start': 11124.553, 'duration': 5.126}, {'end': 11136.589, 'text': 'You just need to give it the attributes and save values and functions from the previous version.', 'start': 11129.98, 'duration': 6.609}, {'end': 11140.153, 'text': 'So for example imagine I want to remove the word completely.', 'start': 11137.149, 'duration': 3.004}], 'summary': "Add a 'deprecated' top level property with an array of objects containing attributes and values from the previous version.", 'duration': 28.632, 'max_score': 11111.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q11111521.jpg'}], 'start': 10567.082, 'title': 'Managing dynamic block attributes and output in wordpress', 'summary': 'Covers storing dynamic data in wordpress custom blocks using attributes and the source property, and enabling dynamic block output with php. it includes examples, code snippets, and demonstrates changes to the block output with quantifiable improvements and errors prevention.', 'chapters': [{'end': 10868.241, 'start': 10567.082, 'title': 'Wordpress custom block attributes', 'summary': 'Explains how to store dynamic data in wordpress custom blocks using attributes and the source property, demonstrating it with examples and code snippets.', 'duration': 301.159, 'highlights': ['WordPress stores dynamic data for custom blocks in attributes object within HTML comments, which can be accessed and manipulated. WordPress stores dynamic data for custom blocks in attributes object within HTML comments, allowing easy access and manipulation.', 'The source property in WordPress allows the saved HTML string to be the source of truth for dynamic data, eliminating the need to store the object of attributes in the comment. The source property in WordPress allows the saved HTML string to be the source of truth for dynamic data, eliminating the need to store the object of attributes in the comment.', 'Explaining the process of using source property with unique elements and selectors to target specific values within the saved HTML string, providing practical code examples. Demonstrating the process of using source property with unique elements and selectors to target specific values within the saved HTML string, providing practical code examples.']}, {'end': 11298.764, 'start': 10868.601, 'title': 'Dynamic block output with php', 'summary': "Covers how to make the block output dynamic by explaining the issues with saving static text and demonstrating how to use the 'deprecated' property to provide a history of changes, enabling dynamic updates without errors, illustrated by changing the output from a paragraph to a heading level three and removing a word.", 'duration': 430.163, 'highlights': ["The chapter covers how to make the block output dynamic by explaining the issues with saving static text and demonstrating how to use the 'deprecated' property to provide a history of changes, enabling dynamic updates without errors, illustrated by changing the output from a paragraph to a heading level three and removing a word.", 'Explains the problem with changing the HTML structure for the save function of the block type, causing errors and the need to delete and insert a fresh copy, highlighting the importance of making changes without encountering issues.', "Illustrates the use of the 'deprecated' property to provide a history of changes, enabling dynamic updates without errors, by changing the output from a paragraph to a heading level three and removing a word, showing the practical application of the concept."]}], 'duration': 731.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q10567082.jpg', 'highlights': ['WordPress stores dynamic data for custom blocks in attributes object within HTML comments, allowing easy access and manipulation.', 'The source property in WordPress allows the saved HTML string to be the source of truth for dynamic data, eliminating the need to store the object of attributes in the comment.', 'Demonstrating the process of using source property with unique elements and selectors to target specific values within the saved HTML string, providing practical code examples.', "The chapter covers how to make the block output dynamic by explaining the issues with saving static text and demonstrating how to use the 'deprecated' property to provide a history of changes, enabling dynamic updates without errors.", "Illustrates the use of the 'deprecated' property to provide a history of changes, enabling dynamic updates without errors, by changing the output from a paragraph to a heading level three and removing a word, showing the practical application of the concept.", 'Explains the problem with changing the HTML structure for the save function of the block type, causing errors and the need to delete and insert a fresh copy, highlighting the importance of making changes without encountering issues.']}, {'end': 12085.517, 'segs': [{'end': 11793.804, 'src': 'embed', 'start': 11772.171, 'weight': 1, 'content': [{'end': 11782.538, 'text': "OK, Now let's just go create a function with that name still within our class, but below this function, let's say function the HTML parentheses,", 'start': 11772.171, 'duration': 10.367}, {'end': 11785.84, 'text': 'curly brackets inside the body of this new function.', 'start': 11782.538, 'duration': 3.302}, {'end': 11787.981, 'text': 'We would just want to return.', 'start': 11786.24, 'duration': 1.741}, {'end': 11789.982, 'text': "Let's have a string of text.", 'start': 11789.022, 'duration': 0.96}, {'end': 11793.804, 'text': "Be sure to have a semicolon there and let's just have a paragraph.", 'start': 11790.022, 'duration': 3.782}], 'summary': 'Creating a function to return a string of text and a paragraph.', 'duration': 21.633, 'max_score': 11772.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q11772171.jpg'}, {'end': 12058.753, 'src': 'embed', 'start': 11990.948, 'weight': 0, 'content': [{'end': 12000.794, 'text': 'Well, perhaps it takes an extra two milliseconds for WordPress to run our PHP function instead of just loading a static string of text from the database.', 'start': 11990.948, 'duration': 9.846}, {'end': 12007.078, 'text': "But I would argue that if you're being smart about caching on your site that's not an issue.", 'start': 12001.435, 'duration': 5.643}, {'end': 12010.961, 'text': 'So long story short I am a huge fan of this approach.', 'start': 12007.639, 'duration': 3.322}, {'end': 12014.043, 'text': 'Just a few quick notes before we close out this lesson.', 'start': 12011.681, 'duration': 2.362}, {'end': 12020.789, 'text': 'You could use the escape underscore HTML function to escape these dynamic values.', 'start': 12014.604, 'duration': 6.185}, {'end': 12031.317, 'text': "However it's not uncommon in the history of WordPress to give the admin owner of the site the ability to type in HTML into their edit screen.", 'start': 12021.25, 'duration': 10.067}, {'end': 12033.298, 'text': "So that's your own judgment call.", 'start': 12031.377, 'duration': 1.921}, {'end': 12042.342, 'text': "In this case we don't really need the admin to be able to enter HTML into those fields so I probably would wrap this in escape underscore HTML.", 'start': 12033.658, 'duration': 8.684}, {'end': 12049.405, 'text': 'OK Next I find that writing and concatenating PHP like this is super awkward.', 'start': 12042.882, 'duration': 6.523}, {'end': 12051.326, 'text': 'So what we can do instead is this.', 'start': 12049.865, 'duration': 1.461}, {'end': 12052.867, 'text': 'You can do this with me.', 'start': 12051.966, 'duration': 0.901}, {'end': 12058.753, 'text': "go ahead and completely empty out the body of this function and instead let's say OB underscore,", 'start': 12052.867, 'duration': 5.886}], 'summary': 'Using caching can mitigate the slight performance impact of running a php function in wordpress, and using escape_html function is case-dependent.', 'duration': 67.805, 'max_score': 11990.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q11990948.jpg'}], 'start': 11299.345, 'title': 'Custom and dynamic block types in wordpress', 'summary': 'Discusses creating custom block types in wordpress, highlighting the limitations of the standard save function and the need for alternative methods. it also covers the advantages of using dynamic block types in wordpress for automatic and programmatically managed content with immediate updates.', 'chapters': [{'end': 11380.603, 'start': 11299.345, 'title': 'Creating custom block types in wordpress', 'summary': 'Discusses creating custom block types in wordpress, demonstrating how to make changes to the html structure and highlighting the limitations of the standard save function, emphasizing its limitations and the need for alternative methods.', 'duration': 81.258, 'highlights': ['The official WordPress documentation considers the save function that returns just a static string of text as the default or standard way that a block type should be, which is considered borderline useless. The standard save function in WordPress is deemed as borderline useless by the official documentation, highlighting the limitations of the default approach.', 'The chapter demonstrates making changes to the HTML structure and the limitations of the standard save function, emphasizing the need for alternative methods. The chapter emphasizes the need for alternative methods in creating custom block types due to the limitations of the standard save function and demonstrates making changes to the HTML structure.']}, {'end': 12085.517, 'start': 11381.163, 'title': 'Creating dynamic block types in wordpress', 'summary': 'Covers the drawbacks of using deprecated properties, the limitations of manually updating thousands of posts, and the advantages of using dynamic block types in wordpress, which allows for automatic and programmatically managed content with immediate updates.', 'duration': 704.354, 'highlights': ["Dynamic block types allow for immediate updates to content without manual intervention, even when used in thousands of posts. The dynamic block type in WordPress allows for truly powerful and flexible block types where, even if you've used them in 10,000 posts, you're still free to change them and they will all be updated immediately.", 'Drawbacks of using deprecated properties and manually updating thousands of posts in WordPress. Manually re-saving or re-updating thousands of posts in the editor due to changes made using deprecated properties poses limitations in managing content programmatically in WordPress.', 'Advantages of using dynamic block types in WordPress for automatic and programmatically managed content. The preferred way of creating block types, known as a dynamic block, shifts the responsibility from JavaScript to PHP, allowing for automatic and programmatically managed content with immediate updates.']}], 'duration': 786.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q11299345.jpg', 'highlights': ['The preferred way of creating block types, known as a dynamic block, shifts the responsibility from JavaScript to PHP, allowing for automatic and programmatically managed content with immediate updates.', "The dynamic block type in WordPress allows for truly powerful and flexible block types where, even if you've used them in 10,000 posts, you're still free to change them and they will all be updated immediately.", 'The chapter emphasizes the need for alternative methods in creating custom block types due to the limitations of the standard save function and demonstrates making changes to the HTML structure.', 'Manually re-saving or re-updating thousands of posts in the editor due to changes made using deprecated properties poses limitations in managing content programmatically in WordPress.', 'The standard save function in WordPress is deemed as borderline useless by the official documentation, highlighting the limitations of the default approach.']}, {'end': 13473.485, 'segs': [{'end': 12539.788, 'src': 'embed', 'start': 12514.174, 'weight': 2, 'content': [{'end': 12519.417, 'text': "But essentially we're just going to take the finished product for the custom post type version.", 'start': 12514.174, 'duration': 5.243}, {'end': 12525.38, 'text': 'and activate it, and inspect it and analyze it, and even look at the database structure,', 'start': 12520.097, 'duration': 5.283}, {'end': 12531.203, 'text': 'so we can really start to get a feel for the strengths and weaknesses of custom post types,', 'start': 12525.38, 'duration': 5.823}, {'end': 12539.788, 'text': 'because ultimately we want to be able to make smart decisions of whether a specific plug in should use custom post types or a custom database table.', 'start': 12531.203, 'duration': 8.585}], 'summary': 'Analyzing custom post type strengths and weaknesses to make smart decisions for plugin implementation.', 'duration': 25.614, 'max_score': 12514.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q12514174.jpg'}, {'end': 13066.978, 'src': 'embed', 'start': 13042.264, 'weight': 3, 'content': [{'end': 13048.727, 'text': 'but each little piece of data is its own entry, its own record or row in the database,', 'start': 13042.264, 'duration': 6.463}, {'end': 13053.13, 'text': 'and there are both pros and cons to this approach or to this database design.', 'start': 13048.727, 'duration': 4.403}, {'end': 13056.272, 'text': "So the big advantage is that it's super flexible.", 'start': 13053.59, 'duration': 2.682}, {'end': 13063.376, 'text': 'This is what allows WordPress to store just about any type or shape of data we can think of,', 'start': 13056.712, 'duration': 6.664}, {'end': 13066.978, 'text': 'while still using that rather limited post table structure.', 'start': 13063.376, 'duration': 3.602}], 'summary': 'Wordpress database design offers flexibility, storing various data in a limited post table structure.', 'duration': 24.714, 'max_score': 13042.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q13042264.jpg'}, {'end': 13147.152, 'src': 'embed', 'start': 13092.125, 'weight': 0, 'content': [{'end': 13095.346, 'text': 'Right So based on a value from a piece of metadata.', 'start': 13092.125, 'duration': 3.221}, {'end': 13099.467, 'text': "So let's start with query number one, just this base query.", 'start': 13096.326, 'duration': 3.141}, {'end': 13104.121, 'text': "Right We're saying to WordPress just give me the first 100 pet posts.", 'start': 13100.04, 'duration': 4.081}, {'end': 13112.122, 'text': 'So this type of query will always be relatively fast even if we have a lot and a lot of pet posts.', 'start': 13104.781, 'duration': 7.341}, {'end': 13120.404, 'text': 'This is because all WordPress has to do is look in its post database table and if you scroll over to the right,', 'start': 13112.702, 'duration': 7.702}, {'end': 13123.884, 'text': 'it just looks for any post whose post type is set to pet.', 'start': 13120.404, 'duration': 3.48}, {'end': 13126.445, 'text': 'Now once it finds one of those pet items.', 'start': 13124.304, 'duration': 2.141}, {'end': 13129.866, 'text': "Well it's going to know its post I.D.", 'start': 13127.225, 'duration': 2.641}, {'end': 13137.069, 'text': 'and then it just needs to look in the post meta table for any entries where the post I.D.', 'start': 13130.406, 'duration': 6.663}, {'end': 13139.009, 'text': 'column has a matching post I.D.', 'start': 13137.129, 'duration': 1.88}, {'end': 13147.152, 'text': 'value. So WordPress can even index this column for this table and that way, even if this meta table becomes very large,', 'start': 13139.029, 'duration': 8.123}], 'summary': 'Wordpress can efficiently retrieve first 100 pet posts using post and post meta tables.', 'duration': 55.027, 'max_score': 13092.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q13092125.jpg'}], 'start': 12085.638, 'title': 'Wordpress database optimization', 'summary': 'Covers topics such as storing plugin data in database, comparing custom database tables vs custom post types, setting up a pet adoption system in wordpress, and discussing database structure and performance in wordpress with insights on speed and efficiency improvements, premium content availability, and nearly 10 times faster performance of custom database solution in specific search queries.', 'chapters': [{'end': 12267.155, 'start': 12085.638, 'title': 'Storing plugin data in database', 'summary': 'Discusses the transition from concatenating strings to writing html directly in php, the upcoming lessons on building real block types, including a quiz and a featured professor block, and the availability of premium content for javascript-based custom block types.', 'duration': 181.517, 'highlights': ['The transition from concatenating strings to writing HTML directly in PHP simplifies the process and makes the code more readable.', 'The upcoming lessons on building real block types, including a quiz and a featured professor block, present practical applications of the concepts discussed.', 'The availability of premium content for JavaScript-based custom block types is mentioned, providing additional learning opportunities for interested viewers.']}, {'end': 12554.517, 'start': 12267.755, 'title': 'Custom database tables vs custom post types', 'summary': 'Compares the speed and efficiency of handling data using custom database tables and custom post types in wordpress, demonstrating a nearly 10 times faster performance of the custom database solution in specific search queries.', 'duration': 286.762, 'highlights': ['The custom database solution was nearly 10 times faster than the WordPress way of handling data in specific search queries. In specific search queries for pets where the species is cat and favorite color is green, the custom database solution took just barely over a tenth of a second, while the WordPress way took one point two seconds, demonstrating a nearly 10 times faster performance.', "Understanding the strengths and weaknesses of storing data in posts is crucial for making informed decisions on whether to use custom post types or a custom database table. It's crucial to understand the strengths and weaknesses of storing data in posts to make informed decisions on whether to use custom post types or a custom database table, as there is no one-size-fits-all correct answer and it depends on the shape and quantity of expected data.", 'Goal to code the custom database table solution together and analyze the strengths and weaknesses of custom post types. The goal for this chapter is to code the custom database table solution together, but before that, the lesson focuses on understanding the strengths and weaknesses of storing data in posts through analyzing the finished product for the custom post type version.']}, {'end': 12907.981, 'start': 12555.017, 'title': 'Wordpress pet adoption setup', 'summary': 'Details the process of setting up a pet adoption custom post type in wordpress, including moving files, activating plugins, creating pages, populating the pet collection with data, and optimizing the number of pet posts, with a demonstration of querying and its impact on performance.', 'duration': 352.964, 'highlights': ['The process of setting up a pet adoption custom post type in WordPress The chapter details the step-by-step process of setting up a pet adoption custom post type in WordPress, including moving files, activating plugins, and creating pages.', 'Populating the pet collection with data It explains the process of populating the pet collection with data by manipulating the code to generate a specific number of pet posts.', 'Impact of querying on performance The chapter demonstrates the impact of querying on performance, highlighting that as more pet posts are added, the querying process becomes dramatically slower.']}, {'end': 13473.485, 'start': 12908.542, 'title': 'Database structure and performance in wordpress', 'summary': 'Discusses the structure and performance of the wordpress database. it explores the inefficiencies of the post meta table design, the advantages and disadvantages of custom database tables, and the criteria for using custom database tables over wordpress post system.', 'duration': 564.943, 'highlights': ['The inefficiency of post meta table design WordPress post meta table design is inefficient for storing additional data, resulting in slow queries when searching based on custom metadata and a large number of posts.', 'Advantages and disadvantages of custom database tables Custom database tables provide faster performance and simplified data retrieval, but users forfeit various built-in features and must handle all functionalities manually.', 'Criteria for using custom database tables Using custom database tables is recommended when querying based on custom metadata and expecting a large number of posts, while understanding the trade-offs in development time and feature management.']}], 'duration': 1387.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hbJiwm5YL5Q/pics/hbJiwm5YL5Q12085638.jpg', 'highlights': ['Nearly 10 times faster performance of custom database solution in specific search queries', 'Understanding strengths and weaknesses of storing data in posts is crucial for informed decisions', 'Setting up a pet adoption custom post type in WordPress', 'Inefficiency of post meta table design for storing additional data']}], 'highlights': ['A premium course of 10+ hours is mentioned, focusing on plugin development with custom Gutenberg block types, creating custom database tables, and a discounted coupon for the full course.', 'The chapter emphasizes the infinite possibilities of extending or customizing WordPress using plugins, highlighting that every single option, parameter, action, filter, or setting can be manipulated using plugins.', 'The chapter covers the process of registering settings and fields in WordPress, including creating a new action, registering settings and fields, and tying HTML to the registered settings, with about five options to be registered and tied to HTML fields.', 'The process of adding subsequent fields and settings is simplified by duplicating lines of code for the first field, making minimal changes, and organizing the code for better understanding.', 'The chapter demonstrates the process of setting fallback values in WordPress through a complex line of code.', "The chapter emphasizes the best practice of specifying plugin dependencies in WordPress by ensuring the WP element is loaded before the plugin's file.", 'The chapter introduces the concept of using JSX for creating complex HTML interfaces in JavaScript, highlighting its benefits and the need for installation of development workflow tools.', "The chapter emphasizes the importance of creating the 'languages' folder in the plugin directory.", 'The chapter emphasizes the need for alternative methods in creating custom block types due to the limitations of the standard save function and demonstrates making changes to the HTML structure.', 'Nearly 10 times faster performance of custom database solution in specific search queries']}