How to create custom Footer on Blog Page

[tuanphan]

To create a custom footer on Blog Page (Blog List + Blog Posts), you can follow these steps.

#A. Option 1: Use Footer Section
We will create a section in Footer, then show this section + hide other sections in Blog Page only.
#1. First, you need to edit Site Footer

and add a Section on top of Footer.

I will use a simple design on this section.

#2. Use this code to Website Tools > Custom CSS

/* hide footer top section on other pages */
footer.sections section:nth-child(1) {
  display: none;
}
/* Show top section - hide other sections in Blog Page */
body[class*="type-blog"] {
  footer.sections section:nth-child(1) {
  display: block;
}
  footer.sections section:nth-child(n+2) {
    display: none;
  }
}

#3. In case you want to apply this custom footer on Specific Blog Page Only
You can find Blog Page ID.
In my example, it is: #collection-6677756d03a4f15ba27ce9d8

Next, you need to change # in the ID to body. so new ID will be body.collection-6677756d03a4f15ba27ce9d8

Next, use this new code to Custom CSS box

/* hide footer top section on other pages */
footer.sections section:nth-child(1) {
  display: none;
}
/* Show top section - hide other sections in Blog Page */
body.collection-6677756d03a4f15ba27ce9d8 {
  footer.sections section:nth-child(1) {
  display: block;
}
  footer.sections section:nth-child(n+2) {
    display: none;
  }
}

#B. Option 2. Use Plugin
With plugin, you can create custom footer in Not Linked Page, then we will use code to get it from Not Linked Page and make it appears on Blog Page.

#1. Create a Page in Not Linked

Use Name/URL: Custom Blog Footer – /custom-blog-footer

#2. Next, design the page. Here I use a simple design.

#3. Install this plugin.

Plugin will give you some code to Code Injection Header/Footer

#4. Hover on Blog Page > Click Gear icon

Next, click Advanced > Page Header Code Injection

#5. Paste this code

<div data-wm-plugin="load" data-target="/custom-blog-footer"></div>

#6. Use this code to Custom CSS box

[data-target="/custom-blog-footer"] {
  display: none;
}
body[class*="type-blog"] {
  [data-target="/custom-blog-footer"] {
  display: block;
}
  footer.sections {
    display: none;
  }
}

#7. Use this code to Code Injection Footer, under code in step #3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
  if (detail.target !== '/custom-blog-footer') return;
  $('div.wm-load-container').insertBefore('footer.sections');
})
</script>