goodreads template in 2024 theme

It looks like the “Page Attributes” section in your WordPress editor doesn’t show the template selection dropdown. This can happen if your theme doesn’t support custom templates or if the template file isn’t recognized correctly.

Here are some steps to troubleshoot and ensure your custom page template is recognized:

  1. Verify Template File Location:
    Ensure bookshelf-page.php is located in your active theme’s root directory, e.g., wp-content/themes/your-theme/.


  2. Check Template Header:
    Double-check the template header in bookshelf-page.php:


    <?php
    /*
    Template Name: Bookshelf Page
    */
    get_header();
    ?>

  3. Clear Cache:
    Clear your browser and WordPress cache.


  4. Switch and Revert Theme:
    Temporarily switch to a different theme and then revert back to your current theme. This can refresh the template files.


  5. Theme Support for Templates:
    Ensure your theme supports custom templates. If not, you might need to add support manually or consider using a child theme.


  6. Custom Shortcodes:
    Ensure all necessary shortcodes are defined in your theme’s functions.php:


    function book_title_shortcode() {
    return 'Sample Book Title'; // Replace with dynamic content
    }
    add_shortcode('title', 'book_title_shortcode');
    // Repeat for other shortcodes

Example bookshelf-page.php:

<?php
/*
Template Name: Bookshelf Page
*/
get_header();
?>

<div class="container">
    <?php
    if (function_exists('bookshelf')) {
        bookshelf();
    }
    ?>

    <div class="book-details">
        <h2><?php echo do_shortcode('[title]'); ?> Book Title</h2>
        <p><strong>Author:</strong> <?php echo do_shortcode('[author]'); ?> Author's Name</p>
        <img src="<?php echo do_shortcode('[cover]'); ?>" alt="Book Cover">
        <p><strong>ISBN:</strong> <?php echo do_shortcode('[isbn]'); ?> Books ISBN</p>
        <p><strong>Date Finished:</strong> <?php echo do_shortcode('[read]'); ?> Date you finished reading the book</p>
        <p><strong>Review:</strong> <?php echo do_shortcode('[review]'); ?> Your review of the book</p>
        <p><strong>Short Review:</strong> <?php echo do_shortcode('[short_review]'); ?> Review shortened to 200 char</p>
        <p><strong>Published Year:</strong> <?php echo do_shortcode('[published]'); ?> Year the book was published</p>
        <p><strong>Description:</strong> <?php echo do_shortcode('[description]'); ?> Book's description</p>
        <p><strong>Short Description:</strong> <?php echo do_shortcode('[short_description]'); ?> Description shortened to 200 char</p>
        <p><strong>Your Rating:</strong> <?php echo do_shortcode('[user_rating]'); ?> Your rating displayed as a number</p>
        <p><strong>Average Rating:</strong> <?php echo do_shortcode('[avg_rating]'); ?> Books average rating displayed as a number</p>
        <p><strong>Goodreads Link:</strong> <a href="<?php echo do_shortcode('[url]'); ?>">Goodreads book link</a></p>
    </div>
</div>

<?php get_footer(); ?>

After verifying and applying these steps, check if the “Page Attributes” section now displays the “Bookshelf Page” template option. If the problem persists, consider switching to a theme known for better custom template support.

To include a “Bookshelf” section similar to the one on the referenced site in your block theme, you need to create a custom template part for the bookshelf. Here’s how to do it:

Steps to Add a Bookshelf Section

  1. Create a Template Part for the Bookshelf:
  • Create a new file in your theme directory, e.g., template-parts/bookshelf.html.
  1. Bookshelf HTML Structure:
   <!-- template-parts/bookshelf.html -->
   <section class="bookshelf">
       <h2>Bookshelf</h2>
       <div class="book-list">
           <!-- Repeat this block for each book -->
           <div class="book">
               <img src="book-cover-url.jpg" alt="Book Title">
               <h3>Book Title</h3>
               <p>Author Name</p>
           </div>
           <!-- End repeat -->
       </div>
   </section>
  1. Include the Bookshelf in Your Main Template:
  • In index.html or the appropriate template file, include the bookshelf template part:
   <!DOCTYPE html>
   <html <?php language_attributes(); ?>>
   <head>
       <meta charset="<?php bloginfo( 'charset' ); ?>">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <?php wp_head(); ?>
   </head>
   <body <?php body_class(); ?>>
       <?php wp_body_open(); ?>
       <header>
           <?php get_template_part('template-parts/header'); ?>
       </header>
       <main>
           <?php get_template_part('template-parts/bookshelf'); ?>
           <div class="wp-block-post-content"></div>
       </main>
       <footer>
           <?php get_template_part('template-parts/footer'); ?>
       </footer>
       <?php wp_footer(); ?>
   </body>
   </html>
  1. Add Custom CSS for the Bookshelf:
  • Create or update your theme’s style.css to style the bookshelf:
   .bookshelf {
       padding: 20px;
       background-color: #f9f9f9;
   }

   .bookshelf h2 {
       font-size: 24px;
       margin-bottom: 20px;
   }

   .book-list {
       display: flex;
       flex-wrap: wrap;
       gap: 20px;
   }

   .book {
       width: 200px;
       text-align: center;
   }

   .book img {
       width: 100%;
       height: auto;
   }

   .book h3 {
       font-size: 18px;
       margin: 10px 0 5px;
   }

   .book p {
       font-size: 16px;
       color: #666;
   }
  1. Dynamic Content (Optional):
  • If you want to pull book data dynamically, you might need to integrate a custom post type for books and query these posts within the template part.

This approach will add a “Bookshelf” section to your block theme, ensuring it is structured and styled appropriately.

Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.