Lesson: Styling the postmetadata section

  • Lorelle

    (@lorelle)


    20 years ago

    The postmetadata is the information about your post often found in a corner of the sidebar menu or down at the bottom of your post before the comments and footer. It can be styled in many different ways with a variety of details. Let’s look at some to help you figure out what you want to do.

    The basic code, condensed from the WordPress default (Kubrick) is:

    <p class="postmetadata alt">
    <small>
    This entry was posted on <?php the_time('l, F jS, Y') ?> and is filed under <?php the_category() ?>....</small>

    This would result in:

    This entry was posted on Monday, February 12, 2003 and is filed under WordPress Lessons Things to Know…

    Let’s just change the_category() so that it lists the categories with a comma in between them. Notice the “space” after the comma to put comma, space in the separation:

    <?php the_category(', '); ?>

    This would look like:

    …is filed under WordPress, Lessons, Things to Know…

    If you want to change that to a pipe, you can put in:

    <?php the_category(' | '); ?>

    And you would get:

    …is filed under WordPress | Lessons | Things to Know…

    There is more information in the Codex about styling the_category tag.

    Okay, let’s look at the date. Here are some examples of PHP date layouts to help you change the date layout to your own style:

    <?php the_time('l, F jS, Y') ?> – Tuesday, May 14, 2001
    <?php the_time('j Y at g:i A') ?> – 28/2005 at 2:45 PM
    <?php the_time('D j M y') ?> – Mon 28 Jan 05
    <?php the_time('The j day of the month of F in the year of Y') ?> – The 28 day of the month of January in the year of 2005

    More specifics on date layouts can be found at PHP.net’s Date Function.

    There are several plugins that allow you to include the date the post was last modified. You can find two of them at Guff Zsub’s Last Modified WordPress Plugin and Nick Momrik’s Last Modified Plugin for WordPress. Here is an example using Nick’s plugin.

    This entry last modified on <?php last_modified('l, F dS, Y'); ?>, originally posted on <?php the_time('l, F jS, Y') ?>. It is sorted and filed under <?php the_category(', ') ?>....

    Now, let’s look at the actual “look” of the postmetadata section. There are a lot of things you can do with this. For one example, you don’t have to use the <small> tag but eliminate it and set the font-size to whatever you want it to be. You can also put the “box” just about anywhere in your layout and look like anything. Let’s put it in a narrow blue bordered box that sits at the top right corner of your post with the beginning of the text wrapping around it. In your index.php, single.php, or whatever file that hosts your post information, move the postmetadata section (like above) up the page and below the title, before the post content. In your style.css file change the information to something like this:

    .postmetadata {position:relative; float:right; margin:5px; padding:5px; width:25%; border: solid 1px blue; font-size: 80%; color: navy; background: #CCFFFF;}

    The float:right attribute moves the box to the right of the text. I’ve set the width to 25% so it would take up a quarter of the screen width, no matter what the screen width is. You can make it a fixed width by changing it to width:150px or another number that matches the look you want.

    This should help get you started. What are some other ways you can think of to change the look of your postmetadata?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Root

    (@root)

    Lorelle if you use float in conjunction with margins and padding you are going to get into all kinds of difficulties with the IE / FF conundrum and I really cannot advise it at all. Also – I personally avoid class names and such with spaces in them. Spaces are a windows thing but they are erratic and best avoided. IMHO.

    Thread Starter Lorelle

    (@lorelle)

    Oh, the space between postmetadata and alt – hee hee – that’s not a “space” as in the name. You can assign more than one class to anything. Even three if you are seriously willing to experiment. For instance, when I want to align an image (graphic/photograph) to the left or right and have the text wrap around it, I add the class “right” or “left” to the image with the CSS that says:

    .right {float:right}
    .left {float:left}

    On occassion I want a border around a photograph to highlight it or separate it from the rest of the content. I have another class called “borderimg” and it looks like:

    .borderimg {padding:5px; border: solid 1px black; }

    When I want to align an image to the right AND add a border the class looks like this:

    <img scr="image.jpg" class="right borderimg">

    It doesn’t mean I’m calling a class with a space in the name, I’m calling two classes. The W3c reference for using mulitple classes will help you understand this maybe better than I can:

    class = cdata-list:
    This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

    As for the float, using the float doesn’t automatically mean there will be problems with MSIE or Firefox. It means there is a potential if the overall structure isn’t set up well to begin with. A float is a normal function of CSS layout and people shouldn’t avoid it because of the potential for problems. Many WordPress Themes use floats. I use them all the time and only rarely have to fight with some of the problems, like when there is a list next to a float. But once I imply the fix, (usually the Holly Hack does it for me), I stop thinking about it because it is “all fixed up.”

    Experiment – have some fun – pull your hair out with grief and agony – then turn around and face your family and all of the personal problems you deal with every day and you’ll be glad of the distraction that web page design brings….;-)

    Root

    (@root)

    Well the problem with that is that in accordance with the W3C rec it is necessary to define the width of the floated element, in your example 25%. If you then add 5px of padding and margin on both sides it will inevitably cause distortion in one or other browsers.It is true that a number of hacks are then possible for those experienced enough to do it. Personally I do not like them because they are ugly.
    Nevertheless the code you set out is virtually guaranteed to bork cross platform.
    I can’t recommend it and I stand by my advice for the benefit of other readers.

    Thread Starter Lorelle

    (@lorelle)

    Now that this is off your chest, how about a design or two of your own for this postmetadata section? What would be a pretty but maybe different layout?

    Root

    (@root)

    Design I don’t do ??
    Incidentally manji has some very pretty post meta styling. IMHO.

    Thread Starter Lorelle

    (@lorelle)

    How about this as an idea:

    .postmetadata {position:relative; padding:5px; width: 95%; border-top: solid 10px purple; font-size: 80%; color: navy; background: white; font-variant: small-caps; text-transform: capitalize;}

    This example puts the postmetadata in the top of the sidebar menu highlighted with a very thick top purple border, navy colored text that is capitalized but also in small caps which forces the first letter of every word to be capitalized but the whole thing is capitalized with the first letter being a little larger than the other caps.

    Now, I want to put this into a better sentence so it looks like a paragraph of information.

    <p class="postmetadata alt">We write about a lot of subjects and this article covers topics such as <?php the_category(' and ') ?>. "<?php the_title() ?>" was written on what I think was a <?php the_time('l'); ?>, but I know it was the <?php the_time('jS'); ?> day in the month of <?php the_time('F'); ?> in the year of <?php the_time('Y'); ?>, though I messed around with this on the <?php last_modified('dS'); ?> day of <?php the_time('F'); ?> in <?php the_time('Y'); ?>, a not-so-busy <?php the_time('l'); ?> when I had nothing better to do.</p>

    Which would result in:

    We write about a lot of subjects and this article covers topics such as Learning and Photography Techniques and Composition. “Composing Your Nature Photographs” was written on what I think was a Tuesday, but I know it was the 15th day in the month of February in the year of 2005, though I messed around with this on the 10th day of February in 2005, a not-so-busy Tuesday when I had nothing better to do.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Lesson: Styling the postmetadata section’ is closed to new replies.