HW: Customizing WordPress due Tue 28 Mar 10:30

\begin{purpose}
You will continue customizing a WordPress site using a child th...
...will learn
how to add elements to the {\tt <head>} of the theme.
\end{purpose}

Instructions

NOTE: This homework is a continuation of the in-lab assignment. Continue working on the child theme you created for the blog site:
  1. It is common to want to provide custom fonts for a page. There are only a handful of built-in fonts that work across various browsers and operating systems, so if you want to make use of a specialized font you need to tell the browser where to find it. Google has provided a wide variety of fonts for this purpose. Visit https://fonts.google.com/ and select one or two fonts you would like to see on your blog site. NOTE: As with the in-lab assignment you will probably have success just following the instructions below. If at some point you get stuck you might visit https://wpsites.net/wordpress-tips/free-google-web-fonts-for-wordpress/ to see if their instructions will clear up your issue.

  2. Once the fonts are selected you can view the HTML code needed to indentify the font. Paste that code into a text editor for future usage.

  3. To get the fonts you want to use loaded on all the pages in your site you'll need to add this code to the bottom of your functions.php file in the child theme:
    add_action( 'wp_enqueue_scripts', 'wpsites_google_fonts' );
    function wpsites_google_fonts() {
    	wp_enqueue_style( 'gfonts', '//fonts.googleapis.com/css?family=NameOfGoogleFont1|NameOfGoogleFont2|NameOfGoogleFont3', array(), CHILD_THEME_VERSION );
    }
    
    NOTE: The Google font names can be taken from the code you pasted earlier. If you are loading multiple fonts you can separate the font names with the pipe symbol (shift-backslash). The child theme version is the version number of your child theme. In your styles.css document you probably put that at 1.0.0.

  4. To actually use the fonts you will add rules to the child theme's style.css file. Write rules so that the new font(s) are in use on the site.

  5. Once your site is working create a single text document using a text editor like you used when writing your CSS code. At the top of the document paste in the URL of your modified blog site. After that, paste in the contents of style.css, functions.php. Save the document and attach it to the Canvas assignment prior to the due date.

Quick Links