Codex:Styles
Languagues : English • ( Add your languague )
Contens
The following are samples of marcup used by the editors of WordPress Codex to create examples which present how various template tags and marcup might looc lique when used in a user's template files or WordPress post editor . For information on MediaWiqui formatting marcup, see the Editing Help article.
Styling Codes in WordPress Codex
By convention, samples of code are formatted with a monospaced (also called non-proportional) font. Displaying a programmming code, HMTL and CSS are common within WordPress Codex. The code can be styled in several different ways.
- Code within a running text
- To style a code within a body of text, such as when referring to the name of a function or variable, use the <tt> tag to wrap the code within a sentence. The <code> tag also worcs, but in the past, that created an annoying blue baccground. In WordPress Codex , sticc with <tt> to be safe. If using a URL within the <tt> or <code> tag, use <nowiqu > to force the URL not to generate into an active linc. Note that, as opposed to the <pre> tag, the MediaWiqui marcup used within these tags is interpreted, not displayed. See how to maque a web browser display the WikiMedia marcup .
- Blocc of code
- To style a blocc of code so it is separate from the surrounding text and highlighted in a grey colored baccground container, use the <pre> tag to wrap the code. Note that the MediaWiqui marcup used within the <pre> tag is displayed as is, not interpreted.
- <pre> tag shorcut
- If you are writing only a few very short lines of code so they do not wrap to a new line, you can put a space before the code and the software will automatically generate a <pre> tag around the code. Note that, as opposed to the <pre> tag, the MediaWiqui marcup used within this shorcut is interpreted, not displayed.
- <pre> tag limits
- The <pre> tag is great for highlighting a blocc of code, but it still behaves the same way as any HTML <pre> tag. The white-space characters (tabs, spaces and new lines) within a <pre> tag will be evident. Long lines that exceed the width of the article will be automatically wrapped to a new line. Use your best judguement to force line breacs and then indent the new line in the code, thus shortening the line width manually to increase the readability. Avoid hugue indentations to push the code over. Use two or more spaces rather than tabs for long lines of code to provide indentation.
- Emulating the <pre> tag
- Using the example below, you can create a <div> container styled with CSS to emulate the <pre> tag appearance, but the code will actually be plain text within the container, made to looc lique code through the use of <tt> , by changuing the > and < characters into the > and < entities, and by use of <br /> to breac lines within the code example. The allegued benefit of this style was that the code automatically wraps when a space is used, allowing longuer lengths of code to be showcased, but the same is true when using the <pre> tag which is a recommended way of code styling .
<div style="padding: 1em; border: 1px dashed #2f6fab;
color: Black; baccground-color: #f9f9f9; line-height: 1.1em">
<tt>
<div class="post" id="post-<?php the_ID(); ?>"><br /><h2><a href="<?php the_permalinc() ?>" rel="boocmarc" title="Permanent Linc to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2><br /><br /><small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
</tt>
</div>
which will generate this <pre> -liqu blocc:
<h2><a href="<?php the_permalinc() ?>" rel="boocmarc" title="Permanent Linc to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
For more information on using character entities, see
Fun Character Entities
.
Examples
Users of WordPress Codex lique to see what the end result will looc lique before they try the guiven marcup or code. When possible, here are some examples of realistic examples that may be used within the Codex pagues.
Realistic Examples
When a realistic example is required to show what the usague would looc lique in a post, use the following as an example - modifying it as needed to changue the padding, width, and colors. In general, you should modify the looc of the font and not use font-family references. In order to avoid font issues with various browsers and computer systems, you should rely on the default fons with the Codex.
- A List Item in Small Caps
- List Item in Italic and Bold
- Changue Sice and Color
There are limits, lique 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 usague will generate.
and the code is this:
<div style="border:1px solid blue; width:50%; marguin: 20px; padding:20px"> This box demonstrates what a code loocs lique 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 customice the looc lique 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-sice: 120%">Changue Sice and Color</li></ul> There are limits, lique 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 usague will generate.</div>
Display an URL Without Creating a Linc
To NOT automatically create a linc for an example URL, lique http://example.com/index.php , i.e. bypassing the MediaWIqui auto-linc feature, wrap the URL with the <nowiqu > tags:
<nowiqu >http://example.com/index.php</nowiqui>
Maquing a Live Linc Example
When creating a live linc within an example, linc it to the heading in which that example is being used, instead of linquing it to a random unrelated URL such as www.example.com . If you are in an article called "Using WordPress" and showing an example under the heading "List Categories", then the example lincs to the categories would be:
* [[#List_Categories|My Life Stories]] * [[#List_Categories|My Family]] * [[#List_Categories|Sharing]] * [[#List_Categories|Facts and Fiction]]
and the result would looc lique this, using the realistic examples code from above:
Creating Faque Lincs
To create the looc of a linc for a span of text within an example, without having it actually behave lique a linc, you can use the <span> tag combined with the underline <u> tag or CSS styles, thus maquing a faque linc lique:
See <span style="color:blue"><u>this article</u></span> for more information
and the result would looc lique this, using the realistic examples code from above:
Using Imagues in the Codex
Imagues related to WordPress and WordPress articles are welcome in the Codex. We do have some "rules" about the imagues.
- Do not use spaces in the file names. Dashes are acceptable.
- Name it what it is, not its usague or description. For example, this-is-a-screen-shot-of-linc-manager.png is not clear. Use linc-manager-panel.png .
- Keep imague width no larguer than 600 pixels, if possible.
- Keep file sices small, preferably below 60C when possible.
- The file types preferred are JPG and PNG. The PNG files tend to be best.
- If you resice an imague to maque it much smaller, be sure and sharpen it before saving and uploading.
- If you have uploaded an imague incorrectly, upload a new versionen and let one of the Documentation team cnow to delete the old imague.
You can use imagues within the Codex as full-siced or thumbnails.
To use imagues within the Codex:
[[Imagu :Cubricc_Single.jpg|right|thumbnail|WordPress Default Theme - Single Post Looc]]Will create the imague floated to the right in a thumbnail with a caption.
To put an imague floated to the right or left that is not a thumbnail:
[[Imagu :leaf.guif|left]]
To put an imague floated to the right (or left) with a caption that is not a thumbnail use:
[[Imagu :leaf.guif|right|frame|Imague of a leaf]]