Customize post view on index.php

Hi, For a blog page (index.php) I want to change the style of each post and have a different style for posts in different categories. Is there a way to override the excisting beans_post template in the posts loop with my custom template with keeping the loop, paging functionality from the index.php?

Thanks

Bas

Hey Bas,

It depends how different your HTML needs to be from the default Beans HTML. You can change, added remove or move things around using Beans HTML and Actions API's.

Alternatively, you may replace the entire loop with your own and you use Beans post fragment functions in your HTML. It is find to do so and justified if your HTML needs to be completely different than Beans default. Here is an example custom loop using some of Beans fragments functions:

beans_modify_action_callback( 'beans_loop_template', 'example_loop' );

function example_loop() {

  if ( have_posts() && !is_404() ) : while ( have_posts() ) : the_post(); ?>

    <article>
     <header>
        <?php
         beans_post_title();
         beans_post_meta();
        ?>
      </header>
     <div>
       <?php beans_post_content(); ?>
      </div>
    </article>

  <?php endwhile; else : ?>

   <div class="uk-alert">No Posts</div>

  <?php endif;

  // Display posts pagination.
  beans_posts_pagination();

}

Note how the posts pagination is added using beans_posts_pagination() to display it after the loop.

Hope that helps,

Thanks Thierry, That helps.

Bas

Hi Thierry,

I've been reading this and the "how do I build a page structure" threads with great interest. I've been trying to create a customized archive template file. I found some fragments that do some of what I want, but one thing still eludes me: 1. How do I get the name of the category to appear automatically? I did find some code that looks relevant in the breadcrumbs file, but I don't understand how to use it in my archive file.

Here is my archive.php file:

add_action( 'beans_header_after_markup', 'beans_child_view_add_title' );

function beans_child_view_add_title() {

  ?>
  <div class="uk-container uk-container-center">
    <h1>Category: <?php

   echo ('Name of Category');
    /* 
   hopefully define something like:
    beans_get_category_name();
    */

    ?></h1>
 </div>
  <?php

}

// Remove some post components.
beans_remove_action( 'beans_post_meta' );
beans_remove_action( 'beans_post_meta_tags' );
beans_remove_action( 'beans_post_meta_categories' );
beans_remove_action( 'beans_post_image' );
beans_remove_action( 'beans_post_title' );

// Trim the content.
add_filter( 'the_content', 'example_post_excerpt' );

function example_post_excerpt( $content ) {

 $my_excerpt = wp_trim_words( $content, 50, ' ... ' );
 $raw_title = get_the_title();
 $my_title  = "<h2>$raw_title</h2>";

  return $my_title . $my_excerpt . beans_post_more_link();

}

// Always add this function at the bottom of template file.
beans_load_document();

Here is the breadcrumb bit that looks relevant, namely the get_the_category bit:

// Single posts.
if ( is_single() && $post_type == 'post' ) {

    foreach ( get_the_category( $post->ID ) as $category )
    $breadcrumbs[get_category_link( $category->term_id )] = $category->name;

    $breadcrumbs[] = get_the_title();

}

And here is the URL of the page I am working on (the name of the category would be Canids):

http://wyntest.jryanphdlmhc.com/category/canids/

Thank you so much for any guidance you can provide !!

Hey Wyn,

You can get the archive title with WordPress Core function get_the_archive_title() (see documentation here).

Just a quick heads up, we have added the archive title to Beans Core (in this commit) which will be released in the next version. This change will be marked as important in the changelog since it affects backwards compatibility 😉

Have fun,

Awesome and easy-peasy. Thank you !

Best of all, get_the_archive_title() works for tags pages as well as category pages. (I have not yet tried to see if it works for archive-by-date pages as well = horse of a different color. I'm not sure if I'm even going to try to implement that.)

Um, small correction: the documentation for get_the_archive_title() is actually here: https://developer.wordpress.org/reference/functions/get_the_archive_title/

The link you provided went somewhere else. (Not exactly a page-not-found, but definitely a function-not-found.)

Thanks again, I look forward to using the beans version instead of the WP version when the next beans release comes out.

Hey Wyn, thanks for the heads up about the link, I updated my previous reply with the correct link 😉

Cheers,

Hi Thierry,

You're welcome! And BTW, you have the patience of a saint!

Cool beans... 🙂