Modify WordPress Language

Hi Thierry

Just wondering... is it possible to use Beans to change some of Wordpress' default words used such as changing Continue Reading to Read on?

I'd really like to replace the comment reply text with icons etc.

Cheers in advance,

Hi Jason,

It depends what is the purpose, if it is to translate it then you can use a translating plugin or tool of your choice. Beans is fully translatable and the text domain is tm-beans.

If it is to change the text, you can use Beans output filter. All the text content in Beans can be easily modified, here is how it works!

First thing, you want to make sure you are in development mode (in Appearance->Settings). Then in the front end if you inspect Continue Reading you will notice that it looks like that:

<!-- open output: beans_post_more_link_text -->
Continue reading
<!-- close output: beans_post_more_link_text -->

In development mode, you can easily find the output ids. When you see that which you will also find for other text such as the post meta prefix text, it means you can use the filter which is {$output_id}_output to modify it. The dynamic part of the filter $output_id correspond to what is indicated in the snippet above, so to modify the read more text the filter is beans_post_more_link_text_output. See we take what is indicated in the HTML beans_post_more_link_text and append _output.

Let's use that to modify Continue Reading and make it Read on.

// Modify the read more text.
add_filter( 'beans_post_more_link_text_output', 'example_modify_read_more' );

function example_modify_read_more() {

   return 'Read on';

}

If you wanted to make your text translatable (when building themes or plugins), you could use the WordPress internationalization functions but I don't think it is your case (more on that here).

Keep in mind that there are a number of useful Code Snippets available, for instance the Modify the read more text is what you ere after 🙂

Happy coding,

Thanks Thierry

That worked perfectly.

There is one other piece of text that I'd like to change to an icon but it doesn't appear to be generated using output. I'm trying to change the reply link in the comments links footer but I have no output id to target.

Is there a way to do this?

Cheers Jason

Hi Jason,

You are correct to say so. As a rule of thumb, Beans doesn't re-add a filter if it already exists in WordPress even though in some cases we do. In this case WordPress as a filter called comment_reply_link which you can use. That said this WP filter isn't only for the text so you will have to re-add the li tag too. Here is what your code would look like:

add_filter( 'comment_reply_link', 'example_modify_comment_reply_link' );

function example_modify_comment_reply_link() {

 return '<li><i class="uk-icon-reply"></i></li>';

}

I agree that this isn't ideal and I made a note to add a Beans output filter for the text which is much easier.

Important: keep an eye on the update notes as once the output filter is added, you will probably have to remove the li tag from your filter callback.

Btw I am on a Mac and in System preferences -> Keyboard -> on the bottom clicked to open Show Keyboard, Emoji, & Symbol Viewers in menu bar. Then opened Show Emoji & Symbols and copied one of the icons there and just pasted it next to the Add a comment text.

Like so:

// Modify the "Leave a comment" text.
add_filter( 'beans_post_meta_item_comments_text_output', 'modify_leave_a_comment' );

function modify_leave_a_comment() {
   return 'Add a comment 😀';
}

A followup question. Sections that use a data-markup-id such beans_no_comment. Displaying "No comment yet, add your voice below!" and other areas. How do we use CSS to modify the style? I am guessing we could probably add it with the above filter similar to how we display widgets. Could you give an example? Thank you.

@paaljoachim as you correctly mentioned, the text is in a ` which has the markup idbeans_no_comment`. You can use that to add your one class as such:

beans_add_attribute( 'beans_no_comment', 'class', 'example-no-comment' );

Then you can easily style as such:

.example-no-comment {
 background: red;
}

Beans Core adds the minimum class possible to keep it as lean as possible. We made it super easy to add your own class as your can see above 🙂

Keep in mind that you can benefit a lot from all UIkit attributes and build pretty damn cool stuff. A quick and very simple example would be to replace beans_no_comment default class uk-text-muted with an uk-alert style. You would simply have to add the following and the magic happens:

beans_replace_attribute( 'beans_no_comment', 'class', 'uk-alert' );

This is to show that you really hardly need to add custom CSS as UIkit as a fantastic range available. You will find a lot more about this in Beans Documentation.

Thanks,

Hi Thierry,

I'm trying to use the above to remove the word 'Menu' that is appearing to the right of the hamburger in my off canvas menu button.

I'm targetting the output text with the following but nothing seems to be changing.

// Modify (remove)the off-canvas menu text
add_filter( 'beans_offcanvas_menu_button_text_output', 'modify_menu' );

function modify_menu() {

   return '';

}

I'm sure this wasn't even there before, don't know how it might have appeared. Any thoughts and suggestions would be most welcome.

Cheers.

Hey Jason,

If you inspect the button in your browser (in Beand dev mode), you will see that the ouput id is beans_offcanvas_menu_button (see here). Therefore the filter tag is beans_offcanvas_menu_button_output and not beans_offcanvas_menu_button_text_output.

In this case, you will also probably want to remove the icon small margin right which you can do as follow:

beans_remove_attribute( 'beans_primary_menu_offcanvas_button_icon', 'class', ' uk-margin-small-right' );

Happy coding,

Perfect, thanks Thierry.