This is an old revision of the document!


WordPress Plugins from OutlyerNet

Caveat emptor

Here I'll place plugins I've written or modified to fit my needs, but I'm not a WordPress hacker, so I might be re-inventing the wheel for built-in functions or pre-existing, much better plugins.
If you know that's the case, please contact me :).

I can't say for sure either if I'm inadvertently breaking something or punching security holes into <abbr title=“WordPress”>WP</abbr> although I can't see any such problems in the code I'm publishing.

These are plugins I wrote for my personal use, I've tried to make them usable by others before publishing but there're some rough edges.

Code here is published under the GPL license unless specified otherwise.</p>

No longer needed

This plugin was integrated back into the main Interlinks so it is deprecated.

<p><a href=“files/kd-o-interlinks.php”>Download v1.0a+</a> (last update october 13th 2007)</p>

Interlinks+ is based on Interlinks by Harley. The original adds a very nifty feature: it enables wiki-style interlinks (e.g. [[Some article]] will be converted to a link to the post/page titled "Some article").

There's a feature I missed in Interlinks: Support for piped links; continuing with the above example, [[Some article|That's a nicer title IMHO]] would link to "Some article" but the link text will be "That's a nicer title IMHO".

Additionally I added a couple extra modifications to generate valid XHTML, and made the link also display the article's title.

Let's compare Interlinks and Interlinks+:


Case 1: Standard interlink
Example: [[My article]]
Interlinks Interlinks+
Generated HTML
<a href="http://example.invalid/my-article/">My article</a>
<a href="http://example.invalid/my-article/" title="My article">My article</a>
Rendered HTML My article My article

Case 2: Interlink with user-supplied text
Example: [[My article|My first article]]
Interlinks Interlinks+
Generated HTML
<font color='red'>My article</font>
<a href="http://example.invalid/my-article/" title="My article">My first article</a>
Rendered HTML My article|My first article broken link My first article

