Change Default phrases

Here are some examples of adjusting the default phrases used in the Beans Framework child themes.
Begin by enabling Development Mode.

Then go to the front page and the page where you see your posts. Right click the Posted on text and select Inspect (Element).


Styling with CSS

Open inspect element again and look at the data-markup-id name of what you want to adjust. NB! Some Data Markup IDs might already have a class name associated with it. Then use the existing class and style it. Many will not have one and will need to have a class name added.

For instance: data-markup-id=”beans_post_more_link”
and data-markup-id=”beans_post_meta_categories”.

beans_add_attribute( ‘beans_post_more_link’, ‘class’, ‘meta-read-more’ );
beans_add_attribute‘beans_post_meta_categories’‘class’‘meta-categories’ );

Then class and a then add a class name.

In your stylesheet be in CSS or your LESS stylesheet use the classes:
.meta-read-more and .meta-categories to style these areas.

.meta-categories {
background: red;
border: 1px solid #333;


Beans Core adds the minimum class possible to keep it as lean as possible.
NB! Some data markup id sections already have their own class. I added another class and notice form the above screenshot that I could just have used the class more-link instead of creating the new meta-read-more class.

Styling with UIkit

Instead of adding a CSS class one can instead add a UiKit attribute.

beans_replace_attribute( ‘beans_comments_title’, ‘class’, ‘uk-alert’ );


Add a CSS class

// Adds the class post_category to style the meta area after the content.
beans_add_attribute( ‘beans_post_meta_categories’, ‘class’, ‘post_category’ );

// Changes the default button color from .uk-button-primary to .uk.button-sucess:
beans_add_attribute( ‘beans_comment_form_submit’, ‘class’, ‘uk-button-success’ );

The blog page

Remove prefixes

A prefix is what we see in front of the post meta tag such as:
Posted On, By and (below the post preview) Filed under and Tags.

// Remove prefixes for date, author, categories and tags.
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' );

Modify prefixes

Instead of removing one can instead just rename them to something else. Such as:

// Modify the Date Prefix.
add_filter( 'beans_post_meta_date_prefix_output',
'modify_date_prefix' );
function modify_date_prefix() {
return 'The date ';

// Modify the Author prefix.
add_filter( 'beans_post_meta_author_prefix_output',
'modify_author_prefix' );
function modify_author_prefix() {
return 'The Author ';

// Modify the category "Filed under" text.
add_filter( 'beans_post_meta_categories_prefix_output',
'modify_filed_under' );
function modify_filed_under() {
   return 'Located in ';

// Modify the Tags "Tagged with" text.
add_filter( 'beans_post_meta_tags_prefix_output',
'modify_tagged_with' );
function modify_tagged_with() {
   return 'Tagged: ';


Modify the main words

Here is an example of renaming by author name to (for me by Paal Joachim to The author):

// Modify author text. Removes the author name and replaces with what you add below.
add_filter( ‘beans_post_meta_item_author_text_output’, ‘modify_author’ );
function modify_author() {
return ‘The author ‘;

Here you can see the difference between adjusting the main word vs adjusting the prefix:
Overwriting prefix and the author name =  beans_post_meta_item_author_text_output
Author will now show as The author.

Adjusting the prefix to become The author and then author name: beans_post_meta_author_prefix_output
Author will now for me show as The author Paal Joachim.

The post page

/*--------- Modify phrases in a post ----------*/

// Modify Posted on text.
add_filter( 'beans_post_meta_date_prefix_output', 'modify_posted_on' );
function modify_posted_on() {
return 'Posted ';

// Modify author text. Removes the author name and replaces with what you add below.
add_filter( 'beans_post_meta_item_author_text_output', 'modify_author' );
function modify_author() {
return 'The author ';

// Beside author: Comments text.
add_filter( 'beans_post_meta_item_comments_text_output', 'modify_comments_text' );
function modify_comments_text() {
return 'Comments text ';

Comments area

/* -------- Modify phrases in the Comments area ------ */

// Modify the "Leave a comment" text inside the post meta area in the blog and post page.
add_filter( 'beans_post_meta_item_comments_text_output', 'modify_leave_a_comment' );
function modify_leave_a_comment() {
return 'Leave a comment - Share your thoughts';

// Modify the "No comment yet, add your voice below!" text.
add_filter( 'beans_no_comment_text_output', 'modify_no_comments_yet' );
function modify_no_comments_yet() {
return 'No comment yet, add your voice below! - Be the first to add your thoughts';

// Modify the "Add a Comment" title text.
add_filter( 'beans_comment_form_title_text_output', 'modify_comment_title_text' );
function modify_comment_title_text() {
return 'Add a Comment - A thought...';

// Modify the "Comment *" text.
add_filter( 'beans_comment_form_legend_text_output', 'modify_comment_text' );
function modify_comment_text() {
return 'Comment * - Add some words';

// Modify the "Post Comment" text button.
add_filter( 'beans_comment_form_submit_text_output', 'modify_post_comment_button_text' );
function modify_post_comment_button_text() {
return 'Post Comment - Add your reply';

An example of what it looks like:

// Add CSS to Post Meta - before a post
// Adds the class post-meta that can be styled
beans_add_attribute( 'beans_post_meta', 'class', 'post_meta' );
Filed under: Learning

No comment yet, add your voice below!

Add a Comment

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

Comment *
Name *
Email *