WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] How to move post title and date next to thumbnail image? (17 posts)

  1. AsHerWorldTurns
    Member
    Posted 1 year ago #

    Hello,

    I'm trying to move the post title and date to the right of the thumbnail image on this site. Right now the title/date sits above the thumbnail and it's very spaced out. But if the title/date shifted to the right of the thumbnail (above the excerpt text) then it would look more visually compact. Any ideas how I can do this? I use excerpts for everything except single posts so I'm looking for code that would apply to all of that. Maybe something in my content.php file (I'm using a child theme) near this code:

    <?php if ( !is_single() ) : // Only displays content for single posts. Displays excerpts for everything else. ?>

    Any help would be appreciated!

  2. Robert Dall
    Member
    Posted 1 year ago #

    Hi

    This is mainly a HTML and CSS issue in your index.php file.

    I see what you trying to do. What you need to do is put the title and the date in the same div and then float image to the left.

    You do need some html and css knowledge. But I kinda did the same here but I haven't used the date.

    http://www.uprisingbreads.com/bread

  3. AsHerWorldTurns
    Member
    Posted 1 year ago #

    Yes, I'm looking for something similar to what you have on your site -- with the title and excerpt right of the thumbnail.

    I'm new to CSS. Any idea what code I can use in my index.php (in my child theme) to make this change?

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    in your template, move the featured image code to before:

    <header class="entry-header">

    and add this to style.css:

    .blog .entry-title, .blog .entry-header .entry-meta { clear: none; }

  5. AsHerWorldTurns
    Member
    Posted 1 year ago #

    Hi alchymyth,

    Just want to verify - do you mean the index.php template? Also, which featured image code? (Right now I just have a "featured content gallery" plug-in code near the top of my index.php, but that's different than the thumbnails in my excerpts.)

    I also tried playing around with code in the content-featured.php template (child theme) but it didn't change anything.

    Many thanks for your help!

  6. Robert Dall
    Member
    Posted 1 year ago #

    Hi AsHerWorldTurns if you want change what is going on the front page of your site then you would add what alchymyth has suggested to the index.php and style.css

    Hope this helps.

  7. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    the template would be content.php in your child theme;

    with 'featured image' code I was referring to 'the_post_thumbnail()' code;

    to avoid any misunderstanding, it might be the best if you could paste the code of content.php into a pastebin and post the link to it here - see http://codex.wordpress.org/Forum_Welcome#Posting_Code

  8. AsHerWorldTurns
    Member
    Posted 1 year ago #

    Alchymyth wrote, "move the featured image code," but I'm not sure what code that is. The only image-related code currently in my index.php refers to the Featured Content Gallery plug-in (which is different than the thumbnail images featured in my excerpts). Should I pull featured image code from elsewhere and move it to index.php in the area where Alchymyth suggests? If so, where can I find that code?

    I added the style.css code that Alchymyth suggested.

    Thank you!!

  9. AsHerWorldTurns
    Member
    Posted 1 year ago #

    Thank you Alchymyth! (Sorry, I wrote my last response before I saw yours!)

    Here is the code from my content.php:

    http://pastebin.com/VJg46NRm

  10. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    this is what I would suggest: http://pastebin.com/PSdD7iZj

  11. AsHerWorldTurns
    Member
    Posted 1 year ago #

    We're getting closer!

    The title and date are now shifted to the right of the thumbnail, but the excerpt text has completely disappeared and now the full posts show up on my home page. How can I get the excerpt text to show up again instead of the full posts?

    My pages used to have excepts like the home page, but now my pages are showing the thumbnail image first, then the title/date below it (odd), and then the full post (here's an example). I only want to see the excerpts here, just like it looks on the home page (minus the featured content slider): thumbnail on the left, post title, date, and excerpt on the right.

    The single posts look perfect.

    Thank you SO much for your help.

  12. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    was the content.php, you posted into the pastebin, not the one you were using in the child theme for your site?

    if not, you will need to make the same changes in content.php of the child theme;

    or you possibly need to
    edit content.php and change this line:

    <?php if ( is_search() ) : // Only display Excerpts for Search ?>

    to:

    <?php if ( !is_single() ) : // Only displays content for single posts. Displays excerpts for everything else. ?>

    the suggested styles were specifically for the posts page only, to expand this to the archives etc. you need to add more styles like these ones:

    .blog .entry-title, .blog .entry-header .entry-meta { clear: none; }

    add:

    .archive .entry-title, .archive .entry-header .entry-meta { clear: none; }
    .search .entry-title, .search .entry-header .entry-meta { clear: none; }
  13. AsHerWorldTurns
    Member
    Posted 1 year ago #

    Thank you!!! That fixed it.

    I have one more question relating to the excerpts layout on the home page and pages: Can I indent the "posted in [category]" so it's in line with the title, date, and excerpt text (instead of flush left under the thumbnail)?

    If this is a different enough subject, I can post it as a new topic.

    Again, major thanks for your help, Alchymyth!

  14. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    .blog article footer, .archive article footer, .search article footer { margin-left:160px; }

    to also take care of the thumbnail in the archive pages and search result pages, you should now have this section of css at the end of style.css:

    .blog .entry-title, .blog .entry-header .entry-meta { clear: none; }
    .archive .entry-title, .archive .entry-header .entry-meta { clear: none; }
    .search .entry-title, .search .entry-header .entry-meta { clear: none; }
    .blog article footer, .archive article footer, .search article footer { margin-left:160px; }
  15. AsHerWorldTurns
    Member
    Posted 1 year ago #

    Perfect!! Your help has been invaluable. Thank you, thank you, thank you, Alchymth!

  16. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    you are welcome ;-)

    last thing - if everyting is fixed, please mark the topic as 'resolved' - thanks.

  17. Dong Suzuki
    Member
    Posted 1 year ago #

    I know this thread has already resolved, but I have the similar question and I follow alchymth's codes. Everything works well except that there is an unwanted featured image thumbnail on top of the post title. Please take a look here:
    http://www.dongphotography.ca/home

    I am using Twenty Twelve. In my child theme I have the content.php and I removed the line <?php the_post_thumbnail(); ?>, which is supposed to solve the problem, but it is not.

    Is it because I move the featured image code ahead of <header class="entry-header"> How can I fix the problem?

Topic Closed

This topic has been closed to new replies.

About this Topic