Archive pages for custom post type

I decided to try using Beans for a client project, and so far I'm pretty happy with it. However, I've just run into something where I'm not getting what I expected based on the documentation.

I have a custom post type called "books", and I wanted to customize the "archive" page, which by default was displaying the title and entire post content for each post. I want to keep only the title of the post and an image that lives in a custom field associated with that post type, and I want them in a UIkit grid layout.

So, I created a file called "archive-books.php" in my child theme with the following:

<?php

// Your modifications if needed.
beans_remove_action( 'beans_post_content' );

add_action('beans_post_header_before_markup', 'beans_child_add_image_title');

function beans_child_add_image_title() {
    beans_add_attribute('beans_post', 'class', 'uk-grid');
    beans_add_attribute('beans_post_header', 'class', 'uk-width-3-4');

    $image = get_field('book_cover_image');
    ?>
    <div class="book-image uk-width-1-4">
        <a href="<?php the_permalink() ?>">
            <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
        </a>
    </div>
<?php
}

// Load the document which is always needed at the bottom of template files.
beans_load_document();

I expected to see something like this in the HTML

https://drive.google.com/file/d/0B7LKDxbPTj4NYUJWZnNJTXZKeHc/view?usp=sharing

for each post.

Instead, I see something like this:

https://drive.google.com/file/d/0B7LKDxbPTj4NNDdvYk5oOW8tbVk/view?usp=sharing

In other words, the beans_remove_action() seems to leave behind an empty div, and the beans_add_attribute() adds the "uk-grid" to that empty div, not the article (as I was expecting). Any suggestions as to what I'm doing wrong?

Thanks!

I'm trying to get the HTML to show up, but I guess that's impossible. I will try to upload screen shots of the code...

I just tried adding "beans_remove_action( 'beans_post_body' )" as well, and that seems to have solved the problem. However, I still don't understand why it was happening in the first place...

I spoke too soon. It seemed to work for a while, but somehow I changed something and suddenly the original problem is back: the empty "beans_post_body" div has returned and "uk-grid" is being attached to it, even though I still have "beans_remove_action( 'beans_post_body' )".

I'm baffled and frustrated.

More clarification: after further debugging, it seems that the "uk-grid" that I'm seeing is NOT being attached by the beans_add_attribute() in archive-books.php, but is instead coming along for the ride from my single-item post display which I've overridden in my functions.php.

So, it seems that beans_remove_action() is not completely removing my post content, and beans_add_attribute() is not adding the "uk-grid" to the article tag (data-markup-id="beans_post"). I still have no idea why...

Hi Michael,

I think this is what you are after:

<?php
/**
 * Example archive template.
 */

// Remove unecessary markup and content.
remove_all_actions( 'beans_post_body' );
beans_remove_markup( 'beans_post_body' );
beans_remove_action( 'beans_post_meta' );

// Added inner div for the grid and set post header grid class.
beans_wrap_inner_markup( 'beans_post', 'example_post_grid', 'div', array(
 'class' => 'uk-grid',
) );
beans_add_attribute( 'beans_post_header', 'class', 'uk-width-3-4' );

// Add custom image.
add_action( 'beans_post_header_before_markup', 'example_view_image' );
/**
 * Add custom image.
 */
function example_view_image() {
  $image = get_field( 'book_cover_image' );

 ?>
  <div class="book-image uk-width-1-4">
   <a href="<?php the_permalink() ?>">
     <?php if ( isset( $image['alt'], $image['sizes']['thumbnail'] ) ) : ?>
        <img src="<?php echo esc_url( $image['sizes']['thumbnail'] ); ?>" alt="<?php echo esc_html( $image['alt'] ); ?>" />
     <?php endif; ?>
   </a>
  </div>
  <?php
}

// Load the document which is always needed at the bottom of template files.
beans_load_document();

Note how we remove all actions attached to beans_post_body as well as the beans_post_body markup itself. Also note how we add a div for the grid inside the article div to prevent the box styling from breaking. Make sure you replace all the example with your own project prefix. I hope that helps!

Happy coding,

That works beautifully, though I would never have figured it out on my own. I didn't realize you had to remove markup as well as actions. Also, where is "beans_wrap_inner_markup" documented? I can't seem to find it...

Thanks for the help!

He Michael,

I am glad the snippet helped. It can be a bit tricky to understand everything at once but the more you use it, the better and easier it becomes. While the Documentation section covers most parts of the framework, it doesn't refer to all functions available but instead link to the Code Reference section in which you will find the "codex" for every single part of the framework for developers. The Code Snippet section is list some useful snippets you may use in various scenarios.

In the context of your question, there is an article in the documentation section for the Markup and attributes which explains how they work in Beans. If you scroll to Modifying markup and attributes which is what you want to do, you will see a link to the Code Reference for all the Beans HTML API functions available. There you will see the documentation for the beans_wrap_inner_markup() (see here).

I hope this help, happy coding!