Category: WordPress

In this site PhotographWorks, the font size for the anchor text is bigger than font size for the body text.

The difference in font size between the anchor text and the body text has been bugging me.

I don’t know how the font sizes came to be different and I can’t see that I made any changes in global styles or anywhere else.

Look at this screen grab, and you can see that the font size for the anchor text Ghost Notes is bigger compared to the body text.

It’s been bugging me but I didn’t get around to doing anything about it until today.

Enter Claude

Today I happened upon an email from WP.com that said that the Claude LLM could link to WP.com.

So rather than ask the LLM in the WP admin as I usually would, I asked Claude how to make the anchor text font the same size as the body text.

It came up with a couple of suggestions, one of which was to add some CSS.

Classic vs Block Themes

I am using the Twenty Twenty-Five WordPress theme, which is a Block theme.

You will see these themes referred to as full site editing (FSE) themes.

What makes Block themes different from classic themes is that Classic. themes are built on PHP.

Block themes are built from HTML templates. And bingo – those templates are made of blocks.

This automatically enables the FSE site editor.

So for most purposes we can say that Block themes are FSE themes.

If you didn’t understand all that, neither do I completely.

The Customizer

The thing is that with Classic themes you can usually use the Customizer and tweak the theme and add CSS.

You might think therefore that with an FSE theme that you can’t get to the Customizer to add CSS, but you can if you know where to go.

Instead of going to Appearance / Editor in WP Admin, instead go to yourdomain DOT com/wp-admin/customize.php and you will see it says:

Hurray! Your theme supports site editing with blocks. Use Site Editor

Ignore Use Site Editor, and below that you will see that it says

Customizing < Additional CSS
Add your own CSS code here to customize the appearance and layout of your site.

And that’s where you add your CSS.

Here is the CSS that I added:

.entry-content p a {
  font-size: 1em;
}

And here is a screenshot of the section of the post as it looks now with the anchor text and the body text the same size.

If you’ve read my blog for long enough you know I like to try different blogging platforms to see their attractions and limitations. Here are a couple I have used recently.

HTMLy

HTMLy is an open source PHP blogging platform without a database. It’s what’s called a flat-file CMS. You need a web host – any of the commercial hosts – and you need a domain you own. Then you upload the files you need, then log in and start writing.

If you have tried Jekyll or Hugo or any of those static site generators and found them tricky to use – then you will like HTMLy because it is very easy to use.

The admin panel is very simple. Click the appropriate tab and you can write a regular blog post or a static page.

Why bother?

Well, there’s no database like there is with WordPress. So while a flat-file CMS like HTMLy is more limited it is also easier to keep secure from bad actors.

WordPress – both .com and the self-hosted version – are always being updated to cope with new threats.

f you keep your WordPress site updated and are careful about what plugins you use, and choose a competent web host, then you can keep your site secure.

But none of these threats are much of a worry with a flat-file CMS because their structure is so simple.

You can find HTMLY here if you want to give it a spin to make your own website.

Pika

I mentioned Pike before back in 2016 and it is still around. And yes, it is named after the little fellow who gathers flowers to decorate his wooing venue.

Pika is a hosted solution, meaning it is hosted by Pika just like your WordPress.com site is hosted by Automattic.

To get started with Pika you just start writing. It’s that simple. And it is free for up to 50 blog posts. Find it at Pika.

Pika is made by Goodenough, who also make a paid-for application named Jelly that is a kind of open-plan email for teams.

And here is a photo of a pika from Wikipedia (attribution to the photographer Frédéric Dulude-de Broin curid=62409649)

Tamara and I saw a programme on TV about pika. Some of them are not above stealing the flowers that other pika have already collected and laid out on the matrimonial bed in hopes of a willing female.

When they go off to find more flowers, the thief doubles back and snaffles some from his neighbour to decorate his own matrimonial bed.

So is this a photo of a thief looking as though butter wouldn’t melt in his mouth?

Or is he a dear little guy intent on wooing a partner with his own hard-won flowers that he collected?

Neocities

This is free and hosted on Neocities, You need to make an .html file in order to start writing. You have to put in the HTML coding as you write – to divide sentences, make headings, etc – but that’s it. And learning the markup language for HRTL is super simple as many readers will know.

Or there’s an HTML editor right in your Neocities browser so you can do all that stuff right on your site.

If you’d rather use your favourite desktop editor you can, and I did. I used CotEditor for Mac, which is free to download from the App Store.

Not content with a completely plain vanilla look to the site that I made, I wrote (or rather I copied) a CSS file and added that and now my little site looks spiffy with a nice serif font in different weights and sizes.

Assuming you write the files on your own local machine, then the way you update the content is to write in the .html file and then simply upload it and it will overwrite what’s there.

Uploading the .html file is done inside the platform, so you don’t need an uploader like Transmit or FileZilla or anything like that.

And if you were ever to misplace. your own files, you could just download them from the platform and carry on.

One of the attractive things about neocities is that it guides you to helpful resources to get you going on HTML and CSS and more. Neocities is here if you want to take a look.

Round Up

Well these are all fun but if you have fairly simple needs and want something for the long haul then HTMLy is a pretty good choice.

Here’s how to change the font size for the captions on images in the Twenty Twenty-Five theme.

I prefer the text to be smaller than the body text to make it more obvious that it is a caption and not part of the main text.

By default the captions are the same size as the font in the body text.

Go to Editor / Styles / Captions and you can change it there.

I put a red line in this screen capture to show which text I am talking about.

Update

After I gave myself a pat on the back for figuring this out, I looked at the article on my iPhone and the font size of the text for the caption was the same size as the body text.

So I asked WordPress AI support assistant. And after a false start it said that it understood that I was asking about the difference between desktop and iOS mobile display, and that this is a common challenge with responsive design.

The solution it offered was for me to change font size from px to em or rem. In the illustration above you can see a little slider to the right of the ‘Size’ tables.

Click that slider and change from px to rem or em and then set the size. And then go check how it looks.

Some More Thoughts

GUI, or graphical user interface, is a way for a designer to set up a means for the user to interact with the system without having to write code. App icons are a GUI.

Guttenberg is touted as a way to give creative freedom to website owners to change and adjust all parts of their site. That’s why it is called Full Site Editing.

But really, without the developer setting up a GUI for a user to make changes like the ones I have just made – what would I do?

In my case I looked at the code in Firefox and was looking for a way to add CSS. I wasn’t sure what to add (that is usually the case) and more importantly where to add it.

The What And Where Of CSS In FSE

Support answered with what I had guessed but wasn’t sure about – use the ‘Advanced’ section like with the Customiser in non-FSE sites

You’re asking where to paste CSS if you’re using a Full Site Editing (FSE) Block theme that doesn’t have a graphical user interface for typography settings, and you’ve figured out the CSS changes you want to make.

If you’re on an eligible plan that allows adding custom CSS, you can apply CSS to specific blocks site-wide by following these steps:

1. Visit your site’s dashboard.
2. Navigate to Appearance → Editor.
3. Click on the “Styles” menu option.
4. Select the “Blocks” section to access settings to customize the appearance of specific blocks for the whole site.
5. Click the name of the block you want to add CSS to, or use the search box to locate your desired block type.
6. Scroll down to the bottom and click on “Advanced” to add your CSS.