Display your mood or a song with custom fields

Blogging should be fun. Even if you’re writing articles about serious subjects, your blog could still have that thing or two which makes it a bit more fun for an average reader. It can be anything – a little note from author, a funny image or you can add a mood you were in while you were writing the article. Maybe you would even like to add a song title you were listening to.

Today, we’re about to show you how to easily implement a feature for displaying a mood/song in your posts. You won’t have to install any additional plugins and the feature won’t take much of your space. It is a simple line of text which can be added automatically on top or bottom of your post.

Before adding the feature, make sure that you know what are custom fields and how do they work.

Let’s add a “mood feature”:

  1. Open single.php file
  2. Copy and paste the following code on the spot where you want to display your mood:
  3. $customField = get_post_custom_values("mood");
    if (isset($customField[0])) {
    echo "<span class='my_mood'>" . "Mood: " .$customField[0] . "</span>";
    }
  4. Save changes

Custom fields mood

Now that you have prepared WordPress for your moods, you’re ready to display them in any post that you want. By default, WordPress won’t show your mood and there won’t be any default moods it will load until you decide to show one. If you wanted to add a song instead, simply change the “mood” into “song” on the first line of code and you can also change the class name on the third line.

Add your mood/song in a post:

To enter a mood or a song, you will need to write it in a custom field:

  1. Open a post for which you want to write a mood
  2. Scroll down until you see “Custom Fields”.
  3. If you don’t have Custom Fields displayed below the post content, click on “Screen Options” on top of your editor screen and check the checkbox next to “Custom Fields”.

  4. Write “mood” in the name field or “song” if you have decided to go with it
  5. Write anything you want in the “Value” field – this will be to mood/song displayed in your post
  6. Click on “Add Custom Field” button
  7. Publish your post

Style it:

As you can already see from only 3 lines of the code, this is the simplest form of adding a new custom field. If you want to style your mood with some CSS, you can see that the code already added the “my_mood” class to your text. To modify the styling, do the following:

  1. Open style.css file
  2. Copy and paste the code:
  3. .my_mood {
    color: blue;
    }
  4. Add any CSS styling that you like
  5. Save changes.

Hopefully, this will be enough to get you started customizing “the mood/song feature” for your own blog and we hope that “blue” won’t be a frequent value which you deal with. If you don’t want to publish your mood, simply don’t write anything in the “mood” custom field.

Yeah, now you probably want some emoticons or images next to your moods or you need some fancy notes next to your song title, right? We’ll cover that in our next article so don’t forget to give us a visit during the following days.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *