Make content areas clickable on homepage
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
By default, the content areas on the homepage are not clickable. If you set a Featured Image for the corresponding page, that image will be displayed on the homepage but some users might not want to display an image. This tweak will make the content areas clickable with a few options.
The first option is to add a "read more" button at the bottom of each content area.
PHP
Locate the home.php file in /themes/chameleon/
Save an exact copy of this file to /themes/chameleon-child/
Locate the following code near line 55:
<?php the_content(''); ?>
Change it to this:
<?php the_content(''); ?>
<a href="<?php the_permalink(); ?>" class="read-more"><?php esc_html_e('Read More','Chameleon'); ?></a>
This will simply add a "read more" button" that will open the page:
If you prefer to not have the "read more" buttons, you can also make just the text or title link to the article. To make the paragraph beneath the title link to the page, undo any changes made to the home.php file from the instructions above.
Locate the following code near line 55:
<?php the_content(''); ?>
Change to this:
<a href="<?php the_permalink(); ?>" class="read-more">
<?php the_content(''); ?>
</a>
This will add a thin, rounded-corner border around the paragraph. Clicking anywhere within the border will open the page.
You can easily style this border, the background color, and the paragraph text with a little css. I also added opacity to the paragraph so that when hovered over, it will lighten in color. This is the default setting if an image were present and has a nice effect. Here's how you do it:
CSS
Locate your style.css file in /chameleon-child/
Add this code:
.service a.read-more {
border: 5px solid #C0C0C0;
background-color: #E0E0E0;
color: #606060;
}.service a:hover.read-more {
opacity: .8;
}
You can play around with the colors, border, and opacity levels but here's the end result:
To make the title only a link, undo any changes made to the home.php file from the instructions above.
Locate the following code near line 30:
<div>
<h3><?php the_title(); ?></h3>
Change to this:
<div>
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
