Add READ MORE button

[tomaz92]

Hi,

I have news on my front page and want to have also READ MORE(BERI DALJE in my language) button at the end of news.
I have attached 2 pictures, first picture is how it looks on my page and the second picture it is how I want it to look with the button.
Thanks

Best Regards

Attachments:

You must be logged in to view attached files.

[admin]

Hi,
We can’t login your site and get this issue: https://prnt.sc/rlx1nq
However we checked your site on Frontend and you can do it via child theme follow this topic tutorial:

How to customize WordPress theme using Child theme

We see you are using Haru Recent News shortcode with layout carousel:
https://prnt.sc/rlx37o
So in this case the template you need customize is:
wp-content/plugins/haru-clarivo-core/templates/recent-news/carousel.php
You can add this code at where you want to show Read More button:

<div class="icon-readmore">
    <a href="<?php echo esc_url( get_the_permalink() ); ?>" title="<?php echo esc_attr( get_the_title() ); ?>" target="_self"><?php echo esc_html( 'Read More', 'haru-clarivo' ); ?></a>
</div>

Here is example to change:

<?php
/**
 * @package    HaruTheme
 * @version    1.0.0
 * @author     Administrator <admin@harutheme.com>
 * @copyright  Copyright (c) 2017, HaruTheme
 * @license    http://opensource.org/licenses/gpl-2.0.php GPL v2 or later
 * @link       http://harutheme.com
*/

extract( $atts );

$args = array(
    'posts_per_page' => $posts_per_page,
    'orderby'        => $orderby,
    'order'          => $order,
    'category_name'  => strtolower($category),
    'post_status'    => 'publish'
);

// If data_source = list_id
if ( $data_source == 'list_id' ) {
     $args = array(
        'posts_per_page' => $posts_per_page,
        'orderby'        => $orderby,
        'order'          => $order,
        'post_status'    => 'publish',
        'post__in'       =>  explode( ',' , $post_ids )
    );
}
$recent_news = new WP_Query($args);
// Enqueue assets
if ( $layout_type == 'carousel' || $layout_type == 'carousel_2' ) {
    wp_enqueue_style( 'owl-carousel', get_template_directory_uri() . '/assets/libraries/owl-carousel/assets/owl.carousel.min.css', array(),false );
    wp_enqueue_script( 'owl-carousel', get_template_directory_uri() . '/assets/libraries/owl-carousel/owl.carousel.min.js', false, true );
}
?>
<?php if ( $recent_news->have_posts() ) : ?>
    <div class="recent-news-shortcode-wrap <?php echo esc_attr($layout_type . ' ' . $el_class); ?>">
        <div class="haru-carousel recent-news-container owl-carousel owl-theme"
            data-items="<?php echo esc_attr($columns); ?>"
            data-items-tablet="2"
            data-items-mobile="1"
            data-margin="30"
            data-autoplay="<?php echo esc_attr($autoplay); ?>"
            data-slide-duration="<?php echo esc_attr($slide_duration); ?>"
        >
            <?php while( $recent_news->have_posts() ) : $recent_news->the_post(); ?>
            <?php $thumbnail_url = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) ); ?>
            <article class="recent-news-item">
                <div class="post-thumbnail">
                    <div class="post-image">
                        <?php the_post_thumbnail(); ?>
                    </div>
                </div>
                <div class="post-content">
                    <div class="post-meta">
                        <div class="post-meta-date"><?php echo date_i18n( get_option( 'date_format' ), strtotime(get_the_date('Y-m-d')) ); ?></div>
                        <div class="post-meta-author"><span class="post-by"><?php echo esc_html__('by', 'haru-clarivo') ?></span>
                            <?php printf('<a href="%1$s">%2$s</a>', esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), esc_html( get_the_author() )); ?>
                        </div>
                    </div>
                    <h3 class="entry-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                    <div class="post-excerpt">
                        <?php 
                            if ( has_excerpt() ) {
                                echo wp_trim_words( get_the_excerpt(), $excerpt_length, '...' );
                            } else {
                                echo wp_trim_words( get_the_content(), $excerpt_length, '...' ); 
                            }
                        ?>
                    </div>
                    <div class="icon-readmore">
                        <a href="<?php echo esc_url( get_the_permalink() ); ?>" title="<?php echo esc_attr( get_the_title() ); ?>" target="_self"><?php echo esc_html( 'Read More', 'haru-clarivo' ); ?></a>
                    </div>
                </div>
            </article>
            <?php endwhile; ?>
        </div>
    </div>
<?php else : ?>
    <div class="item-not-found"><?php echo esc_html__( 'No item found', 'haru-clarivo' ) ?></div>
<?php endif; ?>

Hope this help!

****
Regards,
HaruTheme

[tomaz92]

Hi, thanks.
I have added this code to .php file but it now only shows TEXT with link. It does not show button like on the other pages. I have also enabled access so now You will be able to connect to my website. If You can please fix this. Thanks

Attachments:

You must be logged in to view attached files.

[admin]

You need add custom CSS code in Appearance -> Customize -> Additional CSS or add it in child theme:

.recent-news-shortcode-wrap.carousel .icon-readmore a {
background-color: #75b239;
    background-image: none;
    color: #fff;
    font-weight: 600;
    padding: 8px 15px;
    text-transform: uppercase;
    border-radius: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.recent-news-shortcode-wrap.carousel .icon-readmore a:hover {
background-color: #336504;
}

How can get this code please see in this video tutorial:

****
Regards,
HaruTheme

[tomaz92]

thanks, now I have managed to do it 🙂
Now I would just want it to show in the next row?
So it would have 1 line of space after text and then the button for READ MORE.
thanks!!!

[admin]

So you need change the code to:

.recent-news-shortcode-wrap.carousel .icon-readmore a {
    background-color: #75b239;
    background-image: none;
    color: #fff;
    font-weight: 600;
    padding: 8px 15px;
    text-transform: uppercase;
    border-radius: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    display: inline-block;
    margin-top: 15px;
}

You need add

display: inline-block;
margin-top: 15px;

If you have time you can learn quick tutorial about CSS here:
https://www.w3schools.com/css/

Hope this help!

****
Regards,
HaruTheme

[tomaz92]

I have fixed it, have added style margin-top to carousel.php.
thanks

[admin]

Thanks for your feedback!
You should do it via child theme.

****
Regards,
HaruTheme

[Author]

Posts