Building a Feed from WordPress’s REST API

November 30, 2022November 30, 2022 ~ Pete Smith ~ Leave a comment

For reasons not worth elaborating on, I was tasked with building a feed based on WordPress’s REST API (as opposed to pulling in an RSS feed). This was a new experience for me.

The default URL to grab posts is /wp-json/wp/v2/posts, so for example https://smithtalkstech.com/wp-json/wp/v2/posts

That is sufficient if you just want the text of the posts you want to pull in, but you probably want some kind of images too, right? Perhaps whatever you’re using for a thumbnail. I don’t actually use featured images here so this blog is a terrible example, but suffice to say that /wp-json/wp/v2/posts will pull in links to the attachment page, but not the actual image URLs.

So you’ll find something like wp:featuredmedia blah blah href: mysite.com/wp-json/wp/v2/media/8794

You could then do another call to that URL and get all the data, including the URL to the image, but there’s a slightly easier way: append ?_embed to the end of your URL: https://smithtalkstech.com/wp-json/wp/v2/posts?_embed

Now you’ll have an _embedded node in your JSON that holds what you need, but gotta dig down a few levels
_embedded -> wp:featuredmedia -> 0 -> media_details -> sizes -> thumbnail {for example} -> source_url

If you’re like me, some of those special characters will throw you off. Here is a working example:

$mediaUrl = $obj->_embedded->{'wp:featuredmedia'}[0]->media_details->sizes->{'post-thumbnail'}->source_url;

$mediaURL now holds the URL to your thumbnail image.

$obj is the json object. In this case I was grabbing a custom image size called post-thumbnail

Putting wp:featuredmedia inside quotes inside curly braces was new to me.

Everything else is pretty easy. $obj->link for the URL of the post, $obj->title->rendered for the post title, $obj->content->rendered for the post content, and so on.

I highly suggest using Firefox to look at these json files since it formats stuff for you. Or snag a json viewer extension for your favorite browser.

By the way, by default you’ll get 1 page of 9 posts. You can control how many posts you get by appending a per_page value.

So say I wanted the most recent 3 posts (and I want the embed stuff): https://smithtalkstech.com/wp-json/wp/v2/posts?_embed&per_page=3

Here’s the full documentation for /posts: https://developer.wordpress.org/rest-api/reference/posts/

Layering Icons with Font Awesome

May 5, 2022May 5, 2022 ~ Pete Smith ~ Leave a comment

I’ve been playing around with using Font Awesome for icons lately. This is pretty common knowledge stuff but that doesn’t mean I won’t forget how to do it so figured I’d best write it down.

Step 1 of course is including Font Awesome inside your head tags. Something along the lines of this:

<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

The simplest way to add an icon is just by adding a class to an empty tag:

<i class="fa-solid fa-dungeon"></i>

From that code we get this:

OK but where does that code come from? You have to look it up on the Font Awesome site. Make sure you click the “Free Icons” toggle unless you’re paying for FA.

You can change the color of the icon via CSS in the same way you’d change any text color. You can change the size the same way (via font-size) OR you can add more classes:

results in:

There are also literal sizing classes: fa-1x, fa-2x… fa-10x
You can read up on sizing icons in the official documentation.

So at long last let’s get to layering, which is the point of this blog post. Layering is my term, Font Awesome calls it stacking which is more accurate but in my brain I liken it to layers in a graphics program. Here’s their documentation on it.

And here’s an example.

This is the code behind that icon. This is 3 stacked icons: a solid circle, the RSS icon, then a hollow circle. Initially the hollow circle is the same color as the solid circle, but it changes color on hover (roll your mouse cursor over it to see what I mean). Note that you need a span or something wrapping all your layers.
<a href="https://smithtalkstech.com/feed/"> </a>

So what does this all mean? The first span is a container for the stacked icons. The fa-stack class is what indicates this is a container for stacked icons. If you’re interested, here is the CSS behind fa-stack:
display: inline-block; height: 2em; line-height: 2em; position: relative; vertical-align: middle; width: 2.5em;

