[Support request] Create Custom Category PHP Template + WP Show Posts (WPSP)

Home Forums Support Create Custom Category PHP Template + WP Show Posts (WPSP)

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1343929
    Andres

    Thanks Tom for all your help! I hope this helps others.

    This is a “how to” on creating a custom PHP category template in GeneratePress (GP). Why might you need to do this? If using the GP Pro’s Blog Module, the same styling’s applied to all category pages (blog pages). For different posts feed styling, custom PHP category templates are required.

    It’s highly recommended using a child theme. For how to install a child theme in GP, and the link to download GP’s blank child theme, visit: https://docs.generatepress.com/article/using-child-theme/

    We’re using GP Pro, GP’s child theme, WP Show Posts Pro (by Tom Usborne from GP) for the posts feed, Simple CSS to insert CSS (also by Tom Usborne), and FileZilla to access the database (consult your hosting company on how to access your data base. * By “posts feed”, I am referring to posts that appear on a category/blog page.

    WPSP: https://wordpress.org/plugins/wp-show-posts/
    WPSP Pro: https://wpshowposts.com/
    Simple CSS: https://wordpress.org/plugins/simple-css/
    FileZilla: https://filezilla-project.org/

    Instructions

    Part 1 – Create Custom PHP Category Template
    1. Backup up your site before proceeding!!
    2. If possible, use a staging site to make sure it works and styled how you want, then implement it on your live site.
    3. Download, install, and activate GP child theme – https://docs.generatepress.com/article/using-child-theme/
    4. In data base, locate archive.php folder in the root directory of GeneratePress: application –> “whatever your app is named” –> public_html –> wp_content –> themes –> generatepress –> archive.php
    5. Copy archive.php from parent theme and put it in the root file of GP child theme: application –> “your app’s name” –> public_html wp_content themes –> generatepress_child (Open and paste it).
    6. In child theme, rename archive.php according to how you will use it. Review https://codex.wordpress.org/Category_Templates for options.
    We used the “category-slug.php” option, replacing “slug” with the category slug. If category slug is “cat-toys”, archive.php file is renamed: “category-cat-toys.php”.

    Part 3 – Create Posts Feed & Put ID in .php File
    Again, we used WPSP for our posts feed.
    1. Set the posts feed to query desired posts. In WPSP, we selected: Post Type: Posts; Taxonomy: Category; Terms: “cat-toys” (the category slug).
    There are various styling options. Choose the ones that fit your styling wants.
    2. Publish it
    3. Find post ID and copy it (need for next step).

    Part 3 – Modify PHP
    * This part enables WPSP and disables the default posts feed loop.
    1. In the code below, replace “123” with the short code ID in Part 3.
    * If not using WPSP, contact the developer of the plugin you are suing for what information you will need to use in the following code to replace the code for WPSP.
    2. Copy the code.

    if ( function_exists( 'wpsp_display' ) ) {
         wpsp_display( 123 );
    }

    3. Open the .php file created in Part 1.

    4. In the code below, replace the section in yellow with the code in Step 2 of Part 3. If the yellow did not come through, replace all the code from (including this code) “if ( have_posts() ) :” “to endif;”: https://github.com/tomusborne/generatepress/blob/2.4.2/archive.php#L24-L59

    5. That’s it for the .php archive!

    Note: We completed all the above steps on the copy of the data base on our computer and then uploaded the .php file (in this case, category-cat-toys.php) to the root folder in the child theme.

    6. See If It Works
    1. It’s not a bad idea to clear all the caches on your server, application, and browser.
    2. Open the category page in a browser you’re not logged in on in WordPress.
    3. The posts you wanted to appear should appear.

    * If using GeneratePress Pro, disable the Blog Element. We found that it conflicts with the custom PHP archive.

    7. Styling – Text and Posts Feed
    1. The heading and paragraph text is sourced from the Name and Description Field of the category: Posts –> Category –> Edit (category in question) –> Name & Description
    2. For images above the posts feed, you can create a Header Element in GP Pro with an image and apply it to that category, or you can insert an image in the Description field when editing the category. There are other options.
    3. To set posts feed width, create a Layout Element in GP, and it the Content option set the width. Apply it to the desired category pages in Display Rules.
    3. Below is some CSS to style the heading and text for custom PPH templates.
    * Use Simple CSS or insert it in: Appearance –> Customizer –> Additional CSS.

    Adjust Text Area Width & Margins on All Category Pages
    · Set width and margins to your liking

    .category header.page-header {
        max-width: 750px;
        margin: 40px auto 40px;
    }

    Adjust Text Area Width & Margins on Specific Category Pages
    * Replace “category-cat-toys” with the slug of your category

    .category-cat-toys header.page-header {
        max-width: 750px;
        margin: 40px auto 40px;
    }

    Centered H1 Title

     .page-header h1 {
        text-align: center;
    }

    Again, many thanks for all your help, Tom!

    Have a good day.

    #1344028
    Tom
    Lead Developer
    Lead Developer

    Awesome! Thanks so much for taking the time to write this up. I’m sure it will be very helpful to others.

    Really appreciate it 🙂

    #1344033
    Andres

    Tom,

    You are most welcome! Thank you for your help. I could not have done it without you.

    I spent countless hours trying to figure out how to do this by reading articles on the Internet and watching videos before contacting you guys, but there was nothing definitive and detailed explaining how to do it on GGP and for this purpose.

    I hope this saves other people lots of time

    Cheers!

    Andrés

    #1383485
    Sjoerd

    Hi guys,

    Thanks for the awesome guide! I have used it and have been able to get the posts to show up. Sadly though, the styling isn’t coming through in the right way. Any clue what is happening here?

    Some info:

    • I have the Blog module disabled
    • I am using a Child theme as described
    • You can check out the problem here: https://fotografiebeginner.nl/videos/
    • Here is how it’s supposed to look: https://fotografiebeginner.nl/blog/
    • Hope you can help, because the WPSP list is exactly the same on both urls and it just seems to loose it’s CSS markup on the /videos/ page which is an wordpress category page.

      Cheers,
      Sjoerd

    #1383490
    Sjoerd

    Ok, this is embarrassing…

    I am using the Perfmatters Plugin and I had it switch of the WPSP code with the Script Manager on all pages except the /blog/ page. Just switched it back on for all pages and what do you know.. it’s all working like a charm again.

    My bad guys! 😉

    #1383499
    Andres

    Hello Sjoerd,

    That’s the way things go.

    I have Perfmatters too. What I found works best is to use a plugin such as FreeSoul Deactive Plugin (https://wordpress.org/plugins/freesoul-deactivate-plugins/) and deactivate the plugins on a page-per page basis (with all caching off). For example, on your contact page, you probably don’t need WPSP. In FreeSoul, you can deactivate WPSP from running on your contact page (and on any other page where it’s not needed).

    Then, with Perfmatters, if necessary, you can check which scripts for particular plugins you don’t need on each page and then deactivate dequeue them. Frankly, if you do it the way I mention, it removes the majority of scripts that are not needed on a page by preventing unnecessary plugins from running on it. If using a page builder, however, Perfmatters really comes in handy. If you are using just GP without a page builder, it’s really not that helpful given that GP is quite optimized out of the box.

    WPSP leaves a very small footprint and is quite fast, so removing one WPSP script on one page is not worth the time. You can use FreeSoul to deactivate plugins on pages, posts, and category pages, as well as in the backend.

    Hope this helps!

    #1384476
    Sjoerd

    Hi Andres,

    Thanks for your elaborate reply! I will definitely have a look into the plugin you mentioned. Isn’t it the doing sort of the same as Perfmatters though? I thought with Perfmatters I could basically control all the scripts etc that load on a per page basis.

    Thanks again for helping out!

    Have a great day,
    Sjoerd

    #1384645
    Andres

    Hello Sjoerd,

    You are welcome!

    It does look like Permatters has the option to deactivate plugins on a per-page basis, in addition to individual scripts. I’m not certain if it’s just deactivating the scripts or the entire plugin. Freesoul Deactivate Plugin disables the entire plugin on a per-page basis.

    If memory serves me, when I installed Freesoul Deactivate Plugins, the plugins I deactivated in Permatters where still showing as running on the pages I had deactivated them.

    If thinking of using Freesoul Deactivate Plugins, check it to see if it’s reporting a plugin you’ve deactivated on a page or post is still loading. The plugin might still be loading without its scripts.

    In a week or so, we’ll be done with our new site that’s running GP with no page builder and will start the optimization process. I’ll let you know what I find. We have them both on our current live sit with GP + Elementor Pro. We originally got Perfmatters to disable all the unnecessary scripts from the page builder that were not grouped by plugin, since you can’t deactivate Elementor.

    Have a good one!

    Andrés

    #1387070
    Sjoerd

    Hi Andrés,

    Thanks for the reply again! I think Perfmatters has a beta function called “MU” that disables everything from a plugin. Not sure if it’s the same as Freesoul, but might be worth checking out.

    Good luck with the new site! Looking forward to hear your thoughts 🙂

    Cheers,
    Sjoerd

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.