Coywolf Starter Theme for WordPress

Download Coywolf’s barebones WordPress theme that is mobile-first, uses no JavaScript, and is incredibly fast.

Jon Henshaw | @henshaw | | Webmaster

Coywolf Starter Theme

I get a surprising amount of requests from people wanting a copy of Coywolf’s WordPress theme. That’s because the recommendations I made in the WordPress Speed and Performance Guide were also made to Coywolf’s theme. Since the theme was never meant to be shared – it has hard-coded HTML, PHP functions, and styles specific to Coywolf – I’ve never made it available to anyone.

I decided it was finally time to create a starter theme. The first thing I did was remove all Coywolf-specific code. I then consolidated and optimized the CSS, HTML, PHP functions, and pages. I also wrote comments throughout the code to explain what certain styles and functions do. The result is the Coywolf Starter Theme for WordPress.

  1. Key features of the Starter Theme
  2. Excluded features of the Starter Theme
  3. Theme details and customizations
    1. Fallback images
    2. Navigation Menus
    3. Adding a logo
      1. Adjusting the logo and main menu sizes
    4. Changing thumbnail sizes
    5. Changing colors
      1. Change the top nav colors
      2. Change the intro colors
      3. Change link colors
    6. Adding category descriptions
  4. Publishing tips
    1. Always add an excerpt
  5. Recommended plugins
    1. Yoast SEO
    2. WP Rocket
  6. Download the Coywolf Starter Theme

Key features of the Starter Theme

The theme includes everything important to me, and nothing else.

Excluded features of the Starter Theme

The theme isn’t designed to be full-featured, and it doesn’t support endless customizations and diverse layouts. It’s designed with a single-column mobile-first UX, and to have a simple information architecture (IA).

Theme details and customizations

As I stated earlier, the theme is meant to be hacked on. There are a couple of changes that are required and several changes that are optional but recommended.

Fallback image

The first thing you should do is change the fallback image. The fallback image is used when a Post or Page doesn’t have a featured image. It appears as a thumbnail image on the homepage and category pages.

Fallback Image
Replace the placeholder fallback image with your own fallback image

The image should be 1200×630 px, the size typically used for Open Graph images. The file name needs to be fallback-image.png and it should replace the placeholder image that’s currently in the /images folder.

There are two dynamic navigation menus, Main and Footer. In the WordPress Admin, navigate to Appearance > Menus. Create a new menu and name it Main. After you save the menu, click on Main Nav, and then save the menu again. Add the pages, posts, and custom links you want to appear in the top navigation and then save the menu.

Create Menu

Repeat the process for the Footer menu. The Footer Nav will appear on the bottom of the page.

You can replace the site name (home) link with an image on the header.php template. Find the following code:

<div class="logo"><a href="/"><?php bloginfo('name'); ?></a></div>

Replace <?php bloginfo('name'); ?> with an image. If you name the image file logo.png and you save it in the /images folder of the theme, the following replacement code will display the image and use the site name for the alt text.

<img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>">

When you add the image, you will need to specify its height by adding the following class and element in the app.css.php file. This needs to be done for both mobile and desktop screens:

nav.top .logo img { height:2rem; }

It’s likely that you will also need to adjust the padding and line-height for one or more of the following classes and elements for mobile and desktop:

Changing thumbnail sizes

The thumbnail sizes are set in the functions.php file. You change the sizes that are used by modifying the dimensions. The first number is the width, and the second number is the height.

set_post_thumbnail_size( 150, 79, true );
add_image_size( 'single-post-thumbnail', 1200, 630 );

Keep in mind that if you change the size, you may need to adjust other layout elements in the app.css.php file.

Changing colors

The text and background colors are initially set for mobile screens and are inherited for desktop screens. That means you only need to change them for mobile screens and your set.

Change the top nav colors

The following CSS control the color for the top nav.

/* Colors */
nav.top, nav.top ul { background:#0E52AE; }
nav.top, nav.top a, .intro, nav.top a:link, nav.top a:visited, nav.top a:hover { color:#fff; }
nav.top .select { background:#fff; }

If you want to assign different colors for different classes and pseudo elements (e.g. :hover), you can separate it and assign it a different color. For example:

nav.top, nav.top a, .intro, nav.top a:link, nav.top a:visited { color:#fff; }
nav.top a:hover { color:#eee; }

Change the intro colors

The intro block appears on the homepage and category pages. You can change the color with the following classes and elements.

.intro { background:#eee; }
.intro h1, .intro p { color:#000; }

If you want to assign different colors for different classes and elements (e.g. p), you can separate it and assign it a different color. For example:

.intro { background:#eee; }
.intro h1 { color:#000; }
.intro p { color:#333; }

Change link colors

The following CSS assigns the link colors for the content that nested within the article, section, and footer elements.

article a, section a, footer a { color:#0E52AE;text-decoration:none;border-bottom:1px solid #ccc; }
article a:hover, section a:hover { border-bottom:1px solid #999; }

Adding category descriptions

The category pages support displaying category descriptions. To add a description, navigate to Posts > Categories. Edit an existing category, enter a Description, and then click on Update. The description will now appear on its corresponding category page.

Category Description

Publishing tips

There are a couple of things to keep in mind when publishing Posts. Including an excerpt is required, and it’s recommended that you only associate one category per post.

Always add an excerpt

The theme uses the excerpt for the Meta Description on Posts and Pages. It also uses it for the dek on Posts, which appears underneath the title. If you don’t include an excerpt, the theme will auto-insert text from the main content and truncate with an ellipsis.

Dek Example

Recommended plugins

I use as few plugins as possible to help maintain a fast and secure site. The two essential plugins I use and recommend are Yoast SEO and WP Rocket.

Yoast SEO

The features of Yoast I like the best are:

Yoast also inserts Schema.org structured data. However, I prefer to add my structured data because it doesn’t support everything I want to add. If you’re like me and don’t want to include Yoast’s structured data, you can exclude in the functions.php file by uncommenting the following code.

function remove_yoast_json($data){
  $data = array();
  return $data;
}
add_filter('wpseo_json_ld_output', 'remove_yoast_json', 10, 1);

WP Rocket

WP Rocket is the best caching and performance plugin I’ve ever used with WordPress. You can use the same settings I use on my sites by downloading and importing my WP Rocket configuration file.

Download the Coywolf Starter Theme

Download Starter Theme (Zip file)

Changelog

Related Articles