5

I am continuing on from a topic I already posted but with a different angle. Please bare with me as I try to provide as much information as possible.

I am looking to add a simple text area called "Quick Facts" to a bunch of animal/cryptid pages in one part of my site. This will provide a list of facts and figures for each animal.

Here are the steps I have taken in order to set this up:

  • Created left and right sidebars in functions.php, called cryptid-sidebar-widgets-left (for the left sidebar) and cryptid-sidebar-widgets (for the right sidebar). The left sidebar is where the "Quick Facts" area is going to go.
  • Created a new page template called cryptofact-page.php. It grabs a custom header as well as the two new sidebars.
  • Created pages in wordpress with each individual animal.
  • Pop a text widget into the left sidebar and start writing down quick facts.

It ends up looking like this:

enter image description here

The problem is that, of course, this sidebar repeats the same text data for all the pages. I need it to display unique data for each animal's page instead.

I am wondering how to best tackle this issue because I am going to have over 100+ of these animal fact pages. Here are the options I've gathered and what problems each one presents. I am new web developer so I want to know how a professional site would tackle this issue.

  1. Register sidebars and create sidebar-___.php for each new page: I can go back into functions.php and continue to register 100+ different sidebars for each creature. From there I can make individual php pages called sidebar-creaturename.php and call them from the same template using custom fields.

    • In one tutorial I read, I can place the following into my cryptofact-page.php template. Then go to the custom field place in my pages and add Key:sidebar and Value: (The name of the sidebar-___.php) that I created for this animal. This allows me to keep the same template for all the pages but calls in a different sidebar for each one.

    <?php $sidebar = get_post_meta($post->ID, "sidebar", true); get_sidebar($sidebar); ?>

User Will, from my last topic, told me about putting this code into my page template or a sidebar I would make. And introduced me to the idea of Custom Fields.

    <?php
        var $meta = get_post_meta($post->id, "your-key", true);

        if(!empty($meta)): 
    ?>
        <aside>
            <?php echo $meta; ?>
        </aside>

    <?php endif; ?>

