Skip to content
Branch: master
Commits on Nov 14, 2015
Commits on Nov 12, 2015
  1. Escape the permalink URL.

    wpscholar committed Nov 12, 2015
    Again, escaping is important.  Context is important when escaping.  You should always match the context in which you are outputting data to the appropriate escaping function. Since we are outputting to an HTML attribute, many people will make the mistake of using the `esc_attr()` WordPress function.  However, since we are outputting a URL, we would use `esc_url()` instead.  The `esc_url()` function is more strict than `esc_attr()`, which is why we should use it instead.
    Again, if we were able to use the `the_permalink()` function, then WordPress would be handling escaping for us.  Since we are using a lower level function not intended for output, we need to do the escaping ourselves.
  2. Escape the title.

    wpscholar committed Nov 12, 2015
    Escaping, as opposed to blindly outputting data, means that we clean up the output to ensure any invalid output is stripped out.  In this case, we have a page title which could potentially contain HTML.  Since an extra closing tag, or a malicious snippet, could really mess things up, we run our title through the `esc_html()` function to make sure all we display is text.
    If we were able to use the `the_title()` function, WordPress would be handling escaping for us.  However, since we are using a function not intended for output, we need to do the escaping ourselves.
  3. After running a custom WP_Query loop on the page, you will need to re…

    wpscholar committed Nov 12, 2015
    …set the post data with `wp_reset_postdata()`.
  4. Replace the content with the output of our custom query.

    wpscholar committed Nov 12, 2015
    We are just showing the titles of the items found in a list format.  Note that we are using `get_the_title()` instead of `the_title()` because it allows you to pass in a post object or ID.  Same goes for using `get_the_permalink()` as opposed to `the_permalink()`.
  5. Setup a custom query for the content we want to show in our sitemap.

    wpscholar committed Nov 12, 2015
    Note: The `nopaging` parameter isn't really something you'd want to use if you have a lot of posts, as it can present performance problems.
  6. Replace the call to `get_template_part()` with the contents of the ca…

    wpscholar committed Nov 12, 2015
    …lled template (i.e. content-page.php).
  7. Delete the loop. WAT?!!?!

    wpscholar committed Nov 12, 2015
    Yep. On singular pages, posts and custom post types you can just call `the_post()`.  No need for a loop if there is only one!
  8. Copy over the contents of the page.php template from our parent theme…

    wpscholar committed Nov 12, 2015
    … so we don't have to start completely from scratch.
  9. Created a custom page template.

    wpscholar committed Nov 12, 2015
    As long as you have a file with a 'Template Name' defined in the comment at the top of a file, this file can be used as a page template.  Just go into any page edit or creation screen in the WordPress admin and look for the 'Template' dropdown in the 'Page Attributes' metabox.  Select your new template from the dropdown and save the page.  This template will now be used when that page is loaded on the front-end.
    Note that if you visit the page currently, it gives you a white screen.  This is because this template has absolutely nothing in it.  A page template gives you a completely blank slate.
  10. Updated content.php file to display the excerpt instead of the conten…

    wpscholar committed Nov 12, 2015
    …t when on an archive page and our 'show_excerpts_in_archives' theme mod is set to true.
    Note that we check for both `is_archive()` and `is_home()` because `is_home()` checks for the blog, which is technically an archive page.  If you really want to get pedantic, we could have also created a separate setting for toggling the excerpts on and off on just the blog page.
    Now, go view the blog or any archive page in the theme customizer and toggle our new setting on and off to watch the magic happen!
  11. Copy the content.php template file from the parent theme in preparati…

    wpscholar committed Nov 12, 2015
    …on for customizations.
  12. Adding our own section and setting to the theme customizer.

    wpscholar committed Nov 12, 2015
    We are using the `customize_register` action hook, which gives us a variable named `$wp_customize` that is an instance of the WP_Customize_Manager class.  We call the `add_section()` method to add our custom section.  We call the `add_setting()` method to add our custom setting.  The ID you assign the setting will be the same string you use with `get_theme_mod()` to fetch the setting's value.  Finally, we call the `add_control()` method which allows us to define what type of field (or more advanced control) will be used to control our setting.  Note that when adding a control, you must define the 'section' and 'settings' parameters using the IDs of your section and setting respectively.
    Now, visit the theme customizer in the WordPress admin and check out your new setting!
  13. Our widget area doesn't look all that great by default, so we are add…

    wpscholar committed Nov 12, 2015
    …ing a few styles to bring things into alignment with the way the primary sidebar looks. We are also adding some space and a border to separate our widget area from the menu we created earlier. Remember, if there are no widgets in our sidebar, it won't show up at all. For this reason, we don't want to style our menu with a top border, because that would look strange if the sidebar isn't there.
  14. Display our custom sidebar in the footer. We are using the `get_sideb…

    wpscholar committed Nov 12, 2015
    …ar()` function in our footer.php file to call in our custom sidebar template. By passing the name 'footer' to the `get_sidebar()` function, it will look for a template file called `sidebar-footer.php`. If it finds this template, it will load it.
    In our footer sidebar template file, we are using `is_active_sidebar()` to check if our custom sidebar / widget area contains any widgets.  If it does, then we output a wrapper div around the widgets that get output by calling the `dynamic_sidebar()` function.
  15. Register a custom sidebar. We are using the 'widgets_init' action hoo…

    wpscholar committed Nov 12, 2015
    …k to register our callback function. Our callback function calls `register_sidebar()`, which can take a number of arguments in the form of an array. We set the 'id' so we will have an internal handle by which we can refer to this particular sidebar. The name and description are pretty self-explanatory and are shown to users in the admin area. The 'before_widget' and 'after_widget' allow us to customize the markup in which our widgets are wrapped. By default, WordPress will wrap widgets in an LI element. I've updated the code so our widgets are wrapped in aside elements in the same way other widgets in TwentyFifteen are wrapped.
    Now, be sure to go and see the new sidebar you added in the WordPress admin on the 'Widgets' page.  While you are at it, drag a couple of widgets into it.
  16. Style our new footer menu: Remove the bullets and extra margins. Disp…

    wpscholar committed Nov 12, 2015
    …lay menu items inline.
  17. Replace the contents of the normal TwentyFifteen footer with our cust…

    wpscholar committed Nov 12, 2015
    …om nav menu.
    We are using the `wp_nav_menu()` function with a few different arguments.  First, we are setting the 'theme_location' to 'footer_menu', in order to load the menu we registered earlier here.  Next, we are setting the 'container' to 'nav'.  This will wrap our menu in a nav element instead of a div, which is a new HTML5 element and is more semantic.  Then, we set the 'container_class' to 'footer-menu'.  We do this so we will have something we can use to target our menu for styling that can't be changed from the WordPress admin.  Finally, we set the 'depth' to 1 to ensure that our footer menu doesn't display any child menu items.
  18. Registered a custom navigation menu. We are using the `after_setup_th…

    wpscholar committed Nov 12, 2015
    …eme` action hook to setup our theme. Why are we doing setup on an action hook called 'after_setup_theme'? Because it is after WordPress has setup the theme, not us. This hook is the first action hook that WordPress makes available to themes and we want to do our setup the first chance we get.
    We are using the `register_nav_menu()` function on line 6 to, well, register our nav menu.  The first parameter is the internal name for the theme location and the second is the visible name that WordPress will use in the admin.
    If you aren't familiar with the `__()` function, it is one of the functions that WordPress uses to translate text strings.  We have to provide the text we want to translate, followed by the 'textdomain' for our theme.  You will note that the textdomain used here matches the one we set in the theme headers in the style.css file.
    Now that we've added a custom nav menu, be sure to go into the WordPress admin, create a new menu, and assign it to the 'Footer Menu' theme location.
  19. Copied the existing footer.php template file from the TwentyFifteen p…

    wpscholar committed Nov 12, 2015
    …arent theme into our child theme. WordPress will now use the footer.php file from our child theme instead of the one from the parent theme. This means we are free to edit it as we see fit and future updates to the TwentyFifteen theme won't override our customizations.
  20. You may have noticed that activating your new child theme made the fr…

    wpscholar committed Nov 12, 2015
    …ont end of the site look broken. The TwentyFifteen theme uses a WordPress function called `get_stylesheet_uri()` to fetch the stylesheet from the current theme. When you activated the child theme, it became the current theme. As a result, WordPress started loading the empty stylesheet from your child theme instead of the original stylesheet from the TwentyFifteen parent theme. At this point, we could 1) just copy the styles from the original stylesheet into ours, 2) use an @import in our stylesheet to load the parent styles or 3) use the WordPress enqueueing system to load the parent stylesheet.  Option 1 would mean that we need to do some intricate copy-pasting whenever the theme has an update, so we don't want to do that.  Option 2 requires that you set the relative path to the parent theme stylesheet URL and given that the WordPress file system could have some different configurations, I decided against counting on that living in a particular location.  So, we are going with option 3.
    We are using the `wp_enqueue_scripts` action hook (which is also meant to be used for styles as well) to add a custom callback function.  This callback function, `tfc_wp_enqueue_scripts()` is prefixed with `tfc_` which stands for 'Twenty Fifteen Child'.  Prefixing all of your functions is important to prevent function naming conflicts with WordPress core and any plugins you may be running.  A function naming conflict will cause a fatal error in PHP and prevent your site from loading.
    Our callback function makes two calls to `wp_enqueue_style()`. The code on line 6 loads the stylesheet from the parent theme. The code on line 7 loads the stylesheet from our child theme.  It is important to be aware of the meaning behind the 'stylesheet directory' as opposed to the 'template directory'.  The stylesheet directory will always be the directory of the active theme (our child theme, in this case). The template directory will always point to the directory of the current theme's parent.  If you aren't running a child theme, then the template directory will be the same as the stylesheet directory.  That said, we are overriding the 'twentyfifteen-style' handle and telling it to actually load the parent theme's stylesheet.  We are then adding a new handle for our child theme's stylesheet and loading it.
  21. A minimum viable child theme requires a style.css with special header…

    wpscholar committed Nov 12, 2015
    …s. These headers are read by WordPress and used to display information about the theme in the WordPress admin. Without these headers, WordPress won't recognize your theme.
You can’t perform that action at this time.