Category Archives: WordPress

Tips and Tricks on WordPress usage and development. I am very passionate about WordPress, but it doesn’t work just by itself – it needs a rich environment to live and breathe in.

If you’re after theme and plugin alterations, we have a category for that.

How to build anchor links on the same page with WordPress

Anchor Links are internal links that can re-direct the user to a part further up or down inside a web page. This is a useful way to make a longer article better navigable, for example by starting with a small table of content, with each heading linking further down on the same page.

It’s been a popular strategy back in the early days of the internet, and it’s technically still how a table of contents in an e-book works, and I thought I’d bring the topic back to the table (I had forgotten how to do it, so here’s a handy reminder for my future self).

This is an example of an anchor link, sending you to the bottom of the page.

To create one, we need to have an ID of our choice that we’ll add to the beginning section of where we’d like to link. In my example, I’ll just call it “further down”. I’d like to use the link on my headline (called Example Anchor Link), so I’ll select the block and choose “Advanced” in the block editor.

That’s the destination of our anchor link setup. Now we can pick any passage of text inside or post, select it and pick the little link icon as usual. The difference however is that we don’t give the full protocol to our destination (like https://wpguru.tv), but instead we’ll start with the hash sign (#), followed by the anchor text we specified above. Like this:

Note how WordPress is telling us that it recognises this as an internal link. If you accidentally leave out the # sign, WordPress will (incorrectly) add http:// to the front and your internal link won’t work.

Example Anchor Link

Well there you are – you’ve been linked here from the example link at the top. If I wanted to, I could build another link to send you back up – but I don’t want to risk breaking the internet with an endless loop. I’m sure you get the gist of it 😉

Including Custom Posts on Archive Pages in WordPress

By default, Custom Posts don’t show up on regular Archive Pages. They still show regular posts, but none of the Custom Post Types are included. I suppose you’d have separate pages with custom queries for that. In my project however, which consists mainly of Custom Posts, it made sense to use the regular WordPress queries to simply include my Custom Posts.

I found an elegant solution that makes this happen:

This will hook right in before the query reaches the theme and adds my own “games” post type to the query. The double-if statement at the top makes sure this only happens on archive pages. Amend this to your needs, for example by using is_home or is_category instead. Replace ++ with two ampersands (I can’t work out how to make WordPress print them properly, and believe me I’ve tried hard).

Note that the hook will not be executed when the search is executed in the admin area. Doing so will show an “invalid post type” error.

Thanks to Tomás Cot and Mathew for their approaches to this solution.

Accessing Custom Taxonomy of a Custom Post Type in the_loop

I was wondering how to access the custom taxonomy of my custom post types so it can be mentioned in the_loop. To continue my example from earlier posts, I have custom post type of “game”, with a custom taxonomy of “platform”. When I list a game, I’d like to show the platform in a list after its title.

On regular posts, I have access to access to both categories and tags using the get_the_category() or get_the_tags() functions. For my project I have a custom query for the custom post type, and I’m using a custom taxonomy on it. I’d like to find out the name of that custom taxonomy. How do we do that?

We’ll use get_the_terms(), which is used by WordPress for both the above functions under the hood. Here’s how we can display all taxonomies of one type (must be used in the_loop):

Thanks to Ankur Bhadiania for this tip.

How to create Custom Post Types in WordPress

I’ve been working on a game database that’s powered by a vanilla WordPress instance. For the project it made sense to create a new post type (game), as well as a custom taxonomy (platform). I didn’t want to use a plugin and instead opted to create the new post type as part of the child theme’s function.php file.

Here’s how I did it.

Continue reading How to create Custom Post Types in WordPress

How to add allow ZIP files as uploads in WordPress

Years ago I added an additional MIME type to one of my websites so that I could allow a strange proprietary file type to upload directly. Back in those days, only a handful were allowed, and it included the ZIP format. I never had issues uploading those.

As the world gradually becomes a shitter place, security is tightened and I guess sometime recently ZIP files were no longer allowed in WordPress by default. Thankfully I remember how I did it, and I thought I’ll share it with you.

Add the following snippet to your functions.php file. I have it as part of my theme:

This will add both ZIP and GZIP type archives to your upload allowances.

Shoosh, Jetpack!

I wrote a new plugin based on code by Matt Medeiro that I’ve mentioned in a previous article. This is a super quick solution to get rid of any and all Jetpack Nags at the top of your Admin Interface.

I was working on a site that didn’t have a Child Theme, so it wasn’t easy for me to add that one-liner anywhere. The easiest way was indeed to wrap this up in its own little plugin, so now it’s as simple as

  • downloading the repo from GitHub
  • uploading the ZIP to the website in question
  • and activating the plugin

That’s it! There are no settings or admin interfaces to deal with. Once activated, those Jetpack messages simply disappear.

Enjoy. Because Less is More 🙂

How to add Category Descriptions in TwentyNineteen

Some themes implement the WordPress Category Descriptions, others do not. Often they’re not necessary, but sometimes they are. Here’s how to add them to the TentyNineteen theme.

Make a copy of the archive.php file and call it category.php. There’s a block of comments at the top, I recommend changing the description to remind you of what this file is in there for. Leave it at the root level of your (child) theme.

Find line 22 (or thereabouts), starting with the_archive_title(). This line is pulling in two lines Category Archives and your category title (Project Diary in this example).

To remove the top line, and simply print a title to the category without it becoming a URL, we can use this little workaround trick to replace the_archive_title() with this:

To add the description underneath, we can use the_archive_description() function. It’ll print out the text we set, inclusive of any formatting we choose. TwentyNineteen has several options to choose from. I’m going to use the block quote style, but feel free to use any class you like.

Hope this helps!

How to tweak the featured image filter in TwentyNineteen

Last year’s WordPress TwentyNineteen theme does nice things with the featured image in more than one level. The default wasn’t exactly what I was looking for though and some tweaks were necessary for me to feel happier. In particular I felt that the way featured images are displayed needed an adjustment.

There are three areas we can adjust:

  • the colour overlay
  • the opacity of the overlay
  • the darkened filter effect

The Colour Overlay

The colour overlay can be changed in the Theme Customiser. Under Appearance – Customise – Colors there’s an option to set the accent colour, which is also applied as an overlay to each featured image. Untick the box and the colour won’t be applied to your images.

The Overlay Opacity

By default the image is darkened quite a bit to make the white headline font more readable. They’ve overdone it a bit I think, making every image a hard contrasty shadow of its former self. That’s especially annoying if you’ve spent a lot of time crafting your own colour scheme and contrast. To soften the whole thing, we can adjust the opacity of the darkened image to make it look a little lighter, while not deviating too much from the character the theme authors had intended.

Add this piece of CSS and adjust the opacity value to your liking (I find that 0.9 or 0.8 work quite well).

The Dark Filter Opacity

While the above trick works on the whole (darkened) image, we can go one step further and leave the image opacity intact and only influence the dark filter. By making it less intense, more of the original image character will come out. Again, I find an opacity value of 0.9 or 0.8 works nicely. The lower you make it, the more dark filter gets removed. Choose 0 to get rid of it entirely.

I hope this was helpful.

How to make Gutenberg Galleries link to Media File by default

When you drag more than one image into a WordPress Post, the Gutenberg editor is nice enough to arrange your pictures as a gallery. By default however, the link target of the thumbnails it generates is set to “none”, which means that when users click on your images, they’re not seeing a full size version. Instead, nothing happens.

That’s probably not what 99% of all users expect to happen.

It is possible to change this in the sidebar to either Media File or Attachment Page, however if you’re like me and tend to forget that you need to make this change, or if you’re uploading a large number of galleries, it would be handy to have Media File as the default behaviour.

Thankfully there is a way to enable this with a little hack, courtesy of this Stack Exchange post by Tomas. By adding the following function to your child theme’s functions.php file, Gutenberg will behave slightly differently.

I’m saying it’s a “slight hack” because Gutenberg will now start with a gallery module at the top of your post, with the new default link behaviour set to Media File. Ordinarily the first module is a paragraph module that allows you to start typing, so if you’d like to write some text before showing off a gallery, you’ll have to manually insert one.

It depends on if this is what suits your needs, but I came across this solution and tested successful, thought it might come in handy in the future and sharing it with you and my future self at the same time. There are some other interesting ideas in that post too if you’d like to have a fiddle.

Happy Gallery Linking!

How bring back the missing File Editor in WordPress

Every once in a while, users notice that the File Editor in WordPress may disappear. This has been happening for many years, and although I’ve read about this issue, it’s never happened to me – until very recently. I’m talking about the options under Appearance – Theme Editor and Plugins – Plugin Editor.

When these options are no longer showing up, it’s usually because a measure of security has ben added to your WordPress configuration file. Some plugins do this, but also some other security measures governed by your hosting administrator or server software (Plesk’s WordPress Toolkit for example).

To bring these options back, head over to your wp-config.php file and hunt for the DISALLOW_FILE_EDIT constant. When defined and set to true, the file editors will no longer show up. Set it to false and they should come back.