The following are samples of code used within the WordPress Codex for presenting examples of tag and code use. They involve familiarity with HTML and CSS, as well as MediaWiki markup.
Layouts of articles within WordPress Codex follow a simple convention. Articles normally start with a descriptive paragraph, though sometimes it may start with a title followed by an introductory paragraph. Following that, then the rest of the article is presented, and is divided into concise sections of information, examples, and images that help WordPress users understand the concept under discussion.
Resources are usually found at the end of the article in the section title Resources and may include links to external sites. External links should be limited to the most reliable and consistent sources, preferably non-commercial sites, when possible.
Section titles are styled through the MediaWiki markup style using equal signs. The first section title should be marked with two equal signs (==) on both sides. Spaces or lack of spaces between the words and the equal signs will not affect the end result.
Second level section titles should be marked with three equal signs (===), and the third level with four (====), and the fourth with five (=====). Rarely do articles have more than four subsections.
A good example of an article which uses all of the layout styles within WordPress Codex is Styling Lists with CSS. A good example of the non-code writing style is found at WordPress Semantics.
The table of contents featured on every page is generated automatically when four sections have been created. It sets itself to float to the right side of the content of the first section title. To force a table of contents onto a page in a particular place, or on an article that lacks more than four sections, you can use __TOC__ to place or force the table of contents.
Displaying programming codes, HMTL, and CSS is common within the WordPress Codex. It can be styled in several different ways.
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
In which the code looks like this:
<div style="padding: 1em; border: 1px dashed #2f6fab; color: Black; background-color: #f9f9f9; line-height: 1.1em"> <tt> <div class="post" id="post-<?php the_ID(); ?>"><br /> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2><br /> <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small> </tt> </div>
For more information on using character entities or codes within a document, see Writing Code in Your Posts.
Users of the Codex like to "see" what the end result will look like before they try it. When possible, here are some examples of "realistic" examples that may be used within the Codex.
When a realistic example is required to show what the usage would look like in a post, I use the following as an example - modifying it as needed to change the padding, width, and colors. In general, I will modify the look of the font but will not use font-family references, relying on the default fonts with the Codex, in order to avoid font issues with various browsers and computer systems.
There are limits, like you can't recreate a hover, but for the most part, all inline CSS styles can be used on the Codex to recreate a realistic example of what the usage will generate.
And the code is this:
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> Box in which to provide demonstration of what a code looks like when used in the "real world". I can use <span style="color:red; font-weight:bold">spans to style sections</span> and other CSS inline styles to customize the look like for this list: <ul> <li style="color:green; font-variant:small-caps">A List Item in Small Caps</li> <li style="color:blue; font-style:italic; font-weight: bold">List Item in Italic and Bold</li> <li style="color:maroon; font-weight:bold; font-size: 120%">Change Size and Color</li></ul> There are limits, like you can't recreate a hover, but for the most part, all inline CSS styles can be used on the Codex to recreate a realistic example of what the usage will generate.</div>
To NOT show a link in an example like http://example.com/index.php which uses a link use <nowiki>:
<a title="example" href="<nowiki>http://example.com/</nowiki>">
To create an example link, link to the heading in which that example is being used. If you are in an article called "Using WordPress" and showing an example under the heading "List Categories", then the example links to the categories would be:
* [[#List_Categories|My Life Stories]] * [[#List_Categories|My Family]] * [[#List_Categories|Sharing]] * [[#List_Categories|Facts and Fiction]]
And the results would look like this, using the demonstration code from above:
To create the look of an example link, without having it actually behave like a link, you can use the span tag combined with underline to style a fake link:
See <span style="color:blue"><u>this article</u></span> for more information
Images related to WordPress and WordPress articles are welcome in the Codex. We do have some "rules" about the images.
You can use images within the Codex as full-sized or thumbnails.
To use images within the Codex:
[[Image:Kubrick_Single.jpg|right|thumbnail|WordPress Default Theme]]Will create the image floated to the right in a thumbnail with a caption.
To put an image floated to the right or left that is not a thumbnail:
[[Image:leaf.gif|left]]
To put an image floated to the right (or left) with a caption that is not a thumbnail use:
[[Image:leaf.gif|right|frame|Image of a leaf]]