linking to a specific point in an article

hi. I have an entire Story that is contained within a particular Page on my site.

It is linked into a timeline of events. I would like to know how to link the events in the timeline to particular positions on the story-Page.

That is, let us say 'Chapter 4' is at a certain position on a Page that has the entire Story, all chapters. Yet I wish a link to the Page with the Story to go to the specific position which has 'Chapter 4'. How do I do this?

  • Michelle Shull

    Hey, Grif!

    The secret sauce you want here is an anchor.

    Edit your post/page, and find the place in the text you want to add an anchor link. If you're not using an expanded WYSIWYG editor, you can't add an anchor in the visual editor, you'll need to switch over to text view.

    Wrap the anchor text you want like this:

    <a name="chapter4">Text</a>

    Now when you want to link to it, use something like this:

    Click <a href="#chapter4">here</a> to read chapter 4.

    If you're linking externally, like from FB or Twitter, you'll want the entire URL, like so:

    Click <a href="yoursite.com/#chapter4"> here</a> to read Chapter 4.

    That's it!

  • Michelle Shull

    Hey Grif!

    I've got an expanded WYSIWYG that let's me drop in anchors and all kinds of other cool stuff, but I've never tested it with VC. https://wordpress.org/plugins/tinymce-advanced/. I think it should be okay, you have to open VC on each page to use it, and the Advanced TinyMCE editor should show on the initial edit page. I think there might be a conflict between TinyMCE Advanced and EditFlow, but I don't recall you using the EditFlow plugin.

    If that doesn't work, we can drop in a function to make that hidden button show, like so:

    function my_mce_buttons_2($buttons) {
    	/**
    	 * Add in a core button that's disabled by default
    	 */
    	$buttons[] = 'anchor';
    
            return $buttons;
    }
    add_filter('mce_buttons_2', 'my_mce_buttons_2');

    Note: The rectangle after "buttons" is actually these two characters with no space between: [ ] It's rendering a little oddly on my screen.

    Drop this in your child theme's functions.php, or you can create a site-wide plugin, like so: http://gregrickaby.com/create-mu-plugin-for-wordpress/ If you find you're intrigued by the idea of adding more buttons, here's a complete list: http://www.tinymce.com/wiki.php/TinyMCE3x:Buttons/controls

    You'd add a new line just like the anchor line in the snippet above, using the button name from the list. If your editor is crowded, and you'd like to create a third row of buttons, you'd change the 2 in the snippet I gave you (which indicated the button(s) will be added to the second row) to a 3 in both places.

    And you're now a TinyMCE pro. :slight_smile:

    Also, just to make sure you know about it, ctrl-f (or cmd-f on Mac, I think) is the universal "find" tool. When you're facing a wall of text you're trying to parse, it can save a lot of time. It works in every browser, and it's built in to almost every tool you'll use on your computer. I'm sure you're already aware of it, just wanted to make sure. :slight_smile:

    Take care, Grif!

  • Griffin

    o-kay. can't seem to get the syntax right.

    installed TinyMCE. but not sure how it all comes together. Yes, I can drop an anchor at a position. And yes, the anchor seems to automatically name itself relative to what it's in front of. that's all good.

    the theme i'm using has a custom back-end that's awesome and visual. There's a bit within the edit post zone which looks like a gear (on the right, on the row of icons) which opens into a 'Custom url' option. This causes the post on the timeline (it's a timeline specific theme) to link to a url other than the post page when it's clicked.

    However, I don't seem to have the syntax right.
    I'm enabling support access on my site. Here's some screenshots of what i'm on about -->

    1) This is the main timeline page (http://mythofpeterfae.intothemythica.com/category/2002-leaving-yorke/)

    2) I want to test this on 'The Faerytale Brigade' post. So, click on that post, which will bring You to here: (http://mythofpeterfae.intothemythica.com/the-faerytale-brigade/)

    However, this is not where i'm testing the ANCHOR to go to. I'm actually playing with the idea of having the anchor go to the main Storyline page, which holds the entire novel on it.

    The basic idea is having the links on the timeline page link to the anchor points in the main Novel page, while having a different access point to the posts page.

    I want the anchor and the custom link to go here --> http://mythofpeterfae.intothemythica.com/the-journey-home-full/

    Specifically to link into the point where 'The Faerytale Brigade' starts.

    I'd like to see the * exact * syntax used when one drops an anchor point in front of 'The Faerytale Brigade' on the full novel page, then what the custom link is set as on The Faerytale Brigades actual edit post page.

    Here's a screenshot of the custom link area in the actual Faerytale Brigade post page:

    http://cl.ly/image/3F0a0G1I0H2A

  • Anang

    Hi Griffin

    I'm trying to help here :slight_smile: What I see, the problem here is how to add "anchor" without switching to text mode right ? So could you put below code on your themes functions.php so It will add a new component on your Visual Composer, and you can drag-drop it to any position you want :slight_smile:

    if (function_exists("vc_map")) {
    	vc_map( array(
          "name" => __("Anchor"),
          "base" => "anchor",
          "class" => "",
          "category" => __('Content'),
    	  "params" => array(
    		array(
                "type" => "textfield",
                "holder" => "div",
                "class" => "",
                "heading" => __("Name"),
                "param_name" => "id",
                "value" => __(""),
                "description" => __("your unique anchor name")
             )
    		)
       ));
    	if ( ! function_exists('anchor_shortcode') ) {
    		function anchor_shortcode( $atts, $content = null ) {
    			$name=$content==null?$atts['id']:$content;
    		   return '<a name="'.$name.'" id="' . $name. '"></a>';
    		}
    		add_shortcode( 'anchor', 'anchor_shortcode' );
    	}
    }

    For your case as example,when it prompted with Name you can fill it with "FaerytaleBrigade".
    And for linking to the anchor to the other page you just put URL below as link address :
    http://mythofpeterfae.intothemythica.com/the-journey-home-full/#FaerytaleBrigade

    Let me know if have any questions :slight_smile:

    Best Regards

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.