How to add css and js files to mediawiki?

Question

I would like to install a new javascript script on my wiki.

So I have to call this following scripts:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Quicksand">
<link rel="stylesheet" type="text/css" href="library/pretty-json-master/css/pretty-json.css">
<script type="text/javascript" src="library/pretty-json-master/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="library/pretty-json-master/libs/underscore-min.js"></script>
<script type="text/javascript" src="library/pretty-json-master/libs/backbone-min.js"></script>
<script type="text/javascript" src="library/pretty-json-master/pretty-json-debug.js"></script>

What is the best practice to add this on all my pages ?

Thx

Possible duplicate of adding css file to mediawiki?

Nemo
– Nemo

2015-11-02 11:12:32 +00:00
Commented Nov 2, 2015 at 11:12 — Nemo
– Nemo, Commented Nov 2, 2015 at 11:12
stackoverflow.com/a/13614085/1333493 applies.

Nemo
– Nemo

2015-11-11 18:26:15 +00:00
Commented Nov 11, 2015 at 18:26 — Nemo
– Nemo, Commented Nov 11, 2015 at 18:26

Arkanosis · Accepted Answer · 2015-07-24 14:27:47Z

0

There might be other ways, but you could create a light MediaWiki extension which only sets $wgResourceModules. See Manual:$wgResourceModules.

answered Jul 24, 2015 at 14:27

Arkanosis

2,3341 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Over a year ago

Ok thanks but I don't know where I have to call the $this->getOutput()->addModules( 'ext.myExtension' );

Tgr Over a year ago

Follow-up in Where to call addModules()?. Other options (I would say they are worse): load it from a global script file, use gadgets.

Paul · Accepted Answer · 2015-07-27 08:58:58Z

-1

1/ Create a new extension in "extensions" folder (extensions/jsonTree/)

2/ Create a php file in this folder (jsonTree.php)

$wgHooks['BeforePageDisplay'][] = 'onBeforePageDisplay';

function onBeforePageDisplay( OutputPage &$out, Skin &$skin ) {

    $script = '
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Quicksand">
    <link rel="stylesheet" type="text/css" href="/extensions/jsonTree/modules/css/pretty-json.css">
    <script type="text/javascript" src="/extensions/jsonTree/modules/libs/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/extensions/jsonTree/modules/libs/underscore-min.js"></script>
    <script type="text/javascript" src="/extensions/jsonTree/modules/libs/backbone-min.js"></script>
    <script type="text/javascript" src="/extensions/jsonTree/modules/pretty-json-debug.js"></script>
    ';

    $out->addHeadItem("jsonTree script", $script);

    return true;

}

3/ Include this file in LocalSettings.php

require_once( "$IP/extensions/jsonTree/jsonTree.php" );

answered Jul 27, 2015 at 8:58

Paul

1,3906 gold badges27 silver badges50 bronze badges

1 Comment

Florian Over a year ago

That's the worst way you can do it in a MediaWiki extension. This bypasses the ResourceLoader, which takes care about a lot of useful things, read mediawiki.org/wiki/ResourceLoader/Features and mediawiki.org/wiki/ResourceLoader/… to know, how to develop an extension with the ResourceLoader. You can add a module with $out->addModules() in your onBeforePageDisplay hook handler.

Collectives™ on Stack Overflow

How to add css and js files to mediawiki?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related