WordPress.org

Support

Support » How-To and Troubleshooting » issues with styling image caption

issues with styling image caption

  • I’ve managed to place the image caption directly under the post title, which is exactly what I want, however I’m having a hard time styling it.

    I’m using the css below, which is exaclty what is used for the h2/title, but for some reason .wp-caption-text isn’t grabbing it.

    .detail .wp-caption-text {
    	padding-left: 20px;
    	padding-bottom: 8px;
    }

    Relevant files:
    index.php
    style.css


    I’ve had issue with getting help with this theme in the past because of something to do with the developers. Hopefully an issue as far removed from the specific theme as this is can be answered. Also, I’m aware that wordsPOP has support forums, but it’s been overrun by spam.

Viewing 15 replies - 1 through 15 (of 15 total)
  • when you “inspect element” in FF or Chrome, is that the correct css?

    i.e. is it in a div that is class=”detail” and then another that is class=”wp-caption-text”?

    Ah, I originally overlooked the fact that it was <p class="wp-caption-text"> so I changed the css to the below which I believe is semantically correct, however, the problem persists.

    .detail p.wp-caption-text {
    	padding-left: 20px;
    	padding-bottom: 8px;
    }
    WPyogi

    @wpyogi

    Forum Moderator

    Unless you post a link to the page where the problem is, it’s impossible for anyone to help much.

    Sorry, I thought I included the live site in with the pastebin links.

    Live site.

    WPyogi

    @wpyogi

    Forum Moderator

    Don’t see any image captions or h2 tags on that page at all??? Just below the post title is the meta text…

    Moderator Michael

    @alchymyth

    Forum Moderator

    the problem is in this line:

    <?php if (the_post_thumbnail_caption()) { echo '<p class="wp-caption-text">' . the_post_thumbnail_caption() . '<p>'; }?>

    because the function the_post_thumbnail_caption() echos the text, it can therefore not be used in a conditional statement;

    what you see is the output of the first use of the functions within the if() – not the part in { ... }.
    therfore no html tag with css class, and no formatting.

    can you paste the full code of the function into a pastebin and post the link to it here?

    @alchymyth functions.php

    @wpyogi I’m not sure what you mean.. In index.php, which I linked to in my initial post, there is the following:

    <div class="detail">
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php if (the_post_thumbnail_caption()) { echo '<p class="wp-caption-text">' . the_post_thumbnail_caption() . '<p>'; }?>

    what WPyogi means is that we need a link to the page that is causing the problem, not to the site itself.

    alchymyth answered your question, the line that says if (the_post_thumbnail_caption()) { should say if (get_post_thumbnail_caption()) {

    changing it to get_post_thumbnail_caption i both index.php and functions.php still doesn’t allow me to style it..

    Moderator Michael

    @alchymyth

    Forum Moderator

    suggestion:

    change the function name to get_post_thumbnail_caption()

    chnage all echo to return

    change from returning the thumbnail title to the thumbnail caption

    see:
    http://pastebin.com/sy6mKuJ7

    also change this line in index.php:

    <?php if (the_post_thumbnail_caption()) { echo '<p class="wp-caption-text">' . the_post_thumbnail_caption() . '<p>'; }?>

    to:

    <?php if (get_post_thumbnail_caption()) { echo '<p class="wp-caption-text">' . get_post_thumbnail_caption() . '<p>'; }?>

    alchymyth, thanks for your time and attention.
    I made the changes you recommended, and the caption that was once there, just in the wrong place, has now disappeared. Any ideas?

    new index.php
    new functions.php

    Moderator Michael

    @alchymyth

    Forum Moderator

    the caption that was once there, just in the wrong place, has now disappeared.

    possibly my fault – I changed this part of the function to this here (because you are talking about the caption):

    //show thumbnail title
         //return $thumbnail_image[0]->post_title; 
    
         //Uncomment to show the thumbnail caption
         return $thumbnail_image[0]->post_excerpt;

    which would have been before (showing the image title):

    //show thumbnail title
         return $thumbnail_image[0]->post_title; 
    
         //Uncomment to show the thumbnail caption
         //return $thumbnail_image[0]->post_excerpt;

    please change it back.

    you featured images possibly have no image caption added;

    the images definitely have captions- they were showing previously, just not in the right position.

    Moderator Michael

    @alchymyth

    Forum Moderator

    the images definitely have captions – they were showing previously, just not in the right position

    those were – as far as I interprete the code – image titles;

    simple make the edits I suggested in my last reply – this should show it as before.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘issues with styling image caption’ is closed to new replies.