Building the blog, Wordpress

WP | Fade article effect on wordpress post

Fade article effect on wordpress post

Adding visual interest and engaging design elements to your WordPress website is an essential part of creating a great user experience. One way to accomplish this is by adding a fade effect to your post articles, which can create an attractive and engaging visual transition for readers. In this blog post, we’ll show you how to add a fade effect to your post articles in WordPress using CSS and template file modifications.

All of the files I will be modifying later in this article are based on the structure of the starter theme from underscores.me.

Step 1: Modify the CSS

To add a fade effect to your post articles, we’ll be using CSS to add a linear gradient to the bottom of the first article entry. This gradient will gradually fade from transparent to white, creating a visual transition that draws the reader’s attention. Here’s the CSS code you’ll need to add to your stylesheet:

.first-entry.entry-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(transparent, white);
}

This CSS code creates a pseudo-element with a linear gradient background that fades from transparent to white. We’re positioning it at the bottom of the “.first-entry” element and giving it a height of 300 pixels to ensure that the entire first article entry is covered by the fade effect.

Step 2: Modify the template file

Based on your blog structure you need to modify one of the wordpress files, where you want to create this fade effect. In my case I’ve changed file index.php that is used for displaying content for pages. If you do not know what file to modify just simply google:

wordpress template hierarchy

Now that we’ve added the CSS code to create the fade effect, we need to modify the template file, where we render post articles, to trigger it on the first article entry. We’ll do this by adding a special class to the first article entry, which will be targeted by the CSS code we just added. Here’s the modified template file code:

<div class="<?= (in_array("first", $args) ? "first-entry":"")?> entry-content mt-2">

This code adds a conditional statement that checks if the “first” argument is present in the array of arguments passed to the content template part. If it is, it adds the “first-entry” class to the article entry, triggering the fade effect we created in the CSS.

To ensure better SEO performance, I have made the decision to remove all subheadings from the articles displayed on the main page. This is because including partial articles on the main page can potentially confuse search engines, leading to negative impacts on the page’s SEO. By removing subheadings, we can streamline the content and improve the page’s search engine visibility.

if (in_array("first", $args)){
  $content = get_the_content();
  $content = preg_replace('/<h([1-6])([^>]*)>(.*?)<\/h[1-6]>/i', '<span class="fs-$1 fw-bold">$3</span>', $content);
  $content = apply_filters( 'the_content', $content );//same as the_content() wp function
  $content = str_replace( ']]>', ']]&gt;', $content );//same as the_content() wp function
  echo $content;//same as the_content() wp function
}else
  the_content();

Step 3: Call the modified template file

Finally, we need to call the modified template file and pass the “first” argument to it to trigger the fade effect. Here’s the code you’ll need to call the template file:

get_template_part('template-parts/content', 'page', ["first"]);

This code calls the “content-page.php” template part file and passes the “first” argument to it, which triggers the fade effect on the first article entry.

If we want to display the entire blog post, we can simply exclude the third argument when calling the get_template_function.

Conclusion

By following these steps, you can easily add a fade effect to your post articles in WordPress, creating an attractive and engaging visual transition for readers. By using CSS and template file modifications, you can customize the effect to match your site’s design and make your content stand out. Give it a try on your site today!

Oh hi there 👋
I have a FREE e-book for you.

Sign up now to get an in-depth analysis of Adobe and Salesforce Marketing Clouds!

We don’t spam! Read our privacy policy for more info.

#css #php #programming #wordpress
Marcel Szimonisz
Marcel Szimonisz
MarTech consultant As a marketing automation consultant, I specialize in solving problems, automating processes, and driving innovation in my clients' marketing platforms.

I hold certifications in Adobe Campaign v6 (3x certified) and Salesforce Marketing Cloud (5x certified).

Additionally, I serve as a community advisor for Adobe Campaign, offering expert insights and guidance.

In addition to my professional pursuits, I also enjoy exploring various programming languages, CMSs, and frameworks, further enhancing my technical expertise and staying at the forefront of industry advancements.
Take a look at our subscription offering in case you are looking for a Marketing Automation Consultant.

Leave a comment

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

Similar posts that you may find useful

Wordpress CMS
Building the blog, Wordpress

WP | SEO plugin and google search console

less than a minute read

I have found one plugin that meets all my requirements and those are All three were satisfied with The SEO Framework. But also with this plugin I had some struggles, later I found same problems one may have with all other SEO plugins. The problem I had was that I was not able to read … Read more

Continue reading
Computer workplace
Building the blog, Wordpress

Beware! Work in progress

1 minute read

Page is in the works and, therefore you might see it changing time to time or perhaps sometimes experiencing weird errors. It’s all good it’s part of this project and the journey to get a blog and I am on the road to document it all. February 2022 Recaptcha v3 updated as spam still happened … Read more

Continue reading
Building the blog, Wordpress

WP | Adding reCAPTCHA to wordpress page

4 minutes read

As owner of a blog that is around for a while with any traffic, you will find sooner or later annoying amount of spam comments taking your blog by storm. If the akismet is not your cup of tea and you do not want to pay for possible license (commercial use), then I can show … Read more

Continue reading
Wordpress CMS tips
Wordpress

WP TIPS | Disable google analytics in admin mode

2 minutes read

As the title suggests, I have no intention of tracking my admin activity on the page. The idea is to disable Google Analytics when the admin is logged in. To simply disable Google Analytics, you just need to set the ‘ga-disable’ window variable to ‘true’. I suppose this can be added anywhere on the page, … Read more

Continue reading
Hello world!
Building the blog

Hello world!

1 minute read

This is the martechnotes’ first post. So why not start by saying something about who we are and what you will find on our blog. We are MarTech (Marketing Technology) professionals and we have been working for 8+ years in this industry. As my father used to say: Professional is somebody who gets paid for … Read more

Continue reading