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

Here is the HTML/PHP and CSS code for a part of my page


$product_pages_args = array(
    'meta_key' => '_wp_page_template',
    'meta_value' => 'page_library_html_content.php',
    'hierarchical' => '0'
$product_pages = get_pages( $product_pages_args );

foreach ( $product_pages as $product_page ) {
    $author_id =  get_post_field('post_author', $product_page->ID );
    $author_details = get_user_by( 'id', $author_id );
    $author_name = $author_details->first_name . ' ' . $author_details->last_name;  

    echo '<div id="posts" class="flex_100"><div class="posts_bar"></div>';
    echo '<div id="library_title"><a href="' . get_permalink( $product_page->ID ) . '">' . $product_page->post_title  . '</a></div>';
    echo '<div class="library-content">' . get_post_field('post_content', $product_page->ID ) . '</div>';
     echo '<div class="library-author">Tutorial Instructor:  ' . $author_name . '</div>';
    echo '<div class="library-author-av">' . get_avatar( $author_id , 32 ) . '</div></div>';;


#posts {
float: left;
width: 48%;
background-color: #FFF;
height: 300px;
margin-left: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
#posts:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0px;
left: 60%;
background-image: url(http://localhost/wordpress/wp-content/themes/Techyoucation%202014%20Wordpress%20Theme/images/html.png);
background-repeat: no-repeat;
background-position: center;
background-color: #39ADD1;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

Now with this code you can see that there is a box with the post tile and content (only post's with page type (page_library_html_content.php))

What I would like to do is show only the posts with the page type:

page_library_html_content.php page_library_css_content.php page_library_wordpress_content.php

and the background image in


will change depending on the page type of the page and the background color will change too.

Is this possible and how.


share|improve this question
I don't quite follow which part you have trouble implementing. Do you need to change your page retrieval to retrieve pages with multiple templates assigned or what? – Rarst Dec 28 '13 at 20:08
Sorry too many questions in one. What I need is 1) Retrieve posts from more than one page type. 2) Display different image for each result depending on the page-type the post is from 3) change the background color for each result depending on the page-type the post is from. - Thanks – aled2305 Dec 28 '13 at 20:41
Can you help me with this @Rarst – aled2305 Dec 28 '13 at 21:49

I've used Wordpress Conditional Tags to add a unique class or id to the containing div of the different page types. This could work well to change the background image/color for different types.

Also, Wordpress automatically adds a body class to the <body> tag for each page, so that could possibly be hooked into for said unique classes or ids.

share|improve this answer

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.