What is Wordpress Way to Add Content Blocks to Post and Reference them as Many to One Relationship?

by Brian   Last Updated October 09, 2019 20:08 PM

I am using a plugin that uses custom post content types. I think what I am trying to do is a gerneral Wordpress workflow question versus plugin specific. That said the plugin in LearnDash.

So, I have a post type. Call it Topic. I want a Topic to have Exercises, where the exercises will be a content block. I don't need exercises to have a route. That is, no url. Just like adding a div or some block, but where the exercises can then be referenced.

For instance, I might want to have right sidebar on a topic page that lists the exercises for that topic with a url that takes one to the anchor on the page for the exercise.

Or in my navigation menu for a lesson, where you see

Lesson
   Topic1
   Topic2
etc

I might want to display

Lesson
  Topic1
  Exercise1.1
  Topic2
  Exercise2.1
  Exercise2.2

See what I mean? I really have no need for an exercise to be a content type that is routable. I just need to use exercises as blocks that I can then reference as a many to one collective.

So trying to figure out the accepted way to do this with a plugin or by doing some coding.

thanks, Brian



Answers 1


You could first add the anchor links inside the blocks with something like:

<a class="block-anchor" name="topic-1" title="Topic 1">

<a class="block-anchor" name="topic-1-exerciseblock-1-1" title="Exercise 1.1">

Then create a widget with some jQuery/javascript that pulls all the anchors and lists them. Probably the easiest way to do this would be to put a shortcode in a Text Widget, eg. [block-anchor-list].

add_shortcode('block-anchor-list', 'block_anchor_list');
function block_anchor_list() {
    add_action('wp_footer', 'block_anchor_list_jquery');
    $list = "<div id='block-anchor-list'></div>";
    return $list;
}

function block_anchor_list_jquery() { 
    ?>
    <script>jQuery(document).ready(function() {
        listhtml = '<ul class="block-anchor-list">';
        jQuery('.block-anchor').each() {
             hash = jQuery(this).attr('name');
             anchor = jQuery(this).attr('title');
             listhtml += '<li class="block-anchor-item">';
             listhtml += '<a href="#'+hash+'" title="Jump to '+anchor+'.">'+anchor;
             listhtml += '</a></li>';
        }
        listhtml += '</ul>';
        jQuery('#block-anchor-list').html(listhtml);
    });</script>
    <?php
}

Note this solution relies on jQuery being loaded on the frontend, but could be done with vanilla javascript also.

majick
majick
October 10, 2019 08:33 AM

Related Questions


Updated August 23, 2018 03:08 AM

Updated February 17, 2017 15:08 PM

Updated May 18, 2015 10:03 AM

Updated February 02, 2018 04:08 AM