I recently wanted to add a comfortable way to automatically add users to a page within small boxes including information an an image. So I followed this tutorial an customized the code: http://www.wpbeginner.com/wp-tutorials/how-to-display-an-author-list-with-avatars-in-wordpress-contributors-page/

On the active page, which is using a horribly old and annoying framework by Pagelines, this works just fine. The elements are aligning just the way they should. (http://www.dreadfactory.de/testseite/)

But when I try to add excatly the same code to a simple page with a twentyTwelve Childtheme, the layout is messed up. It has to be some problem with the TwentyTwelve css, because when I remove the TwentyTwelve css import, the boxes are fine (But of course then the rest is messed up. ;) )

You can see how the code takes effect in TwentyTwelve here: http://it.marvin-pollock.com/test

Edit 1: Added page code

The page template so far is very simple:

Template Name: Profilseite
<?php get_header(); ?>

    <div id="primary" class="site-content" style="width: 100%">
        <div id="content" role="main" >
                <div id="authorlist"><ul><?php contributors(); ?></ul></div>
        </div><!-- #content -->
    </div><!-- #primary -->
<?php get_footer(); ?>

The code in functions.php

// --- Creates List of Users (Needs Plugin "user Photo") --- //
// --- To exclude a Profile set display_name = inactive --- //
function contributors() {
    global $wpdb;

    $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name <> 'admin' AND display_name <> 'inactive' ORDER BY display_name");

    foreach ($authors as $author ) {
            echo "<li>";
                echo "<a href='";
                the_author_meta('user_url', $author->ID);
                echo "'>";
                echo userphoto($author->ID);
                echo "</a>";
                echo '<div>';
                    echo "<a href='";
                    the_author_meta('user_url', $author->ID);
                    echo "'>";
                        echo "<h3>";
                        the_author_meta('first_name', $author->ID);
                        echo "</h3>";
                    echo "</a>";
                    echo "<a href='";
                    the_author_meta('user_url', $author->ID);
                    echo "'>";
                        echo "<h3>(";
                        the_author_meta('last_name', $author->ID); //TODO: Change to 'city'
                        echo ")</h3>";
                    echo "</a>";
                    echo "<br />";
                    echo "<p>";
                        the_author_meta('description', $author->ID);
                    echo "</p>";
                    echo "<br />";
                    echo "<a href='";
                    the_author_meta('user_url', $author->ID);
                    echo "'>";
                        echo "Termine und Kontakt ->";
                    echo "</a>";                
                echo "</div>";
            echo "</li>";
  • The issue is that te image isn't aligning left of the text? – Mike Madern Mar 4 '13 at 15:48
  • It's not just the image. The h3 tags for example are not shown correct. The whole box just seems to ignore most of the styles. – Marvin Pollock Mar 4 '13 at 16:00

It's because the TwentyTwelve theme has "clear: both;" set on H3 tags, which messes up the layout.

Try adding this CSS:

#authorlist h3 {
    clear: none !important;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.