[Support request] Guidance on Styling Custom PHP Category Page

[Andres]

Hi,

Could you please provide me with some guidance on styling a custom PHP category page?

I’m hoping to replicate the styling of a category page on our current site (see included URL). Note: this category page is on our current site built with GP Pro + Elementor Pro. We are developing a new site using GP Pro and no page builder. The styling is for the category page on the development site.

I’m looking to replicate the the block on the current category page with two photos and text underneath, and to be able to embed a URL in the photo and text heading. I also want to disable the post feed to have just the area above where the current post feed starts and the content I am hoping to include.

Here’s the URL for the custom PHP category page on our development site:https://wordpress-424710-1336702.cloudwaysapps.com/costa-rica-wedding-venues/

The only plugin I found that might be able to do this – Enhanced Category Pages – has not been updated in four years.

Any plugin, or PHP + CSS solutions you can recommend would be greatly appreciated.

Thank you and have a good day.

Andrés

[Tom]

Hi there,

So this category template would output the child categories?

If so, you’d likely need to build the custom category template and add your content in there.

Alternatively, you could build a page and noindex it, then call the content of that page into the category template: https://stackoverflow.com/a/16895034/2391422

[Andres]

Hi Tom,

Thank you for the reply.

Yes, this category template would output the child categories. I was thinking of just putting the two photos there with their corresponding text using and embedding the URL for the two child categories in them using one of the options you mentioned.

The second option – calling the content of a page into the category template – seems the easiest for me, as I don’t have the slightest idea how to add the content to the custom category template.

I’ve created the category template and it’s in the child theme: category-costa-rica-wedding-venues.php

If I create a page with the slug: cr-venues. Would I replace ‘page-name’ in the code below with ‘cr-venues’ and then insert the code in the custom category template: “category-costa-rica-wedding-venues.php”? Or, do I use the name of the page (whatever is in the page title field)?

<?php
$page = get_page_by_title( ‘page-name’ );
$content = apply_filters(‘the_content’, $page->post_content);
echo $content;
?>

Thank you Tom!

Have a good one.

Andrés

[Tom]

I believe it’s the actual title of the page, but the slug may work as well.

[Andres]

Hello Tom,

Thanks!

I’ll try both and see which one works.

Do I insert the following code in the custom category template in the child theme? If so, is there a specific place in the existing code? Do I need to remove any of the existing code in the custom php template?

<?php
$page = get_page_by_title( ‘page-name’ );
$content = apply_filters(‘the_content’, $page->post_content);
echo $content;
?>

Thanks, Tom

Have a good one!

Andrés

[Tom]

Yea, you would replace the standard loop: https://github.com/tomusborne/generatepress/blob/2.4.2/archive.php#L24-L59

With that code (no curly quotes):

<?php
$page = get_page_by_title( 'page-name' );
$content = apply_filters('the_content', $page->post_content);
echo $content;
?>

Hope it does the trick 🙂

[Andres]

Hi Tom,

Thanks for the reply!! I input the code in the custom PHP category page, and it resulted in a 404 fatal error.

The name of the custom PHP category page is: category-costa-rica-wedding-venues.php

URL for category page: https://wordpress-424710-1336702.cloudwaysapps.com/costa-rica-wedding-venues/

URL for content source page: https://wordpress-424710-1336702.cloudwaysapps.com/privacy-policy/

* I just picked a page with a short title whose page name and slug were the same for testing and simplicity. I tried another page with the same result.

I tried several variations for ‘page-name’: privacy-policy, privacy policy, page-privacy-policy, page privacy policy, … with and without capitalization. None of them worked.

This is the section of code from stackoverflow.com. The parts in bold are in red on that site. I get it that I have to replace ‘page-name’ with the name of the page. Do I have to replace ‘the_content’ with something?

<?php
$page = get_page_by_title( <strong>'page-name'</strong> );
$content = apply_filters(<strong>'the_content'</strong>, $page->post_content); 
echo $content;
?>

This is the full code in the category-costa-rica-wedding-venues.php file.

<?php
/**
 * The template for displaying Archive pages.
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

get_header(); ?>

	<div id="primary" <?php generate_do_element_classes( 'content' ); ?>>
		<main id="main" <?php generate_do_element_classes( 'main' ); ?>>
			<?php
			/**
			 * generate_before_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_before_main_content' );
			<?php
			$page = get_page_by_title( page-privacy-policy );
			$content = apply_filters('the_content', $page->post_content);
			echo $content;
			?>
			/**
			 * generate_after_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_after_main_content' );
			?>
		</main><!-- #main -->
	</div><!-- #primary -->

	<?php
	/**
	 * generate_after_primary_content_area hook.
	 *
	 * @since 2.0
	 */
	do_action( 'generate_after_primary_content_area' );

	generate_construct_sidebars();