The problem was...I added this and it kinda tore up my page. So I wasn't sure if I added it in the wrong place or if I was missing something. If anyone can expand on this, it would be appreciated. I will add code to the end of this post that shows my cryptofact-page.php template and the potential sidebar I will use.

  1. Using Widget Logic Plugin (or similar plugin): I am not too fond of using a plugin when I can supposedly do this through coding my own files. This was a suggestion I found when researching my problem. In short, this plugin adds an extra field to each other widget that can specify which page to show that particular widget.

    • I add the Text Widget to the one sidebar (cryptid-sidebar-widgets-left) that I have added to the cryptofacts-page.php template. Under the Text Widget area is where I can use Widget Logic to add is_page('pageid') and write down the page id for that animal's page.
    • I repeat this process over and over so now that when I open the Widgets area under the Customizer, there are now 100+ Text Widgets that I have to wade through for that one sidebar. While this is easy to execute, it also seems a bit like a cluster-f. I want the Text Widget title to only say "Quick Facts" but this would mean I would have many many Text Widgets named Quick Facts with no good way to tell the difference between them at a glance (like let's say I have to go back and add or change facts, I'll need to manually open all of them and figure out which is the creature I want).
  2. Getting rid of the left sidebar completely. I thought about it and I suppose I could get rid of the left sidebar completely and while I'm writing each animal's page in wordpress, I can add a quickfact div that floats to the left of the animal's main content div. This was my initial idea when I first thought about these Animal Factoid Pages, but when I went to research different tutorials on adding columns and such, many of them suggested to just add a left sidebar instead. It would mean I don't have to deal with widgets or sidebars and all the "quick facts" go into the same input area as the rest of the content. It just means dealing with a lot more divs (which is not a problem since I'm dealing with many in the sidebar as it is).

Once again, I am wondering what would be the most efficient way to go about doing this for 100+ individual animal pages? What is the most common practice to tackle this for a large website?

Wordpress is fairly new to me and the idea of Custom Fields was just presented to me yesterday so Example #1 is all I really know about Custom Fields.

I am looking for any other ways to do this and I'm willing to take the time to learn to do this right. I don't expect this to be easy. It is going to be tedious because there are so many pages but I just don't want to seem like an idiot taking a super extraneous way to go about this.

My cryptofact-page.php template:

get_header(); ?>

<div class="cryptid-sidebar-left">
    <ul class="cryptid-sidebar-widgets-left">
<?php if ( is_active_sidebar( 'cryptid-sidebar-widgets-left' ) ) : 
          dynamic_sidebar( 'cryptid-sidebar-widgets-left' ); endif; ?>
                </ul>
            </div>

<?php if ( have_posts() ) : ?>
    <!--if there are posts, start the loop-->
<div class="cryptid-container">
    <?php while ( have_posts() ) : the_post(); ?>
        <!--get the content template for the current post format.-->
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>


</div> <!-- .cryptid-container-->

    <?php else : ?>
    <!--If no content, get content template for 'no posts found'-->
<div class="cryptid-container">
    <?php get_template_part( 'content', 'none' ); ?>
</div>
    <?php endif; ?>
<div class="cryptid-sidebar-right"> 
    <ul class="cryptid-sidebar-widgets">
    <?php if ( is_active_sidebar( 'cryptid-sidebar-widgets' ) ) :
    dynamic_sidebar( 'cryptid-sidebar-widgets' );
endif; ?>
</ul>
</div>
<?php get_footer(); 
?>

My Sidebar: Currently I don't need to have a separate sidebar-____.php file. It seems to work with just registering into the functions.php and calling it in the template. But if I had one (or needed one for this) it would probably look like this:

<?php
/**
 * Displays sidebar widgets for front page
 *
 * @since ctheme 1.0
 */
?>

<div class="cryptid-sidebar-left">
    <ul class="cryptid-sidebar-widgets-left">
        <?php if ( is_active_sidebar( 'cryptid-sidebar-widgets-left' ) ) :
    dynamic_sidebar( 'cryptid-sidebar-widgets-left' );
endif; ?>

</ul>
</div>

Thanks so much for all your help and for taking the time to read this. I hope I have provided enough information so I can be aided in accomplishing this.

EDIT- Potential Answer:

So I began to read up on Custom Fields again and also began to code Meta Box into my functions.php. I took a break and then realized that there was a simple solution stemming from Example #2 above: Text Widget and Widget Logic Plugin. I still want to tackle this problem in a more sophisticated manner but I'll post here what I did to make what I want happen.

The only real problem with #2 was that when I went to look into the Customizer- Widget area, under the Cryptid Left Sidebar all I saw was this:

Text Widget: Quick Facts

Text Widget: Quick Facts

Text Widget: Quick Facts (and on)

As stated above, if I had to go back to change the text data for one of these creatures, I wouldn't know which one to go into just by a glance. So, I simply went in search for another widget. After trying a few other Text Widgets out, I settled on Enhanced Text Widget. This widget gave me the option to title the widget but not show the title in the output.

I titled the widget by the name of the creature. Then in the text field, I simply gave the widget the title "Quick Facts" above all the other data I had coded for the quick facts. I then gave that title the same div that the rest of the widget titles already had, in my case it was called "widgettitle"

<div class="widgettitle"><h2>Quick Facts</h2></div>

It kinda messed up the size of the font but the rest of the styling is there. I can fix that easily in my style.css file.

Then, I used Widget Logic, which adds an extra field to the bottom of each widget. So in this area, I can type in the following so it only shows up for that page:

is_page('pageid')

In the end we have a widget customize area that now looks like this:

Enhanced Text: Loch Ness

Enhanced Text: Ogopogo

Enhanced Text: Bigfoot (and on)

Each with their own quick facts inside and now I can quickly see which creature's widget it is versus before.

It feels kinda noobie to do it this way, like I should be taking a more sophisticated path but it works out and it seems quite clean. I am not sure how well the site will handle this x100, but it doesn't seem like it should be that difficult or heavy to process.

Also I just realized...I have to do something similar if I wanted a little map for each animal location above the Quick Facts area (as seen in the image). I'll have to tackle that as well...but I may just stick the map in the page's content's instead. This is going to be one stuffed sidebar as it is.

Further help is greatly appreciated!

FINAL EDIT AND SOLUTION: Thanks to Milo!

Taking the accepted answer below by Milo, I decided to fully implement Custom Fields. I went through the trouble of creating my own meta box, which came out fairly decently. I ended up reverting to Advanced Custom Fields plugin cause their meta boxes were nicer. I don't even need the plugin, but I kept it around in case I wanted to use it for something more complicated in the future. Using Advanced Custom Fields plugin (or the Custom Fields box without the plugin) I created the custom field key cryptid_post_class.

I then altered my page template (cryptofacts-page.php) to remove the sidebar and in it's place GET the data from the custom field. It is imperative to use proper wrappers as it would appear with the sidebar from before (Miloisawesome).

get_header(); ?>

<div class="cryptid-sidebar-left">
<ul class="cryptid-sidebar-widgets-left">
    <?php
    $meta = get_post_meta(get_the_ID(), "cryptid_post_class", true);
    if( !empty($meta) ): 
    ?>
    <li>
        <?php echo $meta; ?>
    </li>
    <?php
    endif;
    ?>
</ul>
</div>


<?php if ( have_posts() ) : ?>
<!--if there are posts, start the loop-->
<div class="cryptid-container">
<?php while ( have_posts() ) : the_post(); ?>
    <!--get the content template for the current post format.-->
    <?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>

Here are some pictures to illustrate the process.

  1. Setup the template with proper wrappers

enter image description here 2. Setting up the Custom Fields area

enter image description here 3. End result minus some css tweaks since I used a backup template while playing with this

enter image description here

Hopefully this will help any other newbie WordPress developers make things clearer and approach the rather awesome custom fields part of WP!

0

2 Answers 2

5

You could dynamically register sidebars. When you register sidebars, you could query for all of your animal pages, loop over all pages, and register a unique sidebar for each page. Adding a page would automatically create a sidebar for it.

However - that's a lot of sidebars. For something tightly coupled with the page content, I would rather handle it with custom fields via a custom meta box that contained your pre-defined field(s).

As for why your use of post meta disturbed the layout of your site, it's probably just an issue of markup / styling. The simplest course may be to get the layout looking right with a sidebar and text widget, then copy the markup that's generated when you view the page, and use that as the wrapper markup for you custom fields. Looking at your template above, widgets will appear as <li>s within a <ul>, so try that when adding your post meta:

<div class="cryptid-sidebar-left">
    <ul class="cryptid-sidebar-widgets-left">
        <?php
        $meta = get_post_meta(get_the_ID(), "your-key", true);
        if( !empty($meta) ): 
        ?>
        <li>
            <?php echo $meta; ?>
        </li>
        <?php
        endif;
        ?>
    </ul>
</div>
1
  • Thank you so much Milo! I was really overthinking the entire thing. With your help, I was able to fully implement what I wanted with Custom Fields! I also began working on meta boxes, though of course I can do this simple task without it. I have editted the original post with how I used your solution
    – Nimara
    Commented Nov 13, 2015 at 17:55
0

I had a site with an issue that sounds alot like the one you are mentioned. I used a plugin "custom sidebars" I believe it was called in which it would aloud me to build a sidebar on a specific page and default if not set. Is this what you are looking for?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.