Adjusting Post Meta

I will show how to adjust the post meta area that is seen before the post content.
To reorder, remove, add icons and add some styling. Making it look a lot better then the default that can be seen today.

The default post meta.
Posted on – date- , By – author – , Leave a comment, and below the content
Filed under: – category- , Tagged with: -tag-.

Beans-Post-default-meta

 

 

To reorder/add/hide post meta field.

Add the code into your functions.php file.

 

add_filter( 'beans_post_meta_items', 'post_meta_items' );
function post_meta_items() {
  return array(
        'date' => 10,
    // 'author' => 20, 
       'comments' => 30,
       'categories' => 40,
       'tags' => 50
   );
}

An alternate code:

add_filter( 'beans_post_meta_items', 'post_meta_items' );
function post_meta_items() {
// Remove
   // unset( $items['author'] );
   // unset( $items['comments'] );
// Add 
   $items['date'] = 10;
// $items['author'] = 20;
   $items['categories'] = 30;
   $items['tags'] = 40;
   $items['comments'] = 50;
return $items;
}

 

Adjust the above code by:
Add // for hiding a field. As I am showing with the above author.
Reorder the order in which each field is located.
Or add a field.

Here we see date, author, comments, categories and tags.
NB! By default the category and tag field is located below the content.

But we just added it into the above code having it automatically added into the post meta before the post content. At the moment we have the category and tag before AND after the content. We will remove the post meta after the content.

// An alternative example code to the above code to remove or add fields.
add_filter( 'beans_post_meta_items', 'beans_child_remove_post_meta_items' );
function beans_child_remove_post_meta_items( $items ) {
    // Remove
    unset( $items['author'] );
    unset( $items['comments'] );
    // Add 
    $items['categories'] = 20; 
   return $items;
}

 

Right click the post meta in your browser and select Inspect and look at the data-markup-id. (If you do not see the data-markup-id then go to Appearance -> Settings and turn on Enable development mode.) Notice the beans_post_meta_categories and beans_post_meta_tags.

Here is the code we need to add to functions.php:

// Remove the post meta categories below the content.
beans_remove_action( 'beans_post_meta_categories' );

// Remove the post meta tags below the content.
beans_remove_action( 'beans_post_meta_tags' );

 

Adding icons before each post meta field

The result:

 

Beans-post-meta-icons

The code to add:

 

add_action( 'beans_post_meta_item[_date]_prepend_markup', 'post_meta_date_icon' );
  function post_meta_date_icon() {
    ?><i class="uk-icon-clock-o uk-text-muted uk-margin-small-right"></i><?php
}

// Add icon - before author text
add_action( 'beans_post_meta_item[_author]_prepend_markup', 'post_meta_author_icon' );
  function post_meta_author_icon() {
    ?><i class="uk-icon-user uk-text-muted uk-margin-small-right"></i><?php
}

// Add icon - before Leave a comment text
add_action( 'beans_post_meta_item[_comments]_prepend_markup', 'post_meta_comments_icon' );
   function post_meta_comments_icon() {
     ?><i class="uk-icon-comment-o uk-text-muted uk-margin-small-right"></i><?php
}

// Add icon - before Filed under text
add_action( 'beans_post_meta_item[_categories]_prepend_markup', 'post_meta_folder_icon' );
   function post_meta_folder_icon() {
     ?><i class="uk-icon-folder-o uk-text-muted uk-margin-small-right"></i><?php
}

// Add icon - before Tagged with text
add_action( 'beans_post_meta_item[_tags]_prepend_markup', 'post_meta_tags_icon' );
   function post_meta_tags_icon() {
     ?><i class="uk-icon-tags uk-text-muted uk-margin-small-right"></i><?php
}

Information: https://getuikit.com/v2/docs/icon.html

uk-icon I found at the above resource.
uk-text-muted adds a grey color.
uk-margin-small-right adds a little padding to the right.

For various options check the above docs page.

 

CSS Styling.

Right click the post meta area and select Inspect. Notice the CSS classes such as uk-article-meta uk-subnav uk-subnav-line. These are the default classes. I decided to add my own CSS class to have better control over the styling.

 

Beans-new-css-class WordPress

 

beans_add_attribute( 'beans_post_meta', 'class', 'post-meta' );


The code:
data-markup-id: beans-post-meta
Adds CSS class
post-meta (post meta is the name I gave it.)

The result is that I added the class post-meta so that I can style the full post meta area.

Here is the various CSS I added to the style.css:

/* Each post meta list item */
 .post-meta > li{
 font-size: 14px !important;
 color: #415555;
 padding-right: 10px;
 width: 88px;
 }

/* I hide the thin divider line between each post meta field. */
 .post-meta > li:before {
 display: none;
 }

/* The full post meta area. */
 .post-meta {
 padding: 1px 0 7px 0;
 margin: 5px 0 25px 0;
 }

/* Each icon. */
 .uk-icon-clock-o,
 .uk-icon-user,
 .uk-icon-comment-o,
 .uk-icon-folder-o,
 .uk-icon-tags {
 color: rgba(0, 128, 0, 0.68) !important;
 display: block;
 font-size: 20px;
 padding: 4px;
 }

 

I also removed the prefixes before the various post meta fields.
Code added to the functions file.

beans_remove_output( 'beans_post_meta_date_prefix' );
beans_remove_output( 'beans_post_meta_author_prefix' );
beans_remove_output( 'beans_post_meta_categories_prefix' );
beans_remove_output( 'beans_post_meta_tags_prefix' );

 

The result:

Beans-post-meta-nicer-icons

 

Here is a more detailed way to adjust prefixes:

// Adjusts the Prefix of the single pages for: category, tag, author, post archive and taxonomy archive titles
function my_theme_archive_title( $title ) {
if ( is_category() ) {
$title = single_cat_title( '', false );
} elseif ( is_tag() ) {
$title = single_tag_title( '', false );
} elseif ( is_author() ) {
$title = '<span class="vcard">' . get_the_author() . '</span>';
} elseif ( is_post_type_archive() ) {
$title = post_type_archive_title( '', false );
} elseif ( is_tax() ) {
$title = single_term_title( '', false );
}
return $title;
}
add_filter( 'get_the_archive_title', 'my_theme_archive_title' );

 

Code from the child theme Banks from Theme Butler.

// Post meta
beans_remove_action( 'beans_post_meta' ); 
beans_remove_action( 'beans_post_meta_tags' ); 
beans_modify_action( 'beans_post_meta_categories', 'beans_post_header', null, 7 );

Remove post meta = Removes the post meta row.
Remove post meta tags = Removes the post meta tags located below the post preview.
Modify action = Removes categories below the post preview into the post header area.

 

 

Check out how to change default phrases.

 

Resources:
https://community.getbeans.io/discussion/how-to-show-post-excerpts/

community.getbeans.io/discussion/hemove-comments/
community.getbeans.io/discussion/new-user-beans-wordpress/

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *
Website