Insert a floating widget within a blog post content

  • Hendryk


    Hi there,

    I’d be very glad if you can help me a little on that – maybe I missed out something? Couldn’t find it through search …

    I created a custom post type and try styling it to my needs using custom fields (added through the Advanced Custom Fields Plugin) and inserting a php-widget to the action hook graphene_before_post_content. The widget will simply display an image that was selected in the custom field. So far so good – my code works as expected. Though: the image will only display *before* the actual blogpost (resp. my custom post type), unable to let it float right (as if I inserted it in the TinyMCE editor and chose to let the text surround it on the left). Using Firebug I find out that to any PHP widget I add in the action hook the class “clearfix” is added. If I would be able to remove the class from this widget, it would display just as desired.

    The question now is: Do I need to find a way removing the class clearfix from the widget or would I have to add a separate class to the inserted code (in a div-tag?) which I can let the image float on the right of the main content? And if, what CSS would I have to use?

    If I need to add more details, just ask. (Though I think details about the custom field is not necessary, as this would be the same if I added it on a post or page not using custom fields, etc.)


    Kenneth John Odle

    my code works as expected. Though: the image will only display *before* the actual blogpost (resp. my custom post type),

    Well, yeah, because that’s where the action hook is inserted into the code.

    What is it you are trying to insert? If it’s an image, why not just insert it into the content of your post?

    If it’s the same image you want to insert in each blog post, then I think you need a different approach. Try the Shortcode Exec PHP widget, which will allow you to define php, html, css, or text in a shortcode, which you can then insert just about anywhere.


    What is it you are trying to insert? If it’s an image, why not just insert it into the content of your post?

    Because it will be a multi-user “blog” where the authors should’nt be much concerned about the styling of their posts and to make sure all the posts from the different authors look similar. Most post authors won’t know anything about HTML or how to style the image to display in the correct position. It’s like making a form they can just fill out and the styling will be done through the theme and the custom fields inserted to the custom post type (child theme template for the post type).

    It will be a different image each post (to be more precise: it will be a book-cover corresponding to the post that will announce it). The content of the PHP-widget itself (unstyled) looks like:

    $attachment_id = get_field('cover');
    $size = "medium"; // (thumbnail, medium, large, full or custom size)

    $image = wp_get_attachment_image_src( $attachment_id, $size );
    <img src="<?php echo $image[0]; ?>" />

    I currently work on customizing the above code that the output will be something like:

    <div style="width: 224px" class="wp-caption alignright" id="attachment_46"><a rel="attachment wp-att-46" href=""><img width="214" height="300" alt="Alternativtext" src="" title="Test-Buchcover" class="size-medium wp-image-46"></a><p class="wp-caption-text">Beschriftung</p></div>

    which would be the html-output if I just inserted the image within the content of my post. So, the PHP-Part (inserting the ID’s and things alike) is not the problem – I will manage that. But I wanted to have the widget “floating” – as if I inserted the image within the post content.



    The widget code gets surrounded by these tags… where I think the class “clearfix” is my problem. Any way to remove or override it?

    <div id="execphp-6" class="sidebar-wrap clearfix widget_execphp">
    <div class="execphpwidget">





    Update: I now put my php-code it into the template file I created in my child theme for my custom post type “ebook” (loop-ebook.php) just before

    <?php /* The full content */ ?>
    <?php the_content(); ?>

    I copied loop-single.php as basement for my loop-ebook.php. I just don’t know if that is a clever solution – I probably will have to create this file new when I update to the next version of the graphene-theme? So, I guess doing this through the action-hook would be more clever – but I couldn’t find a way around the clearfix class which is obviously added to all widgets 🙁

Viewing 5 posts - 1 through 5 (of 5 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum