Fade poat article effect in wordpress custom theme

Building the blog, Wordpress
3 minutes read

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!

Wordpress CMS
Building the blog, Wordpress

Adding SEO plugin and google search console to the wordpress blog

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 […]

Continue reading
Comment form with bootstrap
Building the blog, Wordpress

Style WordPress comments with bootstrap 5.1 framework

4 minutes read

With creating your own WordPress theme you will have to style comment section. For that purpose you will have to add a bit of own styling. In my case I used bootstrap CSS framework that makes life easier for programmers that are not that proficient with front end styling. This will make sure that your […]

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 […]

Continue reading
Building the blog, Wordpress

Add reCAPTCHA to wordpress page form: get rid of the spam

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 […]

Continue reading
Programing editor
Building the blog

Building blog from “scratch”

1 minute read

This is the first post from the series on how I built, or more precisely on how I will build this blog. Before you will start to build your own blog, well right after you chose your hosting provider and buy your domain, you will have to decide technology, CMS or blogging platform. Of course […]

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 […]

Continue reading