Here’s the coding checkpoint for the first third of the book (refer to sections 1-4), presented as a set of requests from a client:
- Please set me up a WordPress site that runs on a child theme of the Twenty Nineteen theme, so that I can update Twenty Nineteen while keeping changes to Twenty Nineteen.
- In the child theme stylesheet, please set the default color of the body element to red with the following CSS: body { color: red; } and check the front end to verify that child theme CSS changes work. Then change the rule to body { color: #262626; } to put body copy in a slightly lighter dark gray than the Twenty Nineteen default.
- I want the page background, only on Pages, to be a light gray, #f0f0f0. You’ll need to add a class (something like “page-main”) to the <main> tag inside the page.php template file, but do it by overriding page.php in the child theme so we don’t lose changes when I update Twenty Nineteen. Then take the class name you’ve added to the <main> tag, and add into style.css the following CSS code: .[the name of the class you’ve chosen] { background: #f0f0f0; } Verify that the background shows up on single Pages, and that it doesn’t affect other types of content, such as single Posts.
- I want to make sure my site’s running JavaScript properly. In the child theme’s functions.php, please enqueue a JavaScript file (call the filename whatever you want, and register it in a /js/ folder inside your child theme). You can paste the following JavaScript code into the enqueued file: console.log( “I’m here” ); This extremely simple JS will add the text “I’m here” to the Console section of your browser inspector.
- Also in functions.php, please register an image size using the following code: add_image_size( ‘large_square’, 1000, 1000, true ); Upload a large image to the site (more than 1000px wide and tall), and verify that you have access to a large_square version of it that is cropped to exactly 1000px by 1000px.
- Lastly, please add a filter onto the_content that returns the content plus the text “<p>Thanks for reading!</p>” Verify that the filter is working on all posts and pages.
Have fun! Let me know if you have any questions about what’s being asked for any piece of this, or about how to properly implement it.