Case 3: Broken link
Example: [[Broken]] (where “Broken” doesn't exist)
Interlinks Interlinks+
Generated HTML
<font color='red'>Broken</font>
<span style="color:red;">Broken</span>
Rendered HTML Broken broken link Broken broken link

<p><a href=“files/net_outlyer_wp-relativeurls.php”>Download v1.5</a> (last update october 14th 2007)</p>

Relative URLs is mainly targeted at people with a local copy of their WordPress site and those that reorganise and/or change their pages hierarchy often although many standard installations can also take advantage of it.

Relative URLs can be seen as kind of complementary to Interlinks: It creates a valid URL or link from a relative path.
If you want to link to a post Interlinks or Interlinks+ are better alternatives, but if you want to link to a given file in your site neither will help you.
I guess so far it isn't clear what's the need for such a plugin, so let's clarify a bit, note that:

  • Pages can be accessed from more than one URL (I'm assuming your WordPress installation is in a subdirectory and URL redirection is being used):
    • http://example.com/parentpage/page/
    • http://example.com/wordpress/parentpage/page/
    • http://example.com/wordpress/?page_id=2
  • Using an absolute URL to refer to stuff in the site has the potential of being broken if you
    • Change WordPress' path, e.g.: http://example.com/wordpress/ is moved to http://example.com/ or http://example.com/blog/.
    • Change your (sub)domain, e.g. http://example.com/ becomes http://blog.example.com/.
  • Using a relative URL to refer to stuff in the site has the potential of being broken if you (or visitors)
    • Access from a different URL, e.g.: A relative URL like images/im.jpg will point to different things when accessed from http://example.com/parentpage/page (http://example.com/parentpage/page/images/im.jpg) and http://example.com/wordpress/?page_id=2 (http://example.com/wordpress/images/im.jpg).

Finally, if you use a local copy of WordPress to test stuff, chances are your local copy would have quite a different URL, e.g. http://localhost/~username/wordpress/ and you might want your URLs to point to the local copy and not the on-line site.</p>

Usage

Enclose your local URL in double braces (e.g. {{myrelative/url}}), to get a full URL generated dynamically, e.g. to http://example.com/wordpress/myrelative/url.

Enclose your local URL in double braces along a text description (separated by a space) to get a dynamically generated link to the full URL.
{{the_url/file.txt The text file}} would become <a href="http://example.com/wordpress/the_url/file.txt">The text file</a>.

Note you'll have to encode any spaces in the url (e.g. to link to “the file”; you'll have to encode the space (replace it with %20) i.e.: {{the%20file}}.

Escaping Relative URLs

If you want to write literal double curly brackets ({{'') then you'll have to use an //html entity// such as <html><samp></html>''&#x7b;''<html></samp></html> and <html><samp></html>''&#x7d;''<html></samp></html> (or <html><samp></html>''&#123;''<html></samp></html> and <html><samp></html>''&#125;''<html></samp></html>). For maximum security use at least one on each end, e.g. <html><samp></html>''&#x7b;{\_whatever\_&#x7d;}''<html></samp></html> will be parsed correctly as <html><samp></html>''&#x7b;{\_whatever\_&#x7d;}''<html></samp></html>. \\ BUT beware of the visual editor in WordPress (although if you use it you're probably used to fight it ;). ===== JS Base2 ===== <alert type="warning" icon="fa fa-warning">This section isn't finished</alert> <p><a href="files/js-base2-1.0+0.9a.tar.gz">Download v1.0+0.9a</a> (last update october 24th 2007). (Note <var>1.0</var> is the plugin version and <var>0.9a</var> is the base2's version used in the plugin).</p> A completely trivial plugin that loads [[http://dean.edwards.name|Dean Edwards]] **base2** JavaScript library (see [[http://dean.edwards.name/weblog/2007/03/yet-another|[1]]] and [[http://code.google.com/p/base2/| [2]]]). This library is mostly a cross-browser fix of the <html><abbr title="Document Object Model">DOM</abbr></html> plus a selectors API implementation (allowing selection from JavaScript with CSS selectors). <label type="info">Note</label> It is used by the following plugin :) ===== JS Syntax Highlighter ===== <p><a href="files/js-syntax-highlighter-0.2.tar.gz">Download v0.2</a> (last update october 25th 2007).</p> <p>This plugin loads <a href="http://code.google.com/p/syntaxhighlighter/">Alex Gorbatchev's</a> <strong>SyntaxHighlighter</strong> JavaScript script. With a twist :)</p> <p>SyntaxHighlighter is a script that will highlight code from JavaScript when marked appropriately, hence allowing you to post raw code that will be automagically prettyprinted on load. <br /> I needed a couple workarounds to use it on my site and they were the motivation for this plugin: </p> <dl> <dt>First problem: Code must be enclosed in either a <code>&lt;pre&gt;</code> or a <code>&lt;textarea&gt;</code> tag, with their <code>name</code> attribute set to certain (user-selectable) value. <br /> The problem is, <code>&lt;pre&gt;</code> has no <code>name</code> attribute so the page wouldn't validate.</dt> <dd style="margin-bottom:1em"><strong>My solution:</strong> (Note I opted to not modify SyntaxHighlighter code) Mark code with a class and then, on-the-fly, add the name attribute from JavaScript (this makes the HTML validate as the invalid attribute is only created in-memory).</dd> <dt>Second problem: Each supported language has its own associated JavaScript file which you should load when writing code for a that language. I felt loading them site-wide was was overkill (and I don't know which languages I might need), while loading them as needed, in the article body felt cumbersome.</dt> <dd><strong>My solution:</strong> Load the common script, see if any languages are needed and load them dinamically. As a side effect the page will load faster (the required languages are loaded after the page ended loading).</dd> </dl> <p>So <strong>in short</strong> this plugin loads SyntaxHighlighter allowing your pages to validate and only loading language files as needed.</p> <p>I also changed the CSS file a bit to use fonts I consider look better and added colours to <var>functions</var> and <var>variables</var>.</p> <h3 id="jsh-usage">Usage</h3> <p>Plugin installation:</p> <ol> <li>Decompress in the <code>wp-content/plugins</code> folder, it will create its own folder.</li> <li>Activate it from <abbr title="WordPress">WP</abbr>'s admin panel.</li> </ol> <p>Syntax highlighting:</p> <ol> <li>Wrap your code in a &lt;pre&gt; or &lt;textarea&gt; with class '<code>syntax-highlight</code>' and the appropriate class for the language of the block, e.g. '<code>cpp</code>' for C++ (see <a href="http://code.google.com/p/syntaxhighlighter/wiki/Languages">the full list</a>).</li> <li>There's no step 2 :P But remember the highlighting takes place a bit after loading the page.</li> </ol> <h4 id="jsh-no-base2">Usage without <em>base2</em></h4> <p>I dropped support for such a situation. You can try with an older version of loader.js but keep in mind that then languages <strong>won't be autoloaded</strong>.</p> <h3 id="jsh-caveats">Caveats of the current version</h3> <h4 id="jsh-passing-options">Passing options for a single block</h4> <p>Passing options for a block to SyntaxHighlighter needs a workaround as my loader won't detect the language then, the workaround is to use a hidden, empty block without options, i.e:<br /> If you want to have something like</p> <!-- Ensure correct loading of language file --> <div style="display:none !important;"><pre class="syntax-highlight html javascript"></pre></div> <pre class="html:nogutter syntax-highlight"> &lt;pre class=&quot;syntax-highlight javascript:firstline[10]&quot;&gt; function doSomething() { } &lt;/pre&gt; </pre> <p>Then you'll need to add a hidden block with the language class(es) needed. That block can have the classes of all needed languages:</p> <pre class="html:nogutter:firstline[5] syntax-highlight"> &lt;!-- Hidden, meaningless, code block --&gt; &lt;div style=&quot;display:none !important;&quot;&gt; &lt;pre class=&quot;syntax-highlight html cpp&quot;&gt;&lt;/pre&gt; &lt;/div&gt; </pre> <h4 id="jsh-disabled-aliases">Disabled language aliases</h4> <p>Due to the way the code is written the following language name aliases won't be looked for (all of them have alternatives): <code>c++</code>, <code>c#</code>, <code>vb.net</code>.</p> <p>They could be enabled with some escaping but I didn't feel the need :p</p> <h3 id="jsh-config">Customisation</h3> <p>There're a couple things you might want to tweak, to change them edit the file <code>loader.js</code> (note that the version actually loaded in the browser is the one in the <code>js/</code> directory, but it is shipped packed with <a href="http://dean.edwards.name/packer/">Dean Edwards' packer</a>, which makes it quite harder to edit. I suggest you to edit the version in the <code>full-js/</code> directory and once you're happy with it pack it again.</p> <script type="text/javascript" src="http://outlyer.net/site/wp-content/plugins/js-base2/base2-dom-fp.js"></script> <script type="text/javascript" src="http://outlyer.net/site/wp-content/plugins/js-syntax-highlighter/js/shCore.js"></script> <script type="text/javascript" src="http://outlyer.net/site/wp-content/plugins/js-syntax-highlighter/js/loader.js"></script> <script type="text/javascript"> dpLoader.init('http://outlyer.net/site/wp-content/plugins/js-syntax-highlighter'); </script> <pre class="syntax-highlight javascript:firstline[19]"> bloggerMode: false, // Set to true if the blogging software adds &lt;br /&gt;'s // See: &lt;http://code.google.com/p/syntaxhighlighter/wiki/BloggerMode&gt; opts: [ // Options for HighlightAll, see &lt;http://code.google.com/p/syntaxhighlighter/wiki/HighlightAll&gt; true, // Show Gutter false, // Show Controls (!*not default*) false, // Collapse all 1, // First line false // Show columns ], WAIT_TO_LOAD: 200, // (ms) Period to wait between checks for language loading FAIL_TIMEOUT: 120000, // (ms) After this period will stop trying to load languages </pre> <p>These are the meaningful variables, I think they're self explanatory enough, a note of warning though: if some of the languages fails loading you'll have to wait for <code>FAIL_TIMEOUT</code> milliseconds before syntax highlighting gets enabled. Set it too low, though, and you'll get bogus failures.</p> <!-- End of JS Syntax Highlighter --> <hr style="margin-top:1em;" /> <footer> <div class="footer"> <address>&copy; 2007 <span id="email">Toni Corvera &lt;outlyer at gmail dot com&gt;</span> <br /> <span class="tiny">[<a href="http://outlyer.net./pubkey.asc">GPG Key</a>]</span></address> <br /> <aside><address> Other than by e-mail, you can leave your comments about any of these plugins in the <a href="http://outlyer.net/codigo/wordpress/" hreflang="es">WordPress code</a> page in my site. </address></aside>

All dates/times in this page are UTC.