WordPress Theme Exercise Solution: Metonymic Type Styling

Now let’s do some styling of our content.

Enqueue the Google Font

First, let’s enqueue our site-title font: google’s smokum.

Open functions.php and duplicate the line that enqueues the main stylesheet. It should be somewhere near line 120.

wp_enqueue_style( 'metonymic-style', get_stylesheet_uri() );

Then in the duplicated line, change the “handle” (the first argument passed to the function). In order for WordPress to manage the loading of resources and their dependencies, every stylesheet or script to be loaded needs a unique handle.

The URL of the resource is the second argument passed to the function. In the original, the URL is being created dynamically with the get_template_directory function: the URL of the stylesheet depends on where the theme is installed, unlike a google font which is coming from the same (absolute) url regardless of where the theme is.

Here, then, we need to just use the URL given to us at google fonts. Make sure that you enclose it in quotation marks.

wp_enqueue_style( 'metonymic-style', get_stylesheet_uri() );
wp_enqueue_style( 'metonymic-google-font', 'https://fonts.googleapis.com/css?family=Smokum');

Basic Font Styles

I will assume here that you know how to set up SASS compilation in your project. If not, consult this page to set up a Gulp watch process. 

Open up the file _typography.scss inside the variables-site folder.

Change the value of $font__main from sans-serif to georgia, times, ‘times new roman’, serif.

Now make a new variable called $font__site-title with a value of smokum, courier, ‘courier new’, monotype.

Test your page. You should see the georgia font used everywhere. Now let’s change what font the site title actually uses.

To do that, open _headings.scss in the typography folder. Add the following:

.site-title {
	font-family: $font__site-title;
	font-weight: normal;
	font-size: 3rem;
}

Link Styling

Let’s do some basic link styling. Open variables-site/_colors.scss and change two link colors:

$color__link: #222;
$color__link-visited: #222;
$color__link-hover: hotpink;

Now open navigation/_links.scss and remove the link underlining by adding text-decoration:none to the anchor style.

a {
	text-decoration: none;
	color: $color__link;

	&:visited {
		color: $color__link-visited;
	}
	&:hover,
	&:focus,
	&:active {
		color: $color__link-hover;
	}
	&:focus {
		outline: thin dotted;
	}
	&:hover,
	&:active {
		outline: 0;
	}
}

Also from the NAVIGATION folder, open the _menus.scss file.

The css you see here is quite complex, as the underscores theme writers have to support site owners using nested menus, etc. However, the screenshots show that our needs are much simpler, so delete all the code in there.

Now make a simple flex-based centered menu:

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;

	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

nav li {
padding: 1rem .5rem;
}

Header & Footer Text Styling

Inside the SITE folder, make a new partial called _header-footer.scss and import it into the _site-scss partial.

Inside that new partial, center the text in the header and footer:

.site-header,
.site-footer {
  text-align: center;
}

Article Text Styling

Open _posts-and-pages.scss from the site/primary folder. Delete the CSS that’s in there now: it adds spacing to various elements, but we’ll want to control that our own way:

.home article {
	text-align: center;

	p {
			margin-top: 0;
			margin-left: 1.5%;
			margin-right: 1.5%;
	}

	border-bottom: #eef 3px solid;
}

Open the file _headings.scss from the TYPOGRAPHY folder. Add the following:

.home {

	.section-title {
		font-size: 1.15rem;
		text-transform: uppercase;
		letter-spacing: .25rem;
		text-align: center;
	}

	.entry-title {
		font-size: 1rem;
		margin-bottom: .25rem;
	}

}

Test your page. The phone-size layout of the articles on the home page should now look reasonably close to the screen shots.

Meta Area Styling

One area, though that doesn’t match is the meta content in the OPINIONS section.

We’ve added the image of the author and the link to the author archive, but they’re just sitting side by side, since links and images are both inline elements.

Let’s fix that. We’ll do this in _posts-and-pages.scss, but it could go elsewhere.

.entry-meta {

	a, img {
		display: block;
		margin: auto;
	}

	img {
		border-radius: 50%;
		margin: .5rem auto;
	}

}

If we test the page, things should look good now. But if we mouse over the image of the author, we see that only the name text is a link. Ideally, the image would be too.

We will fix that in content.php inside template-parts folder. Here’s the area we need to modify:

<?php
if ( in_category( 'opinions') && ( is_front_page() ) ):
	?>
	<div class="entry-meta">
		<?php
		the_author_posts_link();
		echo get_avatar( sanitize_email(get_the_author_meta('email')), '128');
		?>
	<!-- .entry-meta -->
<?php endif; ?>

This might take a bit of research.

Earlier in this exercise, we used the_author_posts_link() to output the name of the author wrapped in an anchor tag with an HREF value of the author’s post archive.

If we look that up on the WordPress codex (google codex the_author_posts_link), we learn that this function takes no parameters, so there’s not an easy way to modify its default output.

However, at the bottom of the same page, we’ll see links to discussions of other related functions:

Click the link for get_author_posts_url(). The page that loads states that this function gets the URL of the author page for the author with a given ID.

This looks promising. I would build this in two steps.

First, duplicate the working code block (the if in_category block).

Then modify it so that the code outputs a simple testing link around both the text and around the author image.

<?php
  if ( in_category( 'opinions') && ( is_front_page() ) ): ?>
  <div class="entry-meta">

    <a href="#">

      <?php 
        the_author();
        echo get_avatar( sanitize_email(get_the_author_meta('email')), '128');
      ?>
      
    </a>
  <!-- .entry-meta -->
  
<?php endif; ?>

Test the page: both the author name and the author image should be links (even if they go nowhere).

Now all we need to do is replace the # href value with the actual dynamically-generated link to the author page. Shown below is how we can do that.

    <a href="<?php echo get_author_posts_url( get_the_author_meta('ID') ); ?>">

In other words, we have replaced # with

< ?php echo get_author_posts_url( get_the_author_meta('ID') ); ?>

Next, let’s take care of additional header and footer elements.