Turn page background into hooked action

404.php

@@ -22,8 +22,6 @@ get_header( null, array( 'no_index' => 1 ) );
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

ACTIONS.md

@@ -676,6 +676,9 @@ Fires before the content of the card grid is rendered in the `partials/_card-sto
 ### `do_action( 'fictioneer_main' )`
 Fires after opening the site’s `<main>` container, right after the `.main-observer` element.
 
+**Hooked Actions:**
+* `fictioneer_page_background()` – Renders the page background. Priority 10.
+
 ---
 
 ### `do_action( 'fictioneer_main_wrapper' )`

FILTERS.md

@@ -726,6 +726,14 @@ Filters the obfuscation string generated for chapter spoilers and protected post
 
 ---
 
+### `apply_filters( 'fictioneer_filter_page_background', $html )`
+Filters the HTML of the page background element, which is absolute positioned under the actual content.
+
+**Parameters:**
+* $html (string) – The HTML element of the page background.
+
+---
+
 ### `apply_filters( 'fictioneer_filter_page_card_footer', $footer_items, $post, $args )`
 Filters the intermediate output array in the `_card-page.php` partial before it is imploded and rendered. Contains statistics with icons such as the author, publishing date, and comments.
 

author.php

@@ -97,8 +97,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

category.php

@@ -20,8 +20,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

chapters.php

@@ -97,8 +97,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

collections.php

@@ -57,8 +57,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

includes/functions/_helpers-templates.php

@@ -2043,3 +2043,24 @@ function fictioneer_get_story_changelog( $story_id ) {
   // Return
   return $changelog;
 }
+
+// =============================================================================
+// PAGE BACKGROUND
+// =============================================================================
+
+/**
+ * Render the page background element
+ *
+ * Note: The page background is a separate element, absolute positioned under the
+ * actual content. This allows for quite some CSS shenanigans and can improve the
+ * render performance in certain scenarios. Hooked to 'fictioneer_main' action.
+ *
+ * @since 5.20.0
+ */
+
+function fictioneer_page_background() {
+  $background = '<div class="main__background polygon polygon--main background-texture"></div>';
+
+  echo apply_filters( 'fictioneer_filter_page_background', $background );
+}
+add_action( 'fictioneer_main', 'fictioneer_page_background' );

index.php

@@ -23,8 +23,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper"><?php
     do_action( 'fictioneer_main_wrapper' );
     get_template_part( 'partials/_loop' );

recommendations.php

@@ -57,8 +57,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

search.php

@@ -68,10 +68,13 @@ get_header();
 ?>
 
 <main id="main" class="main search-results">
+
   <div class="observer main-observer"></div>
+
   <?php do_action( 'fictioneer_main' ); ?>
-  <div class="main__background polygon polygon--main background-texture"></div>
+
   <div class="main__wrapper">
+
     <?php do_action( 'fictioneer_main_wrapper' ); ?>
 
     <article id="search-results" class="search-results__article padding-left padding-right padding-top padding-bottom">

single-fcn_collection.php

@@ -26,8 +26,6 @@ get_header( null, array( 'type' => 'fcn_collection' ) );
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

single-fcn_recommendation.php

@@ -25,8 +25,6 @@ get_header( null, array( 'type' => 'fcn_recommendation' ) );
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

single-fcn_story.php

@@ -33,8 +33,6 @@ get_header(
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper _no-padding-top">
 
     <?php

single-post.php

@@ -22,8 +22,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular-bookmarks.php

@@ -30,8 +30,6 @@ get_header( null, array( 'no_index' => 1 ) );
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular-bookshelf-ajax.php

@@ -74,8 +74,6 @@ get_header( null, array( 'no_index' => 1 ) );
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular-bookshelf.php

@@ -90,8 +90,6 @@ get_header( null, array( 'no_index' => 1 ) );
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular-canvas-page.php

@@ -22,8 +22,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular-index-advanced.php

@@ -82,8 +82,6 @@ reset( $sorted_stories );
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular-index.php

@@ -78,8 +78,6 @@ reset( $sorted_stories );
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular-story.php

@@ -30,8 +30,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper <?php echo $render_story_header ? '_no-padding-top' : ''; ?>">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular-taxonomies.php

@@ -63,8 +63,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular-titleless.php

@@ -23,8 +23,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

singular.php

@@ -23,8 +23,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

stories.php

@@ -104,8 +104,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

tag.php

@@ -21,8 +21,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

taxonomy-fcn_character.php

@@ -20,8 +20,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

taxonomy-fcn_content_warning.php

@@ -20,8 +20,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

taxonomy-fcn_fandom.php

@@ -20,8 +20,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

taxonomy-fcn_genre.php

@@ -20,8 +20,6 @@ get_header();
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>

user-profile.php

@@ -66,8 +66,6 @@ get_header( null, array( 'type' => 'user-profile', 'no_index' => 1 ) );
 
   <?php do_action( 'fictioneer_main' ); ?>
 
-  <div class="main__background polygon polygon--main background-texture"></div>
-
   <div class="main__wrapper">
 
     <?php do_action( 'fictioneer_main_wrapper' ); ?>