How to move post title to the right of thumbnail

Hi

I am in need of help with a mod to my theme, i need to move the post title and date to the right of the thumbnail (Main page)

http://www.asherworldturns.com/ here is an example

http://djworx.com/ here is another example

As you can see this makes the posts much more concise on the main page

I created the theme in Artisteer and then started to add in my own mods to CSS and PHP so i am not adverse to modding the theme itself, this is no problem at all

http://mercsunderfire.com/ is the test site set up so far, this is very vanilla at the moment and i haven’t added any WPMUdev plugins to it yet, will be doing some of that tonight actually.

Any help with this would be greatly appreciated.

Cheers

  • Vaughan
    • Support/SLS MockingJay

    Hi @flexi_mcnoodle,

    I can’t seem to do it properly with CSS, you may need to edit the posts template or home template file.

    As you see from the example sites you posted, the image, & title/posted meta are in different orders & enclosed in a <header> element, which makes it easier to achieve then using CSS.

    whereas all yours are completely seperate and in <p> tags which have no unique elements to mess with.

    If you could possibly send me your theme via email? I could possibly take a look at it for you, or provide FTP access so I can take a look via your site?

    Thanks

  • Vinod Dalvi
    • WP Unicorn

    Hi @flexi_mcnoodle,

    You can try adding following CSS code in the stylesheet file of your child theme or adding it in the site using any of the following plugins.

    .blog #art-main .art-postcontent p {
    margin: 13px 0;
    clear: right;
    }

    .blog #art-main .art-postheadericons.art-metadata-icons,
    .blog #art-main .art-postheader {
    float: right;
    min-width: 360px;
    clear: right;
    }

    .blog #art-main .art-article img {
    position: relative;
    top: -52px;
    left: 0;
    }

    As @vaughan already said in the previous reply that it would need to change markup in the template to achieve better result.

    To send the theme to @vaughan follow the below steps

    – Send an email using our secure contact form on https://premium.wpmudev.org/contact/

    – Select “I have a different question” from the dropdown

    – On the subject enter “Attn: Vaughan”.

    – Include the URL of this post in your message so that he may track this issue better

    – Include a link to your website

    Best Regards,

    Vinod Dalvi

  • Flexinoodle
    • The Incredible Code Injector

    Yeah i was a bit hasty on that hahaha, it actually doesn’t work, as soon as the title is any longer it just slides under the thumbnail :slight_frown:

    Adding a max width in the CSS just makes it very unpleasant again hehe

    I think this may need to be a PHP mod

  • Flexinoodle
    • The Incredible Code Injector

    Yeah whatever you do with this in CSS it is just always going to look terrible as far as i can tell because it is not dynamic to the actual thumbnail, so the title looks sometimes like it is left justified, and sometimes like it is center justified.

    This is after modifying the CSS to make the title text smaller and so on in case of longer titles.

    Not sure this can be achieved at all with CSS on an Artisteer theme :slight_frown:

  • Titanium Creative
    • Finder of Elusive Bugs

    One thing to consider. when I started working with WordPress, I tried to fix a lot of design elements with CSS.

    Most things can be changed relatively easliy by using the action and filter hooks. Some themes will actually provide additional hooks beyond the framework or WP.

    Sound like what you need to look at is applying a filter to the post header so you can change the order/arrangement of the thumbnail.

    If you are using a framework and a child theme, you could do this by creating a simple plugin.

    If you aren’t using a framework you probably don’t have a child theme and create a simple one to use to modify your current theme.

    If you have any questions about any of that, I’ll try to help.

  • Titanium Creative
    • Finder of Elusive Bugs

    The four things I mentioned sound really scary – they did to me at first.

    But they are really quite simple and once you get the hang of it you will never go back.

    I’ll see if I can find some links that will help you but it will probably be tomorrow.

    The first thing you want to look at is making a child theme and making a plugin. What you do is make one that doesn’t do anything. then you start changing your theme from there.That way you don’t lose changes when your theme updates.

    Making a theme or plugin is really just a matter of creating a few folders and files, zipping them and then importing them into wordpress with the add theme or add plugin pages in admin.

  • Titanium Creative
    • Finder of Elusive Bugs

    Here you go. To set up a plugin starting point.

    Create a folder called myplugin – or whatever you want to call it.

    make a php file in that folder called myplugin.php

    Then put this at the top of the php file within the php enclosing tabs.

    /*

    Plugin Name: My Plugin

    Plugin URI: http://www.MY-URL.com/MYPLUGIN

    Description: What does this plugin do? At this point, nothing I suppose.

    Author: MY NAME

    Author URI: http://www.MY-URL.com

    Version: 0.0.1

    License: GNU General Public License v2.0 (or later)

    License URI: http://www.opensource.org/licenses/gpl-license.php

    */

    Then zip that up and load it up to wordpress and you will have made your first plugin!!

    Let me know when you have gotten to that point.

  • Titanium Creative
    • Finder of Elusive Bugs

    Great! then you’ve crossed the biggest hurdles.

    These two pages will become your friends!

    http://codex.wordpress.org/Plugin_API/Action_Reference

    http://codex.wordpress.org/Plugin_API/Filter_Reference

    These are lists of the hooks you will use to edit your themes. ACTION hooks are used to run a script at a certain point along with whatever else is running. For example, you have a script to process a form and at the end you need to redirect to another page. You can “hook” that script to a point before the first headers are sent, or the script can “hook” the redirect to the appropriate place.

    add_action('wp_loaded', 'my_redirect_script');

    function my_redirect_script()
    {
    // wp_redirect('yada yada');
    }

    FILTER hooks deal with content and makes it editable before it is displayed. So, to put something before the content in a post you might:

    add_filter('the_content', 'my_content',1);

    function my_content($content)
    {
    $new_content = '<div>WHAT I WANT FIRST<img /></div>';
    $new_content .= $content;

    return $new_content;
    }

    You can also do things like:

    Hmmm… I was going to put together an example and I realized a couple of things.

    1) I was thinking of Genesis Framework with the structural hooks. You can work with a lot of the information on the standard WP hooks but it doesn’t look like they will help you here.

    2) Looks like you should think about making a copy of the archive.php or home.php or both depending on how you are sitting those pages up. Put them into a child theme and then make the changes you want there. WP will look for the archive template in the child theme first.

    Then you can use the hooks and filter to make further refinements. If you get really industrious you can add your own hooks into the template and use them for additional control.

    Sorry I went off into the weeds on that but you should still look at the hooks and filters they will really help a lot when it comes to making conditional and other changes to your site. I have been coding on Genesis so long I forgot some of the differences.

    Just be careful of using css to redesign the structure of your pages. That can lead to nightmare scenarios later on.

    Still happy to help if this leads you to any questions or thoughts.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.