WordPress:Sandbox
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模板:Newpage
TEST TEST TEST------------
Viva La Sasau
AFHAM
food supplier fabulous
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
Subsection 1.1.2.A
New section
hello
Headline text
bar foo
- Donec non orci eleifend enim luctus sagittis.
- Donec venenatis adipiscing odio.
- Maecenas placerat.
- Curabitur bibendum tristique sem.
- Etiam lobortis posuere risus.
- Nunc interdum tortor sit amet elit.
- Integer nec lectus nec ante sagittis accumsan.
- Praesent convallis.
IsaacSchlueter 16:11, 13 Sep 2005 (GMT)
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.
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?
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:
* [[WordPress:#Link_Examples|My Life Stories]]
* [[WordPress:#Link_Examples|My Family]]
* [[WordPress:#Link_Examples|Sharing]]
* [[WordPress:#Link_Examples|Facts and Fiction]]
And the results would look like this, using the demonstration code from above (click it and see the effect):
- [[WordPress:#Link_Examples|My Life Stories]]
- [[WordPress:#Link_Examples|My Family]]
- [[WordPress:#Link_Examples|Sharing]]
- [[WordPress:#Link_Examples|Facts and Fiction]]
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:
[[WordPress:Image:Kubrick_Single.jpg|right|thumbnail|WordPress Default Theme]]
right|thumbnail|WordPress Default Theme - Single Post LookWill 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>
IsaacSchlueter 16:11, 13 Sep 2005 (GMT)
<?php echo "Hello, world!\n";?>
<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.
<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.
- [[WordPress:#Link_Examples|My Life Stories]]
- [[WordPress:#Link_Examples|My Family]]
- [[WordPress:#Link_Examples|Sharing]]
- [[WordPress:#Link_Examples|Facts and Fiction]]
- 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.