5
\$\begingroup\$

This is what I've done so far:

$block-height: 180px;

@mixin block {
    float: left;
    margin-bottom: 20px !important;
    margin-right: 20px !important;
    overflow: hidden;
}

#content h2 {
    height: 30px;
}

#top-bar {
    overflow: hidden;
}

.block-1 {
    @include block;
    width: 340px;
    height: 390px;
    h2 {
        color: #555;
        font-size: 28px;
        font-weight: 400;
        line-height: 120%;
    }
}

.block-2 {
    @include block;
    width: 340px;
    height: $block-height;
}

.block-3 {
    @include block;
    width: 160px;
    height: $block-height;
}

HTML:

<div id="content">
    <?php // Create and run custom loop
        $custom_posts = new WP_Query();
        $custom_posts->query('post_type=page_content&locations=Front Page&page_sections=Profile');
        while ($custom_posts->have_posts()) : $custom_posts->the_post();
    ?>
        <div class="block-1">
            <?php the_post_thumbnail('large'); ?>
        </div>
    <?php endwhile; ?>

    <?php // Start the main loop
        if ( have_posts() ) while ( have_posts() ) : the_post();
    ?>
        <div class="block-2 padding-top">
            <?php the_content(); ?>
        </div><!-- .entry-content -->

    <?php endwhile; // end of the loop. ?>


    <?php // Create and run custom loop
        $custom_posts = new WP_Query();
        $custom_posts->query('post_type=page_content&locations=Front Page&page_sections=Themep');
        while ($custom_posts->have_posts()) : $custom_posts->the_post();
    ?>
        <div class="block-2 border-top">
            <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <?php endwhile; ?>

        <?php // Create and run custom loop
            $custom_posts = new WP_Query();
        $custom_posts->query('post_type=page_content&locations=Front Page&page_sections=ThemeCL');
            while ($custom_posts->have_posts()) : $custom_posts->the_post();
        ?>
            <div class="float-left">
                <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail(); ?></a>
                <p><?php the_excerpt(); ?></p>
            </div>
        <?php endwhile; ?>

        <?php // Create and run custom loop
            $custom_posts = new WP_Query();
        $custom_posts->query('post_type=page_content&locations=Front Page&page_sections=Theme Child Right');
            while ($custom_posts->have_posts()) : $custom_posts->the_post();
        ?>
            <div class="float-right">
                    <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail(); ?></a>
                    <p><?php the_excerpt(); ?></p>
                </div>
            </div>
    <?php endwhile; ?>

    <?php // Create and run custom loop
        $custom_posts = new WP_Query();
        $custom_posts->query('post_type=page_content&locations=Front Page&page_sections=FromBlog');
        while ($custom_posts->have_posts()) : $custom_posts->the_post();
    ?>
        <div class="block-3 border-top">
            <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail(); ?></a>
            <p><?php the_excerpt(); ?></p>
            <p><?php echo get_post_meta($post->ID, "Other_Work", true); ?></p>
        </div>
    <?php endwhile; ?>

    <?php // Create and run custom loop
        $custom_posts = new WP_Query();
        $custom_posts->query('post_type=page_content&locations=Front Page&page_sections=Featured');
        while ($custom_posts->have_posts()) : $custom_posts->the_post();
    ?>
        <div class="block-2 border-top">
            <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail('large'); ?></a>
            <p><?php the_excerpt(); ?></p>
        </div>
    <?php endwhile; ?>

    <?php // Create and run custom loop
        $custom_posts = new WP_Query();
        $custom_posts->query('post_type=page_content&page_sections=Last');
        while ($custom_posts->have_posts()) : $custom_posts->the_post();
    ?>
        <div class="block-3 border-top">
            <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail(); ?></a>
            <p><?php the_excerpt(); ?></p>
            <p><?php the_meta(); ?></p>
        </div>
    <?php endwhile; ?>

    <?php // Create and run custom loop
        $custom_posts = new WP_Query();
        $custom_posts->query('post_type=page_content&page_sections=Lastest');
        while ($custom_posts->have_posts()) : $custom_posts->the_post();
    ?>
    <div class="block-7 border-top">
        <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail(); ?></a>
        <p><?php the_excerpt(); ?></p>
    </div>
    <?php endwhile; ?>
</div><!-- #content -->

Do you have any other tips for good practice?

\$\endgroup\$
6
\$\begingroup\$

It looks a bit like block-1's height is calculated from @block-height, in which case I would do that calculation rather than putting in a literal value. This way if you change @block-height, block-1 will adjust with it.

Beyond Sass and efficiency, I would also advise you to think again about the class names block-1, block-2 and block-3. If there will only be one of each of these on a page then use IDs rather than classes and name them after the content (eg. site-nav-block or article-block). If there will be more than one then give it a class name and name it after the content type (eg. nav-item or article-summary).

This will be much less confusing for a third party like myself to read, and indeed for you as your page gets bigger and requires more styling.

\$\endgroup\$

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.