0

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

HTML/PHP

<?php
$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 );
?>

<?php
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>';;

CSS

#posts {
float: left;
width: 48%;
background-color: #FFF;
height: 300px;
margin-left: 20px;
margin-top: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 

#posts:before

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

Is this possible and how.

Thanks

Improve this question
3
  • 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
    Commented Dec 28, 2013 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
    Commented Dec 28, 2013 at 20:41
  • Can you help me with this @Rarst
    – aled2305
    Commented Dec 28, 2013 at 21:49

1 Answer 1

Reset to default
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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