How To Modify Archive Template

Hi

Out of the box, my website is coming along really nicely but there is a couple of tweaks I want to make.

I’ve been currently setting up categories and tags but I would like to edit the way the archive page display posts and pages a are displaying differently. Firstly I want to remove the prefix to the category that is displayed so that it only displays ‘Petitions’. The example page is https://thesurgenetwork.net/category/petition

Secondly is there a way for the page to take up the full width as I don’t want to display the sidebar? I made a copy of the ‘archive.php’ file and removed the line for the sidebar. However, as shown in the screenshot below it there is still a huge gap on the right side of the page.

Everything such as the titles, text, and spacing (padding/margins) I can comfortably edit with CSS.

Will

Hello there,

To remove the word “Category” on archive page’s heading, you could try the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {

      if( $('.archive-title').length ) {
        var arvTitle =  $('.archive-title').text();
        var NewArvTitle = arvTitle.replace('Category: ', '');
        $('.archive-title').text(NewArvTitle);
      }

    });
  1. Update

To make the main content area full width, add this simple CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 992px) {
      .archive #primary.col-md-9 {
        width: 100%;
      }
    }

If you have site cache applied with a caching plugin like WP Super Cache, you’d need to flush it whenever new code addition. Because it usually prevents the code to take effect in the front end. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Let me know in a new topic if you have something we can help. Use one topic for one question to avoid endless conversation. You’re not limited to certain number of topic.

Have a nice day!

Regards,
Kharis

Cheers for the reply. The JavaScript works brilliantly :+1:

Is there a way to match the width of Elementor’s full-width setting for the archive pages?

I am sorry. Not really sure if it’s possible to accomplish. Because Elementor won’t load on archive page.

Regards,
Kharis