get_footer();

When time permits, could you please have a look at it see what you think? Sorry for the bother. Almost there!

Have a good night.

Andrés

[Tom]

You need single quotes around the page name.

So instead of this:

$page = get_page_by_title( page-privacy-policy );

Do this:

$page = get_page_by_title( 'page-privacy-policy' );

[Andres]

Hi Tom

Thanks for responding!

Sorry. I thought by “no curly quotes”, you meant to no use ‘’.

I created a static page named “Wedding Venues in Costa Rica” and put it in place of ‘page-name’

For some reason, it still did not work. I also tried it with just the slug ‘page-venues’ to no avail

I posted the issue on Stack Overflow to see if someone could chime it. I know I am making lots of requests for support, and I don’t want to wear out my welcome. If you do have time to look at it, I’ve posted the all the code in the custom category template. If not, and if a a reply from someone on Stack Overflow resolves the issue, I will be sure to share the resolution with you.

This is all the updated code in the category template:

<?php
/**
 * The template for displaying Archive pages.
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

get_header(); ?>

	<div id="primary" <?php generate_do_element_classes( 'content' ); ?>>
		<main id="main" <?php generate_do_element_classes( 'main' ); ?>>
			<?php
			/**
			 * generate_before_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_before_main_content' );
			<?php
			$page = get_page_by_title( 'page-wedding-venues-in-costa-rica' );
			$content = apply_filters('the_content', $page->post_content);
			echo $content;
			?>
			/**
			 * generate_after_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_after_main_content' );
			?>
		</main><!-- #main -->
	</div><!-- #primary -->

	<?php
	/**
	 * generate_after_primary_content_area hook.
	 *
	 * @since 2.0
	 */
	do_action( 'generate_after_primary_content_area' );

	generate_construct_sidebars();

get_footer();

Thanks for all your help, Tom, and enjoy the rest of your weekend.

Cheers!

Andrés

[Tom]

Try using the actual title of the page within the quotes: Wedding Venues in Costa Rica

Right now it looks like you’re using the slug.

[Andres]

Hello Tom,

Thanks for the response.

The name of the static page is: Quick Edit > Title: Wedding Venues in Costa Rica (I copied from this field and pasted it directly into the code to avoid spelling errors.)

The slug for the static page is: Quick Edit > Slug: venues

I’ve tried each of the following variations with no luck:

