Creating a blog page layout part 2

Adjusting the post preview elements of the blog page.

The default view of blog page post in the official Beans child theme.

Beans-child-theme-default-blog-page

 

Modifications
Most of the below code is to be added into the child theme functions.php file.
It can instead be added to the index.php file. The index.php can control the blog page.

Featured image
The featured image is very big so I will make it smaller with the following code:

/* --- Resize featured images seen on the blog page: 
https://community.getbeans.io/discussion/default-featured-image-size/ --- */

add_filter( 'beans_edit_post_image_args', 'example_post_image_edit_args' );
function example_post_image_edit_args( $args ) {
 return array_merge( $args, array(
 'resize' => array( 300, true ),
 ) );
}

Adjust the 300 number to what fits in with your blog page.

 

Excerpt
As I do not want to see the full post in the blog page I will add a code that creates an excerpt:

// Blog page Excerpt
// https://community.getbeans.io/discussion/how-to-show-post-excerpts
add_filter( 'the_content', 'beans_child_modify_post_content' );
function beans_child_modify_post_content( $content ) {
// Stop here if we are on a single view.
if ( is_singular() || is_admin() ) {
return $content;
}

// Return the excerpt() if it exists other truncate.
if ( has_excerpt() )
$content = '<p>' . get_the_excerpt() . '</p>';
else
$content = '<p>' . wp_trim_words( get_the_content(), 40, '...' ) . '</p>';

// Return content and readmore.
return $content . '<p>' . beans_post_more_link() . '</p>';
}

There are some variations of the above code. Switch out is_singular() || is_admin() with !is_archive()

Adjust the number 60 to what fits in with your blog page.

Excerpt: Adjust Continue reading to Read more
The excerpt code automatically adds the default Beans Continue reading >> text link below the excerpt. To adjust the words the following code is needed.

/* Modify Continue reading text link to Read more.
https://community.getbeans.io/discussion/modify-wordpress-language/ */
add_filter( 'beans_post_more_link_text_output', 'example_modify_read_more' );
function example_modify_read_more() {
 return 'Read more';
}

Instead of it now saying Continue reading it will now say Read more >>

 

Excerpt: Adjust the >> to … (dots).
here is the code to adjust the >> to .. (dots or anything else).

/* Modify >> to ... (dots).
https://community.getbeans.io/discussion/modify-wordpress-language/ */
beans_remove_markup('beans_next_icon[_more_link]');
beans_add_filter('beans_post_more_link_text_output', 'add_dots_after_continue_reading' );

function add_dots_after_continue_reading($continue_reading_text) {
   return $continue_reading_text . '...';
}

An alternative to the above code for adjusting the >> to …

// https://github.com/ThemeButler/tbr-totem/blob/master/functions.php and https://getuikit.com/docs/icon
beans_replace_attribute( 'beans_next_icon_more_link', 'class' , 'angle-double-right', 'long-arrow-right' );

 

 

Move image up and beside the excerpt text.
Right now the the image is above the excerpt. I want to float the image to the left with CSS and have the excerpt to the right. In the style.css I added:

.tm-article-image {
 float: left;
 padding-right: 20px;
 margin: 0;
}

.tm-article-image is the class I noticed is used. I right clicked the image in the browser and selected Inspect. I could then look at the html on the left and the CSS on the right. I could then find the tm-article-image class. I copied the code into the style.css and adjusted it to what you see above.

Body font-size.
I added the following to my style.css.
(As the default font is too small.)

body {
  margin: 0;
  font-size: 16px;
}

The result up to this point should look something like this:

beans-child-theme-adjusting-blog-page

 

Changing read more…text into a button.
Add UiKit button to the Read more link.
Code from Fast Monkey child theme index.php to add a read more button.

beans_add_attribute( 'beans_post_more_link', 'class', 'uk-button uk-button-primary uk-button-small' );

Add attribute beans_post_more_link is a data-markup-id.
Add CSS class.
Adds the UiKit uk-button uk-button-primary and uk-button-small.
Adds a button that is blue and small. getuikit.com/v2/docs/button.html

 

An option to add my own custom CSS class.
I took out the Uk buttons code and replaced it with a CSS class.

beans_add_attribute( 'beans_post_more_link', 'class', 'read-more-btn' );

The CSS I added to style.css for the button is the following:

/* Read more button. */
.read-more-btn {
 background: #0db40d;
 border-radius: 5px;
 padding: 6px;
 color: white;
 box-shadow: 1px 1px 1px 0px rgba(50, 50, 50, 0.55); /*https://css3gen.com/box-shadow/ */
}

.read-more-btn:hover {
 background: #069006;
 border-radius: 5px;
 padding: 6px;
 color: white;
 text-decoration: none;
 text-shadow: -1px 0px 1px 0px #ccc;
}

 

Moving the Post title to right above the excerpt.
Modify the beans post title and place it just before the post content. Prepend is just before and inside the same div as the post content.

beans_modify_action( 'beans_post_title',     'beans_post_content_prepend_markup', 'beans_post_title' );

Post Meta
For instance: date, author, comments are post meta seen before the post content. Then Category and tags post meta after.

To remove post meta before the post content:

beans_remove_action( 'beans_post_meta' );

 

To rearrange the post meta.

/* For a better way of rearrange the post meta. 
https://community.getbeans.io/discussion/how-to-re-arrange-the-meta-desciption-items/ */
add_filter( 'beans_post_meta_items', 'sort_meta_items' );
function sort_meta_items( $meta ) {

$meta = array (
 'date' => 20, // priority
 //'author' => 10, // priority
 //'comments' => 30, // priority
 'categories' => 40,
 'tags' => 50
 );

return $meta;
}

Above we have date, author, comments, categories and tags. NB! Comment out what you do not want to show. For instance I commented out author and comments. Categories and tags are now seen in two places up above the post preview along with the other post meta and below the text and image.

 

Remove the bottom post meta – Categories and Tags.

// 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' );

Remove post meta prefixes. It will remove the extra words around the post meta.

// Remove prefixes:
// Date: "Posted on" Category: "Filed under" Tags: "Tagged with".
beans_remove_output( 'beans_post_meta_date_prefix' );
beans_remove_output( 'beans_post_meta_categories_prefix' );
beans_remove_output( 'beans_post_meta_tags_prefix' );

 

The result up to this point looks like this:

beans-child-theme-adjusting-blog-page-2

NB! It is a good idea to move the code that belongs to the blog over into a new index.php file as it will free up space in the functions.php file for other code.

Create the index.php and have it begin with  <?php then add in the code.
The last code in the file should be:

 // Load beans document
 beans_load_document();

Another option is to use Blog grid layout.

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