fa-lg is controlling the size of the icon stack

For the first actual icon, the combination of “fa fa-circle” are the classes for a solid circle, fa-stack-2x sets this to be twice as large as the standard size (as set by the container).

The next icon replaces fa-circle with fa-rss-square, which shows the RSS icon. fa-stack-1x makes it the standard size, so half as big as the solid circle.

And finally the last icon is from a different ‘set’ of Font Awesome icons, so starts with fa-regular (instead of fa) and then fa-circle. I know this is a little confusing, but “fa fa-circle” is a solid circle, while “fa-regular fa-circle” is a hollow circle. These values all come from looking them up on the Font Awesome site. Finally fa-stack-2x makes the hollow circle twice the standard size, or the same size as the solid circle.

The icon-background, rss-icon and icon-border classes are my classes that I use in local css to set colors and so forth.

If you’re curious about the actual shapes, here’s the CSS for fa-rss-square, or more technically the before pseudo element for fa-rss-square
.fa-rss-square:before, .fa-square-rss:before { content: "\f143"; }
So just the hex code of the character that Font Awesome uses for the RSS icon, I guess.

And that’s about as far as I’ve taken this. I’m not 100% convinced this is easier than just making some small gifs to use as icons, but I’ll admit it’s pretty convenient once you have Font Awesome installed on a site. Just look up the icon you want and paste in the classes and bam!

Changing Icon Colors in UI Kit (and SVGs in general)

June 4, 2020 ~ Pete Smith ~ 1 Comment

For a new project I’m working on, I’m learning UI Kit; I have never done much in the way of front end development so I’m like a babe in the woods when it comes to CSS Frameworks.

Today’s challenge: Icons. UI Kit includes support for SVG icons. I needed a star on a navbar and UI Kit could give me one. Why not use it?

The UI Kit documentation says “This component injects SVGs into the site, so that they adopt color and can be styled with CSS.” Problem is it doesn’t offer any details on this, assuming I guess that you know how to style SVGs. I didn’t.

Here’s how to insert a star icon:

<span uk-icon="icon: star"></span>

That worked but it gave me an open star and I needed a filled star

Seems like it should be easy enough, right? I tried assigning a color to the class and that worked on the stroke but didn’t fill the star.
In the end I inspected the hollow star (in a browser) and here’s what I found:

<span class="uk-icon" uk-icon="icon:star">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="star">
<polygon fill="none" stroke="#000" stroke-width="1.01" points="10 2 12.63 7.27 18.5 8.12 14.25 12.22 15.25 18 10 15.27 4.75 18 5.75 12.22 1.5 8.12 7.37 7.27">
</polygon>
</svg>
</span>

OK now we know what we’re aiming at. I’d read a lot of ‘how-to’ posts on dealing with SVGs and they made it seems simple: just use fill: color like this:

.uk-icon { 
fill: yellow; 
}

That didn’t work and it turns out the <polygon> tag of the SVG was mucking things up. So to make a long story slightly less long, here’s the CSS I wound up using. For grins I’m going to give our star a black outline:

.uk-icon[uk-icon="icon:star"] svg {
    color: black;
}

.uk-icon[uk-icon="icon:star"] svg polygon{
    fill: yellow;
}

So first (.uk-icon[uk-icon=”icon:star”]) I’m making sure to target just the star icon (I could get more specific in case I need a blue star somewhere else). The first rule points at the svg and assigns the color black to the stroke (ie the outline).

The second rule goes one level deeper and targets the <polygon> tag inside the SVG, and NOW we can set the fill to yellow. And we wind up with this: So there ya have it. Now a few obvious points to address: I could’ve just gone and found a filled star gif or some other svg or used Font Awesome or something, I know. But I learned a lot by spending the time to figure this out.

Second, yeah next thing to figure out is how to align it to the text better. 🙂