$page = get_page_by_title( ‘Wedding Venues in Costa Rica ' );

$page = get_page_by_title( 'page Wedding Venues in Costa Rica' );

$page = get_page_by_title( ‘Wedding-Venues-in-Costa Rica’ );

$page = get_page_by_title( ‘page-Wedding-Venues-in Costa-Rica’ );

$page = get_page_by_title( 'page-wedding venues in costa rica' );

$page = get_page_by_title( 'wedding-venues-in-costa-rica' );

$page = get_page_by_title( 'page-venue' );

$page = get_page_by_title( 'venue' );

$page = get_page_by_title(‘Wedding Venues in Costa Rica');

I have no idea what I’m doing wrong.

How should the code copied from StackOverflow be indented? Should there be a space above and below it? How about the spaces after and before open and closed parenthesis? I see that in one line, there is a space after them, then in the next line, there is not.

Thank you Tom, for all your help and patience. Have a good night.

Cheers!

Andrés

[Tom]

What happens if you var_dump() the variable underneath?

For example:

$page = get_page_by_title( 'Wedding Venues in Costa Rica' );
var_dump($page);

Does anything output on the page?

[Andres]

Hi Tom,

Did you mean do this:

`<?php
$page = get_page_by_title( ‘Wedding Venues in Costa Rica’ );
var_dump($page);
$content = apply_filters(‘the_content’, $page->post_content);
echo $content;
?>`

I so, I did, and the same error happens. Nothing is output on the page.

Maybe I’ve done something incorrect in create the custom php template or somewhere else. When you have a chance, can you look at the steps I took to see if it was done correctly? I managed to create about 7 other php category templates for use with WPSP without issue. This one is just not working. Maybe I did something incorrectly.

1. Create Category in WordPress (https://wordpress-424710-1336702.cloudwaysapps.com/costa-rica-wedding-venues/)
· Posts > Categories: Create Category
· Title: Costa Rica Venues
· Slug: costa-rica-wedding-venues
· Put text in description area

2. Create Custom PHP Template in Child Theme
· Copy archive.php file in wp-content > themes > generatepress
· Past archive.php file in wp-content > themes > generatepress_child
· Rename archive.php to category-costa-rica-wedding-venues.php (using category-slug method)

3. Create Static Page – Content Source Page (https://wordpress-424710-1336702.cloudwaysapps.com/venues/)
· Pages > Add New
· Title: Wedding Venues in Costa Rica
· Slug: venues
· Publish page

3 Adapt Code from StackOverflow to Pull Content from Page (https://stackoverflow.com/questions/5317366/proper-way-to-get-page-content/16895034#16895034)

· Unmodified SO code:

`<?php
$page = get_page_by_title( ‘<strong>page-name</strong>’ );
$content = apply_filters(‘the_content’, $page->post_content);
echo $content;
?>`

· SO Code after Replacing ‘page-name’ with ‘Wedding Venues in Costa Rica’:

`<?php
$page = get_page_by_title( ‘<strong>Wedding Venues in Costa Rica</strong>’ );
$content = apply_filters(‘the_content’, $page->post_content);
echo $content;
?>`

4. Modify Code in .php file in Child Theme to Pull Page Content
· Open category-costa-rica-wedding-venues.php
· Remove standard loop as per: https://github.com/tomusborne/generatepress/blob/2.4.2/archive.php#L24-L59
· Insert this code in its place:

`<?php
$page = get_page_by_title( ‘Wedding Venues in Costa Rica’ );
$content = apply_filters(‘the_content’, $page->post_content);
echo $content;
?>`

· Refresh category-costa-rica-wedding-venues.php in FileZill
· Upload category-costa-rica-wedding-venues.php to: public_html/wp-content/themes/generatepress_child

This is the full code in category-costa-rica-wedding-venues.php:

<?php
/**
 * The template for displaying Archive pages.
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

get_header(); ?>

	<div id="primary" <?php generate_do_element_classes( 'content' ); ?>>
		<main id="main" <?php generate_do_element_classes( 'main' ); ?>>
			<?php
			/**
			 * generate_before_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_before_main_content' );
			<?php
			$page = get_page_by_title( 'Wedding Venues in Costa Rica' );
			$content = apply_filters('the_content', $page->post_content); 
			echo $content;
			?>
			/**
			 * generate_after_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_after_main_content' );
			?>
		</main><!-- #main -->
	</div><!-- #primary -->

	<?php
	/**
	 * generate_after_primary_content_area hook.
	 *
	 * @since 2.0
	 */
	do_action( 'generate_after_primary_content_area' );

	generate_construct_sidebars();

get_footer();

I go to – wordpress-424710-1336702.cloudwaysapps.com/costa-rica-wedding-venues/-, and content is not pulled from page. There is a “404 There has been a critical error on your website” message.

Are there any errors in what I’ve done?

Thank you very much for looking in to this. I greatly appreciate it.

Have a good one.

Sincerely,

Andrés

[Tom]

You’re opening PHP even though you’re already using PHP.

Change this:

<?php
    $page = get_page_by_title( 'Wedding Venues in Costa Rica' );
    $content = apply_filters('the_content', $page->post_content); 
    echo $content;
?>

To this:

$page = get_page_by_title( 'Wedding Venues in Costa Rica' );
$content = apply_filters('the_content', $page->post_content); 
echo $content;

[Andres]

Hi Tom,

That did it. Thanks! Sorry for time it took for something so simple. PHP is Greek to me.

To have the styling on the static page be pulled to the category page, how would I do it? Most of the content is now appearing on the category page, but it’s not style as it is on the static page.

I found this on that StackOverflow page, but it’s using Page ID, not page-name, as well as “post”, not “page”. The person who provided it wrote: “… if you want to get the content formatted:”

echo apply_filters('the_content', get_post_field('post_content', $id));

Styling on Static Page: https://wordpress-424710-1336702.cloudwaysapps.com/venues/?preview_id=6183&preview_nonce=28cd1b94d8&preview=true

Styling on Category page: https://wordpress-424710-1336702.cloudwaysapps.com/costa-rica-wedding-venues/

Regarding the title, should it be pulled from the static page or category page in WordPress (Posts > Category > Corresponding Category > Title)? It’s not appearing on the custom category page. Maybe the styling fix will take care of it.

Again, Tom, thank you very much.

Sincerely,

Andrés

[Author]

Posts