Add sidebar shortcode, improve implementation

config.codekit3

@@ -1975,6 +1975,14 @@
       "oAP" : "\/searchform.php",
       "oF" : 1
     },
+    "\/sidebar-fictioneer-sidebar.php" : {
+      "cB" : 0,
+      "ft" : 8192,
+      "hM" : 0,
+      "oA" : 1,
+      "oAP" : "\/sidebar-fictioneer-sidebar.php",
+      "oF" : 1
+    },
     "\/single-fcn_chapter.php" : {
       "cB" : 0,
       "ft" : 8192,

includes/functions/_setup-shortcodes.php

@@ -2083,3 +2083,32 @@ function fictioneer_shortcode_font_awesome( $attr ) {
   return "<i class='{$classes}'></i>";
 }
 add_shortcode( 'fictioneer_fa', 'fictioneer_shortcode_font_awesome' );
+
+// =============================================================================
+// SIDEBAR SHORTCODE
+// =============================================================================
+
+/**
+ * Shortcode to show sidebar
+ *
+ * @since 5.20.0
+ *
+ * @param string|null $attr['name']  Optional. Name of the sidebar. Default 'fictioneer_sidebar'.
+ *
+ * @return string The captured shortcode HTML.
+ */
+
+function fictioneer_shortcode_sidebar( $attr ) {
+  // Setup
+  $name = sanitize_text_field( $attr['name'] ?? '' ) ?: 'fictioneer-sidebar';
+
+  // Buffer
+  ob_start();
+
+  // Output sidebar
+  get_sidebar( $name );
+
+  // Capture and return buffer
+  return ob_get_clean();
+}
+add_shortcode( 'fictioneer_sidebar', 'fictioneer_shortcode_sidebar' );

includes/functions/_setup-theme.php

@@ -177,7 +177,7 @@ function fictioneer_get_theme_info() {
 }
 
 /**
- * Registers (dummy) sidebar
+ * Registers sidebar
  *
  * @since 5.20.0
  */
@@ -187,9 +187,9 @@ function fictioneer_register_sidebar() {
     array(
       'name' => __( 'Fictioneer Sidebar', 'fictioneer' ),
       'id' => 'fictioneer-sidebar',
-      'description' => __( 'For custom templates. Not used by the default theme.', 'fictioneer' ),
-      'before_widget' => '<li id="%1$s" class="widget %2$s">',
-      'after_widget' => '</li>',
+      'description' => __( 'This sidebar is not rendered by default and has no styles. It is meant to be inserted with the <code>[fictioneer_sidebar]</code> shortcode or a custom call. It can also be rendered with the Elementor plugin.', 'fictioneer' ),
+      'before_widget' => '<div id="%1$s" class="widget %2$s">',
+      'after_widget' => '</div>',
       'before_title' => '<h2 class="widgettitle">',
       'after_title' => '</h2>'
     )

sidebar-fictioneer-sidebar.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Sidebar
+ *
+ * @package WordPress
+ * @subpackage Fictioneer
+ * @since 5.20.0
+ */
+
+
+// No direct access!
+defined( 'ABSPATH' ) OR exit;
+
+?>
+
+<div id="fictioneer-sidebar" class="sidebar">
+	<?php dynamic_sidebar( 'fictioneer-sidebar' ); ?>
+</div>

src/scss/common/_base.scss

@@ -858,6 +858,17 @@ html:not(.logged-in) body:not(.logged-in) {
   }
 }
 
-.widget {
-  list-style: none;
+// Specific style resets
+.sidebar {
+  :where(ul, ol) {
+    list-style: initial;
+  }
+
+  :where(select) {
+    display: block;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E") no-repeat right 4px center/1em;
+    background-color: var(--input-background);
+    padding: 0 22px 0 8px;
+    height: 32px;
+  }
 }