Support » Plugin: Joli Table Of Contents » Possible to only use this plugin for generating ids for headings?

  • Resolved telsenome

    (@telsenome)


    I wonder if I can use this plugin to automatically generate ids for headings, but not use it for displaying the table of contents itself? Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author WPJoli

    (@wpjoli)

    Hi,

    It is actually possible using the built-in hooks.

    You would need to empty out the array of headings like so (add this to your theme’s funcitons.php) :

    add_filter('joli_toc_headings', 'filter_headings', 10, 2);
    
    function filter_headings( $headings ){ 
        //Empties out the headings array
        return [];
    }

    Also, make sure in the settings to set the Minimum headings count to 1 in order to “id-fy” every single heading.

    Cheers!

    • This reply was modified 2 months, 1 week ago by WPJoli.
    Thread Starter telsenome

    (@telsenome)

    That’s really cool! What would the data WordPress returns look like if doing that?

    Will the h-tags have id’s like so?

    <h2 id=”lorem-ipsum”>Lorem Ipsum</h2>

    Plugin Author WPJoli

    (@wpjoli)

    Yes, the headings tag would be automatically filled up with an auto generated id like your example.

    You can also, select the Hash format you wish from the GENERAL tab in the settings. There are few options to choose from, including a counter.

    Check the page source (right click > view source in chrome) and see if this tweak gives the expected results on your website.

    Thread Starter telsenome

    (@telsenome)

    @wpjoli I activated the plugin and updated a post, but no ids in the h-tags seem to have been saved. When fetching posts (using the REST api) they’re simply returned like so:

    \n\n\n\n<h2>More Lorem</h2>\n\n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum, quam vel tincidunt tristique, nisl orci pulvinar sapien, at tempor sapien nulla sit amet velit. In enim lacus, suscipit sit amet suscipit vitae, tempor sed purus. Proin bibendum sit amet massa eu venenatis. </p>\n\n\n\n<h2>Even more Lorem</h2>\n\n\n\n<h3>Smaller h3 lorem</h3>\n\n\n\n<p>Donec vel enim sit amet ligula rhoncus imperdiet et vitae nunc.</p>

    • This reply was modified 2 months, 1 week ago by telsenome.
    Plugin Author WPJoli

    (@wpjoli)

    Did you turn on auto insert for the desired post types ?

    Thread Starter telsenome

    (@telsenome)

    Maybe I’ve misunderstood. I thought that id attributes / anchors would be added to the html. So when fetching the html they would have these attributes inserted. See here, I’ve created a blog post with 4 headings. This is what I get back in terms of content:

    \n<h2>Heading2</h2>\n\n\n\n<h3>Heading3</h3>\n\n\n\n<h3>Heading3 again</h3>\n\n\n\n<h4>Heading4</h4>\n\n\n\n<style> #joli-toc-wrapper nav#joli-toc.joli-expanded, #joli-toc-wrapper.joli-folded nav#joli-toc.joli-expanded, #joli-toc-wrapper.joli-unfolded nav#joli-toc{padding: 10px !important;}#joli-toc-wrapper nav#joli-toc.joli-expanded li a, #joli-toc-wrapper nav#joli-toc.joli-collapsed li a,#joli-toc-wrapper.joli-folded nav#joli-toc.joli-expanded li a, #joli-toc-wrapper.joli-unfolded nav#joli-toc li a{text-overflow: unset !important;overflow: hidden !important;white-space: normal !important;}#joli-toc-wrapper nav#joli-toc{width: auto !important;}#joli-toc-wrapper nav#joli-toc.joli-collapsed{width: initial !important;}#joli-toc-wrapper nav#joli-toc .title #title-label{text-align: left !important;}#joli-toc-wrapper nav#joli-toc.joli-collapsed .title, #joli-toc-wrapper nav#joli-toc .title{}#joli-toc-wrapper.joli-unfolded-ufloating nav#joli-toc ul.joli-nav ul,#joli-toc-wrapper.joli-incontent nav#joli-toc ul.joli-nav ul,#joli-toc-wrapper nav#joli-toc.joli-expanded ul.joli-nav ul {margin: 0 0 0 20px !important;}#joli-toc-wrapper {top: initial !important;bottom: initial !important;margin-left: initial !important;}body.admin-bar #joli-toc-wrapper {top: initial !important;bottom: initial !important;}</style><div id=\"joli-toc-filler\"></div>\r\n<div id=\"joli-toc-wrapper\" class=\"joli-unfolded-incontent joli-unfolded joli-incontent joli-smoothscroll\">\r\n <nav id=\"joli-toc\">\r\n <header id=\"joli-toc-header\">\r\n <div class=\"title\">\r\n <span id=\"title-label\">Table of contents</span>\r\n </div>\r\n </header>\r\n <ul class=\"joli-nav\"><li class=\"item\"><a href=\"#heading2\" title=\"Heading2\" class=\"joli-h2\">Heading2</a><ul><li class=\"subitem\"><a href=\"#heading3\" title=\"Heading3\" class=\"joli-h3\">Heading3</a></li><li class=\"subitem\"><a href=\"#heading3-again\" title=\"Heading3 again\" class=\"joli-h3\">Heading3 again</a><ul><li class=\"subitem\"><a href=\"#heading4\" title=\"Heading4\" class=\"joli-h4\">Heading4</a></li></ul></li></ul></li></ul> </nav>\r\n</div>\r\n\n

    Thread Starter telsenome

    (@telsenome)

    I thought these headings:

    <h2>Heading2</h2>\n\n\n\n<h3>Heading3</h3>\n\n\n\n<h3>Heading3 again</h3>\n\n\n\n<h4>Heading4</h4>\n\n\n\n

    would have ids inserted like this:

    <h2 id="heading2">Heading2</h2>\n\n\n\n<h3 id="heading3">Heading3</h3>\n\n\n\n<h3 id="heading3-again">Heading3 again</h3>\n\n\n\n<h4 id="heading4">Heading4</h4>\n\n\n\n

    • This reply was modified 2 months, 1 week ago by telsenome.
    Plugin Author WPJoli

    (@wpjoli)

    Yes, the point of auto insert is to trigger the mechanism and with the code I gave you earlier, it will prevent to show the actual TOC but the headings should still be processed with auto generated IDs.

    Thread Starter telsenome

    (@telsenome)

    I’m very sorry about my neglect. I forgot adding the code to functions.php. Thank you for being so helpful @wpjoli

    Plugin Author WPJoli

    (@wpjoli)

    Good to know it’s working!

    Cheers!

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.