How to Customize the Typology Theme’s Single Post Display For Fun and Profit

How to Customize the Typology Theme’s Single Post Display For Fun and Profit

It’s no secret; I love the Typology WordPress theme by Meks. I try new themes every month, maybe even let them run for a week or two, but I’m always switching back to Typology. The theme focuses on your text and puts graphics and photos and complex designs in the background. If you want your words front and center, this is the theme for you. That said, there is something I don’t like in the design, and you can see it on the single post page.

For single blog posts, there is an option to display a cover area that uses your featured image as the background. It’s great! But, when you enable it, the title and meta become disconnected from the content of the blog post. Worse, there’s no option to customize, so either the title and meta are in the cover or they’re attached to the content, but not both.

Luckily, you’re a l33t hacker who isn’t afraid to modify some code.

Here’s what I would rather see:

  • Cover area with just the title
  • Title and Meta in the content area

Here’s how we do it.

1. Enable Display Cover

Go to Theme Options, Single Post, and enable Display Cover.

Make sure you’re displaying the featured image as the cover background. (Another note to self: maybe we could repeat the featured image in the content as well?)

2. Edit template-parts/single/content.php

I use Sublime Text, but you can use WordPress’ built-in editor under Appearance, Theme Editor to modify the theme’s PHP source files.

WARNING: We’re about to void some warranties.

Modify line 5 from

 <?php if(!absint($meta['cover']) ) : ?>

to

<?php if(!absint($meta['cover']) || true) : ?>

This short circuits the “don’t display meta if cover is enabled” logic and leaves behind the original code (so you don’t forget it if you want to undo later).

Save and reload.

Awesome! We’ve got our title and meta back!

2. Edit template-parts/cover/cover-single.php

Change line 10 from

<?php if( $meta = typology_meta_display('single') ) : ?>

to

<?php if( $meta = typology_meta_display('single') && false) : ?>

The logic works the same way as the other file, except this time we want the statement to always evaluate to false so it won’t display the meta.

Save and reload.

Success!

3. Further Modification

Now, I like this better, but maybe the second display of the title doesn’t need to be in all caps. We can do this with a little CSS.

.section-content .entry-title {
    text-transform: none;
}

4. Let’s Go Nuts

I don’t like how the long title on this post is breaking in the cover. What if we always broke on commas? Surely that won’t bite us in the ass later…

Editing template-parts/cover/cover-single.php again, line 9 or 10

<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

to

<?php echo str_replace(",",",<BR>",the_title( '<h1 class="entry-title entry-title-cover-empty">', '</h1>' , false)); ?>

This uses the PHP function str_replace to search for commas and replace them with a comma and a BR tag. You have to modify the call to the_title and add a false at the end to get the function to return the text rather than echo it. Fun stuff, man.

Nice. Just the title in the cover area, breaking at commas, and title/meta in the content area. This, my friends, is why we learned PHP in the first place.

Now, go forth and break your website!

FAQ

Q: Daniel, won’t these modifications get blown away when the theme is updated?

A: Yes, probably, and I don’t know enough about child themes to tell you how to guard against that. Myself, I just write a blog post about how I did a certain thing and then when the theme is updated, I check back and just do the things again. These are small changes, so it shouldn’t be too much work to put them back.

Add comment

Leave a Reply

My Books

Latest Notes

Affiliate Disclaimer

When you buy through product links on this site, I may earn an affiliate commission. It’s not likely, but it could happen.

%d bloggers like this: