Grow your CSS skills. Land your dream job.

Content Blocks In WordPress?

  • # February 21, 2009 at 7:48 pm

    Hello,

    Does anyone know how to do content blocks in WordPress? What I mean by this is I want to have 4 boxes on the page that have a picture then some content then a link for more info. I know I could easily do this statically but I need it to be editable from WordPress.

    Anyone have another alternative than just displaying specific post in that box and just having a post for each box?

    # February 22, 2009 at 1:04 am

    maybe this?

    http://wefunction.com/2008/10/tutorial- … wordpress/

    # February 23, 2009 at 6:39 pm

    I have recently done something similar (I think) for the reworking of a client’s website. You can see on this page http://preview.fraserhouseclinic.co.uk/about/our-team/ that there are six blocks. NB This site is not yet live. There are a few rough edges. All constructive criticism is welcome.

    Each block has an image, a title and a description. Each block represents a ‘child page’ of the Our Team page – if you add another page under Our Team another block automatically appears. The title of the block is the title of the child page. The image is actually derived from the title as well. The description is a custom field.

    The first thing I did was create an ‘Our Team’ template. This template drives the Our Team page. Inside the template I created a loop using query_posts to find all the child pages of the current page. Inside this loop I created my block, adding title, image and description.

    <?php query_posts("post_type=page&post_status=publish&post_parent=$post->ID&orderby=menuorder&order=asc&showposts=99"); ?>

    This selects only pages that are published who’s parent is the current page. We order them by menuorder to allow us to tweak the ordering manually in the admin. We also show up to 99 posts to override the site’s default limit of 5 posts per page.

    <?php if (have_posts()) : while(have_posts()) : the_post(); ?>

    This is (in WordPress lingo) "The Loop"! Inside we have access to all the standard post tags like title, permalink and content.

    <a href="<?php the_permalink() ?>" title="<? the_title_attribute() ?>">
    <img src="<?php bloginfo(‘template_url’) ?>/style/images/team/<?php echo $post->post_name ?>.jpg" alt="<?php the_title_attribute() ?>" />
    </a>

    Here I cheated and used the page slug (the bit that makes up the url) as the name of image. This saved me from having to use an attachment.

    <h4><a href="<?php the_permalink() ?>" title="<? the_title_attribute() ?>"><?php the_title() ?></a></h4>

    Nice and simple. This is the title with a link to the sub page.

    <p><?php echo get_post_meta($post->ID, ‘role’, true) ?></p>

    The last bit of magic, I used a custom field on the child pages to allow the client to specify the person’s role. It is also used in the child pages themselves, as they also have a (different) custom template.

    <?php endwhile; endif; ?>

    Finally, close the loop. That’s it your template is done! Hope you are able to understand that and make use of it in your WordPress theme. One of the reasons I have come to love using WordPress is it’s flexiblity and I think this is a good demonstration of it.

    Regards
    Dave

    # February 25, 2009 at 4:36 pm

    Think this could be done on function.php if you know php coding.

    When the appropriate code is added to that file a little sub tab called ‘theme settings’ appears in our wp back end.

    Once you add some input fields and what not you can easily insert content directly into elements like <p> and <img>.

    Im not a php coder so I cant help you with that, but I saw this being done on some of the wordpress themes at themeforest.net (check out the best selling one).

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".