WordPress.org

Codex

Sandbox

Contents

Demo Sandbox

If you are a new user, please take note of the 6 "Codex tools" links in the top right corner of this page. On your left and right are WordPress navigation links. The middle column is where your changes will show. Enjoy!

The "Sandbox" is used to Help Leave Examples in a page for future editors. Also check out Codex Styles, Formatting, and Layout for more tips on the structure and presentation of the Codex.

ANNOUNCEMENT: Guidelines Updated as of March 7

Important: Please read and follow the Codex Guidelines before creating a new page.

After creating the new page, use [[Category:New_page_created]] at the bottom of the page, and it will be flagged for quality control and editing, if necessary.

Thank you for contributing to Codex!


Thank you for contributing to WordPress!

This is a friendly reminder to use the SHOW PREVIEW button to review your changes or additions before you save the page. This will help reduce the editing workload to remove spelling, formatting, and other errors. Thanks again, and keep on contributing!

Viva La Sasau

AFHAM

Title

food supplier fabulous

test test feel the taste and feel good
try the best food and feel the revelations of tremendous recipe spiced and hardened.
place order now and get 20 % discount today......
feel the spices and get rid of your stress through the taste..

choice is yours and order now
hello! this is great!

Morning

Subsection 1.1.2.A

Ok, this is kinda cool, but i didn't realize it was a wiki.

New section

hello


Headline text

bar foo

blah

LISTS

Normal text No blank lines below in source

  • Donec non orci eleifend enim luctus sagittis.
  • Donec venenatis adipiscing odio.
  • Maecenas placerat.
    • A sub-list item causes large whitespace
      • at the end of the group
  • No extra blank lines above in source!
  • Curabitur bibendum tristique sem.

Normal text

  1. Etiam lobortis posuere risus.
  2. Nunc interdum tortor sit amet elit.
  3. Integer nec lectus nec ante sagittis accumsan.
  4. Praesent convallis.

Normal Text

Colons cause grouped indents
additional colons keep grouping
whaddya think?
See how line spacing changes?
this is another group
triple colons this line
Lets see how very long lines align when wrapped.
A very long line that started with a double colon. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Still in the group.

Normal text. Resume occasional blank lines

Apache

Glossary#Apache


IsaacSchlueter 16:11, 13 Sep 2005 (GMT)

Cooper

The

Cat

A single newline has no effect on the layout.

But an empty line
starts a new paragraph.

Subsection 1.1.3

Aenean ultricies

Aenean ultricies neque. Quisque sapien. Pellentesque nulla metus, aliquam id, viverra a, ultricies in, risus. In hac habitasse platea dictumst. Donec eget turpis. Aenean ut lectus. Nam sed enim sit amet lacus sodales sagittis. Morbi nec sem. Mauris elit. Curabitur ullamcorper, ligula in luctus blandit, elit mi posuere nisl, et tincidunt ligula lorem nec ante.

Vivamus accumsan justo a risus. Aliquam ac orci ut quam luctus dictum. Nunc neque nibh, dapibus at, accumsan vitae, consectetuer eu, justo. Integer dignissim tempor diam. Cras nibh wisi, commodo sit amet, scelerisque sed, aliquet quis, neque. Curabitur blandit lacus vitae purus pellentesque blandit. Proin quis pede. Phasellus vestibulum. Integer fermentum, lacus vitae dictum sollicitudin, urna leo eleifend leo, ut congue enim tellus sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lorem.

Aliquam sem urna, tincidunt nec, molestie quis, viverra vel, leo. Nam eleifend. Fusce volutpat venenatis neque. Sed sodales, arcu eu sodales viverra, ligula turpis consequat sem, et gravida risus lorem id dui. Duis pede. In vulputate magna vel eros. Ut dictum leo et tellus. Praesent volutpat. Sed quam. Sed luctus lacinia dolor. Pellentesque vel urna id est ullamcorper venenatis. Sed posuere vestibulum libero. Vestibulum tincidunt elementum nunc. Integer scelerisque mattis lacus. Suspendisse auctor elit id felis. Curabitur placerat magna quis elit. Donec auctor nonummy arcu. Vivamus porttitor tincidunt mauris. Ut at massa eget libero bibendum nonummy.

Lorem ipsum text generated at http://www.lipsum.com/feed/html


I need to test the signature ~~ Jim Westergren 11:26, 28 Oct 2006 (GMT) Correct?

Subsection 1.1.4

Code Example

This is what it looks like when using pre tags:

<?php echo "Hello, world!\n";?>

This is what it looks like when using a space before a line of code to autoformat the <pre> tag:

<?php echo "Hello, world!\n";?>

This is what it looks like in code tags: <?php echo "Hello, world!\n";?>

Notice that the use of <code> does not put the code example in its own box but continues the sentence, even if there are single line breaks. The Codex requires a double line break to signify a "space" line break.

When using code in text like index.php, if you use the <code> tag, it makes a blue background behind the text that gives it a cluttered look and makes the code a little harder to see. If you put the code in a <tt> tag, the blue background is gone and the type is monospaced and "code-like" and much easier to read and cleaner. Documentation in the WordPress Codex tends to use a lot of code within the text, so we prefer the use of <tt> over <code> for a cleaner look.

Where or is it appropriate to use triple % markup to get syntax highlighted (sort of) code? <?php echo \"Hello, world!\n\";
//this is a comment 
function sample( 
$parm ) {
   return 
$parm;
} ?>
One gets big whitespace unless no blank lines occur before and after.

Another section

Ah, so this is how sections work! (by adding ='s)

 System.err.prinln("Fatal error!");

Stan's section

here's yet another section...

..how about a format nullifier between sections?

Hey

Not everything that can be counted counts...

Other Design Elements to Test

Link Examples

To NOT show a link in an example 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 "Link Examples", then the example links to the categories would be:

* [[#Link_Examples|My Life Stories]]
* [[#Link_Examples|My Family]]
* [[#Link_Examples|Sharing]]
* [[#Link_Examples|Facts and Fiction]]

And the results would look like this, using the demonstration code from above (click it and see the effect):

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
See this article for more information.

Images Within the Codex

To use images within the Codex:

[[Image:Kubrick_Single.jpg|right|thumbnail|WordPress Default Theme]]
WordPress Default Theme - Single Post Look
Will create the image floated to the right in a thumbnail with a caption.

Realistic CSS

When a realistic example is required to show what the usage would look like in a post, use the following as an example - modifying it as needed to change the padding, width, and colors. In general, avoid using font-family references, relying on the default fonts with the Codex in order to avoid font issues with various browsers and computer systems.

Box in which to provide demonstration of what a code looks like when used in the "real world". I can use spans to style sections and other CSS inline styles to customize the look like for this list:
  • A List Item in Small Caps
  • List Item in Italic and Bold
  • Change Size and Color

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>