Post Page Template

Hi There,

I'm trying to create a page template that will pull in blog posts of a certain category. Would there be an example template that I could use for this?

Hi Deborah,

How about simply linking the category view? An example would be Beans demo Uncategorized which shows all the posts whith the Uncategorized posts. To view a category, you may go to your admin->posts->categories, hover over any category and click view.

Let me know if that isn't what you are after, in which case it would be great to have a bit more details about what you want to achieve.

Thanks 🙂

mmm I'm not sure this is what I need.

I have 3 different blog post categories, and each one needs to be displayed on a different page. Therefore I need to create 3 different page templates.

If there is an easier way to do this I'd be open to suggestions?

If you could show an example of a page template that does this that would be great.

Hey Deborah, I am not sure I understand what you are after. When you create a category, it is automatically accessible via a url. For info the default template file for categories is the core category.php (read more about WordPress template files).

It doesn't make sense to create 3 different page templates unless you want a specific layout for each cagetory, in which case please provide a mockup for each layout.

If you simply need to show all the posts for a specific category, please refer to my previous reply.

I need a specific layout for each page, thats why I need a different template for each one. At the moment I just need an example of how to pull in category specific posts into a page template.

Hey Deborah, that makes more sense 🙂 Here is a sample-template.php which shows how to add your own query in your page templates:

<?php
/* Template Name: Sample Template */

add_filter( 'beans_loop_query_args', 'beans_child_view_query_args' );

function beans_child_view_query_args() {

 return array(
   'category_name' => 'your-cat-slug',
   'paged' => get_query_var( 'paged' )
 );

}

// Load the document. Always Keep this at the bottom of the page template.
beans_load_document();

You would replace 'your-cat-slug' with your own category slug (read more about the category parameters available). You may add any query parameters in the array really. This doesn't only apply specifically to categories, you can apply the same logic in any page template to query posts from a custom post type etc.

Keep the 'paged' parameter for the posts pagination to work correctly.

Thanks,

Hi Thierry, that worked a treat. However I now need to style the page template and as I'm new to using Beans I'm not sure where in the code do I insert the html?

Hey Deborah, it is a bit difficult to advise whithout seeing what you are after. The best advise I could give is to go though Beans HTML API documentation which explains how to modify markup and attributes and add extra HTML.

If that doesn't make 100% sense to you, don't sweat it, it will come over time. What you need to know is that every single block and markup on the page can be modifying or removed and you can add any extra HTML anywhere.

If you send me a wireframe or explain a bit more in details what you want on the page, I will happily help you putting the code tegether in your page template 🙂

Thanks Thierry, you're being super helpful.

Here is the page that I'm trying to put together: http://s10.postimg.org/br3a2cf55/post_page.png

There are two pages, one for cpt and one for dubai. Both displaying different job listings. My thinking was a blog page for each with different categories.

The code you sent through worked great, but I need to be able to style the page, and I'm not familiar with how to do that using beans.

Thanks again

Hey Deborah,

Thanks for sending the design through. This is still a bit vague for me to give you advise, where exactly are you stuck? Keep in mind that I can't see where you are at and what you have already done.

Thanks,

Hi Thierry,

At the moment the blog page is looking like this: http://s11.postimg.org/xsi2w6ddf/blog_page.png I need it to look like this: http://s10.postimg.org/br3a2cf55/post_page.png

I'm not sure how to implement HTML into the template so that I can style with CSS.

Thanks Deb

Hi Deborah,

I am not really sure how you got to http://s11.postimg.org/xsi2w6ddf/blog_page.png but I am going to give you an answer assuming you have Beans default starter child theme installed with not other modification than the code previously given in this conversation.

Based on the layout you want to achieve, you need the following modifications to the post HTML (it seems like you are using the "post" post type for your "positions").

• Remove post meta.
• Remove the post images.
• Remove the articles uk-panel classes.
• Add the article dividers.
• Trim content and add call to action (I will let you add the href according to your need).

Here is the code to add in your page template, always before beans_load_document():

// Remove post meta.
beans_remove_action( 'beans_post_meta' );
beans_remove_action( 'beans_post_meta_tags' );
beans_remove_action( 'beans_post_meta_categories' );

// Remove post image.
beans_remove_action( 'beans_post_image' );

// Remove article box styling.
beans_remove_attribute( 'beans_post', 'class', 'uk-panel' );

// Add article divider.
add_action( 'beans_post_after_markup', 'example_article_divider' );

function example_article_divider() {

 ?><hr class="uk-article-divider" /><?php

}

// Trim the content and add cta link.
add_filter( 'the_content', 'example_troncate_content' );

function example_troncate_content( $content ) {

 ?>
  <p><?php echo wp_trim_words( $content, 100, '...' ); ?></p>
 <p><a href="#" title="Apply for position">Apply for position</a></p>
  <?php

}

From there you may use CSS to do the final styling touches.

When it comes to the header part, a good solution is to use ACF and add your own HTML. There is quite a long conversation going on about this which will sure help 🙂

Hope that helps,

Thanks very much Thierry, that worked like a charm.

I would like to put a header slider into this template, just above the posts. The header slider would come from revolution slider, so that would be a shortcode. I've used the following in other page templates in the theme, (see code below)

echo do_shortcode('

    <div class="philosophy">[rev_slider alias="philosophy"]</div>
    <div class="wfu-slider">[rev_slider alias="work-for-us"]</div>
    <div class="wfu-content">
    <p style="color: #ffffff; font-size: 25px;">SEKARI <span style="font-weight: bold;">GALLERY</span></p>
    </div>
    <div class="image-gallery">[ess_grid alias="life gallery"]</div>

');

but struggling to find out where in the above code that you gave me, to place this. where in the template would I put the code?

Thanks again for all your help.

Hi Deborah,

The good news is that you can really add it anywhere. I have mentionned how Beans hooks work many times before in other discussions on the forum and it is also explained in Beans HTML API documentation but I am going to explain it again here 🙂 Pretty much all markup have dynamic action hooks firing around it as follow:

• {$markup_id}_before_markup, fires before the opening markup.
• {$markup_id}_prepend_markup, fires after the opening markup (not available for selfclosed markup).
• {$markup_id}_append_markup, fires before the closing markup (not available for selfclosed markup).
• {$markup_id}_after_markup, fires after the closing markup.

We have made it simple to find Markup IDs, you’ll need to first enable Beans development mode in your WordPress Admin->Appearance->Settings. Once the development mode is enabled, the Markup ID’s are output in a data-markup-id tag in the front-end, so you just have to inspect the page using your browser inspect and all markup ids will be displayed.

To take your code as an example, here is an example how you would add it just after the header closing tag.

add_action( 'beans_header_after_markup', 'example_rev_slider' );

function example_rev_slider() {

  ?>
  <div class="philosophy"><?php echo do_shortcode( '[rev_slider alias="philosophy"]' ); ?></div>
    <div class="wfu-slider"><?php echo do_shortcode( '[rev_slider alias="work-for-us"]' ); ?></div>
   <div class="wfu-content">
     <p style="color: #ffffff; font-size: 25px;">SEKARI <span style="font-weight: bold;">GALLERY</span></p>
    </div>
  <div class="image-gallery"><?php echo do_shortcode( '[ess_grid alias="life gallery"]' ); ?></div>
 <?php

}

You may add the snippet above in your child theme functions.php. If you want to apply it to specific views, you may add conditional tags) in the example_rev_slider() function or add the snippet in a specific template file.

Hope that helps,

Thats perfect, thanks very much