Coywolf Starter Theme for WordPress
Download Coywolf’s barebones WordPress theme that is mobile-first, uses no JavaScript, and is incredibly fast.
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.
- Key features of the Starter Theme
- Excluded features of the Starter Theme
- Theme details and customizations
- Publishing tips
- Recommended plugins
- Download the Coywolf Starter Theme
Key features of the Starter Theme
The theme includes everything important to me, and nothing else.
- Barebones: The theme is meant to be a starting point. It’s meant to be hacked on and customized.
- Minimalist and responsive: The layout for the main content is single-column, and it adapts the style and navigation based on the device’s screen size. There are no sidebars or additional columns because they visually disrupt a visitor’s ability to focus and consume content.
- No JavaScript: The theme doesn’t use any JavaScript. Even the mobile navigation is free of JavaScript, and is able to appear and disappear using only CSS.
- Incredibly fast: It uses the same techniques outlined in the WordPress Speed and Performance Guide. If you also use WP Engine, WP Rocket, and Cloudflare, it will be insanely fast.
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).
- No Theme Customization API integration: Most style changes require direct editing of the theme pages.
- Common page templates missing: archives.php, author.php, and sidebar.php are not included because they’re not used on Coywolf. I’ve deemed those page templates unnecessary for the site to function, but they can be manually added to the theme at any time.
- No comments: Comments are commented out because I hate comments. Specifically, I don’t have the time or interest to deal with spammers and trolls. Until a service like Perspective can be integrated and work well, I recommend not including comments. However, if you still want comments, you can uncomment it on the single.php page template.
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.
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. Make sure you optimize the image for speed.
Navigation menus
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.
Repeat the process for the Footer menu. The Footer Nav will appear on the bottom of the page.
Adding a logo
You can replace the site name (home) link with an image on the header.php template. Find the following code:
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.
Adjusting the logo and main menu sizes
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:
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:
nav.top .logonav.top ulnav.top li
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.
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.
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:
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.
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:
Change link colors
The following CSS assigns the link colors for the content that nested within the article, section, and footer elements.
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.
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.
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:
- Fine-grained Title and Meta Description control
- Auto-insertion of Open Graph and Twitter Card metadata
- Manages redirects (requires Premium version)
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.
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
- Ver 1.0.2 – April 18, 2021: Added FLoC blocking to functions.php
- Ver 1.0.1 – December 30, 2020: Fixed issue with CSS that disabled the mobile navigation.
Jon is the founder of Coywolf and the EIC and the primary author reporting for Coywolf News. He is an industry veteran with over 25 years of digital marketing and internet technologies experience. Follow @henshaw