WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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>";
share|improve this question
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
up vote 1 down vote accepted

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;
share|improve this answer
That did it, thanks! – Marvin Pollock Mar 4 '13 at 23:56

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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