webSIGHTdesigns - Web Design, Web Development, Web Hosting

Adding Section Permalinks to MediaWiki

Posted on Monday, July 7th, 2014 at 1:17 pm
by webSIGHTdesigns

How to add pilcrow symbols which link to the permalink of a given MediaWiki section.

MediaWiki is a free open source wiki application written in PHP, originally created for use on Wikipedia. We use the default Vector skin, but there was just one thing missing. We wanted a way to add links to each section of a wiki page, using the "pilcrow" symbol: ¶.

Assuming you've set your wiki up at /wiki, MediaWiki lets you enter custom JavaScript by visiting the following link:

/wiki/MediaWiki:Common.js

Edit the page and enter the following JavaScript code:

$( "#mw-content-text .mw-headline" ).each(function( i ) {
  var id = $(this).prop('id');
  var url = '#' + id;
  $(this).after( '<a class="pilcrow" href="' + url + '"><small>&para;</small></a>' );
});

MediaWiki also lets you enter custom CSS styles by visiting the following link:

/wiki/MediaWiki:Common.css

Edit the page and enter the following CSS code:

#mw-content-text h2 a.pilcrow,
#mw-content-text h3 a.pilcrow,
#mw-content-text h4 a.pilcrow,
#mw-content-text h5 a.pilcrow,
#mw-content-text h6 a.pilcrow { display: none; }
#mw-content-text h2:hover a.pilcrow,
#mw-content-text h3:hover a.pilcrow,
#mw-content-text h4:hover a.pilcrow,
#mw-content-text h5:hover a.pilcrow,
#mw-content-text h6:hover a.pilcrow { display: inline; line-height: 1; text-decoration: none; }

Please Sign In

Please sign in to post a comment.

Web Development

View details »

Web Hosting

View details »

Our Portfolio

View portfolio »

WebSight Designs webSIGHTdesigns preferred email webSIGHTdesigns United States United States