My old WordPress theme (a heavily modified SunsetIdea theme) was static, not responsive. It took up the same space whether you were viewing it on a desktop monitor, tablet, or smartphone. On a tiny phone screen, you would need to zoom and scroll around the page to read.
Given the prevalence of people using smartphones as their main computing device, I decided to upgrade to a modern WordPress theme that had responsive HTML/CSS functionality. Such a modern, responsive theme would fluidly adjust its page size and text word-wrapping to support large to small screens.
I restricted my search to free, responsive, and minimalist WordPress themes that would maximize readability. A minimalist theme would also allow for easy customizations (hacks to the HTML and CSS) in the future.
I decided to use the Chosen theme for all the reasons above. The free version of this theme provided enough features and customizations for my current needs.
Categories Widget to Menu DropDown
The old theme used WordPress’ default Categories Widget to display the categories. I did not want to use widgets in the new Chosen theme because it would take up additional screen real estate. Widgets do not fit the minimalist design philosophy.
The widget-less workaround is to create a dropdown menu item with subitems for each category. Unfortunately, unlike the Categories Widget, this menu cannot be generated automatically. You will need to manually update the menu if you add, rename, or delete categories.
I followed the instructions at How To Create A Dropdown Menu Of WordPress Categories Without Using Code to create the Categories dropdown menu. Below are the steps I took:
- In the WordPress administration page, browse to Appearance, then Menus.
- Under the left “Add menu items” panel, select “Custom Links”. Input “#” into the URL field (the “#” is a temporary placeholder) and “Categories” into the “Link Text” field. Click the “Add to Menu” button.
- Under the right “Menu structure” panel, click the down arrow head for Categories to open up its properties. Delete the “#” character, leaving the URL field blank. (If you don’t do this, the Categories menu item itself will be a clickable link. With a blank URL, the Categories menu will not be clickable and will show the dropdown list instead.)
- Under the left “Add menu items” panel, select “Categories” and click on the “View All” tab. Select all the categories and click the “Add to Menu” button.
- Under the right “Menu structure” panel, drag and drop each category under the Categories link (as indented subitems). I recommend keeping the alphabetical ordering of the categories.
- Click the top-right “Save Menu” button to commit the change. On your main blog page, you will now see a “Categories” menu dropdown containing the categories.
Note: When editing the menu structure, you can make subcategories by indenting a category menu item under a parent category menu item.
Archives Page Template
My old theme also used a Collapsing Archives Widget. The widget displayed all my posts sorted into collapsable years and months. Once I had more than 50 posts, the widget started getting unwieldy. So it is a good thing I’m getting rid of the Collapsing Archives widget. (This widget was so old that I had to hack its settings string in the database to get it to work with the latest WordPress versions.)
Instead of a widget, I will use an Archives page to list all the posts, sorted by the category and posting date. Thankfully, WordPress supports custom page templates to allow for this behavior. Basically, instead of creating a page and inputting static text into the body, you can configure the page to execute a template file (aka PHP file) to generate the body content.
Using the example from List WordPress Posts by Category, I created the following “archives-template.php” file:
/*
** Template Name: Archives
*/
?>
<?php get_header(); ?>
<div id="loop-container" class="loop-container">
<div <?php post_class(); ?>>
<?php do_action('page_before'); ?>
<article>
<?php ct_chosen_featured_image(); ?>
<div class='post-header'>
<h1 class='post-title'><?php the_title(); ?></h1>
<?php get_template_part('content/post-byline'); ?>
</div>
<div class="post-content">
<?php
// Get list of categories, sorted by name
$categories = get_categories( array('orderby' => 'name') );
// Loop through each category
foreach ($categories as $category) {
$category_id = $category->term_id;
// Get all posts belonging to a category, sorted by date
$posts = get_posts( array('category' => $category_id,
'orderby' => 'date',
'numberposts' => -1) );
if (count($posts)) {
?>
<h2><?= $category->name ?></h2>
<ul>
<?php foreach ($posts as $post) { ?>
<li><a href="<?= get_permalink($post->ID); ?>"><?= $post->post_title ?></a>
<?php } ?>
</ul>
<?php
}
}
?>
<?php do_action( 'page_after' ); ?>
</div>
</article>
</div>
</div>
<?php get_footer(); ?>
Note: I used the “get_posts” API instead of the “query_posts” API from the example because I wanted to sort the posts by date (‘orderby’ => ‘data’) and retrieve all posts (‘numberposts’ => -1).
The hardest step is to identify the correct division (“<div>”) hierarchy and class names to use so that the page will match the theme (the correct CSS style attributes are applied). I found an existing “full-width.php” file under the Chosen theme’s “templates” subdirectory and copied the top level division tags from it. If you are not using the Chosen theme, you will need to adjust the division tags in the “archives-template.php” file to match your specific theme.
To use the Archives page template, do the following:
- Copy the “archives-template.php” file to your server’s WordPress themes directory. For the Chosen theme, the relative path is “/wp-content/themes/chosen/templates”.
- In the WordPress adminstration, add a new page, input “Archives” as the title, and leave the body blank. In the bottom-right “Page Attributes” panel, under “Template”, select “Archives” (which should match the “Template Name” comment at the top of the “archives-template.php” file).
- Click on the Publish button to save the page.
When you view the page, it should execute the PHP script (“archives-template.php”) to automatically list all the posts by category and date.
To double-check that the division tags were correct, I used the Chrome browser’s DOM elements viewer (under “Developer tools”) to view both the Archives template page and a normal, non-templated page (like the static About page I had created previously). I compared the two pages and adjusted the division hierarchy and elements in the Archives template page to match exactly.
Note: Earlier, for the Categories menu dropdown, I recommended keeping the categories sorted alphabetically. To match, the Archives template page will list the categories alphabetically also. The “get_categories” API returns the categories sorted alphabetically (‘orderby’ => ‘name’). If you wish to use your own ordering of categories, you can add PHP code to the “archives-template.php” file to sort the categories after retrieving them.
Please keep a backup of the “archives-template.php” file because when you update the theme, WordPress will delete any custom files. So after a theme version upgrade, make sure to copy the “archives-template.php” file back; otherwise, the Archives page will be displayed as a blank page.
Custom CSS for Maximum Readability
Strangely, the Chosen theme uses a grey color (not even dark grey) for the text. To me, grey on white is a little hard to read. To increase contrast and readability, I want something closer to black on white.
Thankfully, I didn’t have to hack the theme because WordPress supports a method to override the CSS style attributes. To do so, click on “Customize” under “Appearance” in the WordPress administration and then “Additional CSS”. For the Chosen theme, I inputted the following CSS overrides to make the text almost black and the title a little darker:
color: #101010; /* Originally #545454 */
}
h1, h2, h3, h4, h5, h6 {
color: #2A2A2A; /* Originally #2B2B2B */
}
Tip: The very helpful Color Hex Color Codes webpage allows you to input the color hex code (like “#2A2A2A”) to see the resulting color.
I identified the CSS rule set to modify by using Chrome’s DOM elements viewer to figure out which CSS rule set contained the “color” property for the selected text. Alternatively, you can look inside the theme’s “.css” style files.
Note: The “Additional CSS” content is stored in the database, so a WordPress theme update will not delete it.
Featured Image in RSS Feed
WordPress supports featured image (a single image to represent the theme of a post or page). And WordPress supports RSS feed (to publish the latest content to RSS feed readers). Unfortunately, WordPress does not support featured images in the RSS feed.
To modify the RSS feed to include featured images requires code changes to the WordPress theme or a plugin. I decided to use the Featured Images in RSS for Mailchimp & Other Email WordPress plugin.
Once the plugin is installed and activated, I tested it by opening the RSS feed which is under the “/feed/” subpath. For my site, the resulting URL is https://chanhvuong.com/feed/.
Search for the “img” image tag in the RSS feed’s XML output. The featured image should be referenced under the “<description>” element.
Note: If you test using an RSS reader like Feedly, be aware that Feedly caches the RSS feed content so new changes won’t be visible until you do a new post.