JavaScript in Template Files

The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script(). This function includes the script if it hasn’t already been included, and safely handles dependencies.

To use JavaScript repeatedly within your site, you can either set the call for the JavaScript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using JavaScript in any HTML page. To “load” the JavaScript file into your site, in the head, add something like this:

<script type="text/javascript" src="/scripts/emailpage.js"></script>

If your custom JavaScript isn’t working after including the previous line of code in your header.php template file, use the following line of code.

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/pathto/yourscript.js"></script>

Include the leading forward slash “/”, even if your file is located in the root of your theme.

Be sure that you define the type correctly, as your site will not validate without it.

In the spot where you wish to use the JavaScript, set the call for the JavaScript. For example, you are using a JavaScript that sets a link for users to “email this page” to a friend, and you want it to be under the post title. It might look like this:

<h3 class="storytitle">
 <a href="<?php the_permalink() ?>" rel="bookmark">
 <?php the_title(); ?></a>
</h3>
<div class="emailpage">
 <script type="text/javascript"><!--//--><![CDATA[//><!--
 emailpage();
 //--><!]]></script>
</div>

Using Multiple JavaScript Files Inside One Post or Page

When using functions laying in multiple JavaScript files, add all the JavaScript references in the header.php. If you really need to write the script reference in the body of the post or Page, ensure that the URL to the JavaScript file starts with the forward-slash (“/”), which is your webserver’s document root (the “htdocs” directory in the case of Apache webserver). This is called a fixed URL. If you do not specify the starting slash (“/”), it becomes a relative URL (“../../relative/path/to/javacripts/file.js”), and is calculated relative to the current location in the directory structure.

If you do this, you will almost surely need to maintain several versions of this reference because different parts of the displayed content are generated from different locations. For example, pages are created from .php template files in the WordPress root directory (note that this is not the webserver’s document root), while posts are created from .php template files in the chosen theme’s directory (“/path-to-wordpress-root/wp-content/themes/yourtheme/partofpost.php”). These are two different paths.

Troubleshooting Javascript

If you are having trouble with including JavaScript inside a post, use the Text Control Plugin, which allows you to control, on a global or per post basis, the ability to turn off WordPress’ automatic formatting features, which can quickly turn code into something readable instead of executable. Set the options on the post that you will be using the JavaScript on to have No Formatting orMarkup or nl2br, and No Character Formatting. You may have to experiment to get it to work. As a reminder, when using the Text Control Plugin, you must first Save and Continue Editing the post in order to see the Text Control Plugin options.

If you choose No Formatting, your post’s text will run together, so you will have to add paragraph tags and other HTML tags in order to format your page, as WordPress normally does that for you.

If your JavaScript does not work, triple check that you have not made any errors during the cut and paste into a group or single file. Be sure you used a text editor, and not a word processing program, to create the JavaScript file. Check the name of the function in the script file, as well as on your site. Not all JavaScript may work, and could possibly conflict with your PHP commands, but this is very rare.

If you are having trouble with this, the WordPress Support Forum may be able to help.

Resources

• DigWP – Including jQuery in WordPress the Right Way
• DigWP – Use Google Hosted JavaScript Libraries – Still the Right Way
• Mozilla Developer JavaScript Resource
• PHP Resource Index
• PHP Scripts

Before editing any of your WordPress files, check the following:

BACKUP! And Work from Backups 

Work from copies of backup files when possible and/or make sure that you backup your information frequently as you work and make changes. Keep backups in a safe place.

File Permissions 

When working online, you need to set the appropriate file permissions to modify and save them. If you see a note at the bottom of the WordPress Built-in Editor panel that says “If this file was writable you could edit it.”, this means that you need to change the file permissions before you can make any changes.

Use a Text Editor to Edit Files 

To make changes to files outside of the built-in Plugin or Theme Editor, use a text editor. DO NOT USE A WORD PROCESSING PROGRAM. Word processors change the quote marks to characters and may convert other characters, or bring in unwanted code; these changes will cause the file to break. There are also some HTML generator programs that should not be used, for similar reasons.

Using the Theme Editor and Plugin Editor

WordPress contains two built-in editors that allow you to edit Theme files directly from within your browser. They are called theTheme Editor and Plugin Editor.

Access the Theme Editor from the Administration > Appearance > Editor menu.

The Plugin Editor is located at Administration > Plugins > Editor.

To view a file in these editors, click on the file from the right-hand side list.

More information on editing themes is available at Theme Development and Using Themes. You can learn more about editing plugins at Writing a Plugin and Plugin Resources.

Be aware that if the theme you edit is updated, your changes will be overwritten. To better organize your changes and protect them from updates, consider creating a Child Theme in which to keep all your changes.

What Files Can Be Edited?

From within the WordPress Built-in Editor, the following file types may be edited, if writable:

• HTML
• PHP
• CSS
• .htaccess
• TXT (and related text-like files such as RTF)

Step-by-step instructions

• Start with your main theme stylesheet (usually style.css).
• Save this file as rtl.css
• Add the following attributes to the body selector:

  direction: rtl;
  unicode-bidi: embed;

• One by one, go over the CSS selectors and do the following: Remove any irrelevant attributes such as font styling attributes, colors, vertical positioning, width and height etc. Change the value (from right to left and vice-versa) of the following attributes:
  • text-direction
  • float
  • clear

   text-align: left;
   float: right;
   clear: left;

becomes

  text-align: right;
  float: left;
  clear: right;

• Add RTL versions of relevant images.

Some images are clearly suited only for one direction (arrows for example). Create a horizontally flipped version of those images.

• Mirror the following attributes, and zero the original
  • margin
  • padding
  • borders
  • background-position
  • right/left positioning

.commentslink{
	background:url("./images/comments.gif") no-repeat 0 3px;
	padding-left:15px;
        margin: 2px 4px 0px 12px;
        left: 10px;
}

becomes

.commentslink{
	background:url("./images/comments-rtl.gif") no-repeat 100% 3px;
	padding-left:0;
        padding-right:15px;
        margin: 2px 12px 0px 4px;
        left:auto;
        right:10px;
}

For buttons that have hidden text using text-indent, you need to change its value from negative to positive:

.image-button{
	text-indent:-99999px;
}

becomes

.image-button{
	text-indent:99999px;
}

Tools

The RTL Tester plugin allows you to easily switch the text direction of the site: http://wordpress.org/extend/plugins/rtl-tester/

P.S. This plugin allows to VIEW ONLY RTL. i.e. How would your site look like when its Text Direction is changed & this change isn’t viewed by the viewers, (unless the whole CSS is changed).

Special Cases

• You’ll need to manually adjust pixel positioned backgrounds. If the original value is ‘0’ you can change it to 100%
• Positioning: remember to assign the ‘auto’ value to the original selector

Writing a Post in RTL Language

WordPress default visual text editor doesn’t support writing in RTL languages like Hebrew, Persian and Arabic. Therefore, if you’re willing to write a post in one of those languages, you should either :

• Reinstall / Change your WordPress version to be in that language, which fixes this issue with allowing you as a default to write in RTL.
• Use this plugin: http://wordpress.org/plugins/wp-rtl/ which adds two buttons to the TinyMCE editor (if you have it) to enable changing text direction from Left to Right (LTR) and Right to Left (RTL).

Pages are for content such as “About,” “Contact,” etc. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site — information that is always applicable. You can use Pages to organize and manage any content.

General

In general, Pages are very similar to Posts in that they both have Titles and Content and can use your WordPress Theme templates files to maintain a consistent look throughout your site. Pages, though, have several key distinctions that make them quite different from Posts.

What Pages Are:

• Pages are for content that is less time-dependent than Posts.
• Pages can be organized into pages and subpages.
• Pages can use different Page Templates which can include Template Files,Template Tags and other PHP code.

What Pages are Not:

• Pages are not Posts, nor are they excerpted from larger works of fiction. They do not cycle through your blog’s main page. WordPress Plugins are available to change the defaults if necessary.
• Pages cannot be associated with Categories and cannot be assigned Tags. The organizational structure for Pages comes only from their hierarchical interrelationships, and not from Tags or Categories.
• Pages are not files. They are stored in your database just like Posts are.
• Pages are not included in your site’s feed.

Changing the URL of Your Pages

To change the URL part (also referred to as “slug”) containing the name of your Page, use the “Edit” (or “Change Permalinks” in older WordPress versions) button under the Page title on the Edit screen of the particular Page, accessible from Pages tab of WordPressAdministration Panel.

Creating a List of Pages

WordPress is able to automatically generate a list of Pages on your site within the sidebar or footer, for example, using a Template Tag called wp_list_pages(). See the wp_list_pagespage for information on how to customize how WordPress displays the list of Pages on your site.

There are also WordPress Plugins that will help you display a list of Pages within in Posts and in other areas of your WordPress Theme.

Creating Your Own Page Templates

The files defining each Page Template are found in your Themes directory under /wp-content. To create a new Custom Page Template for a Page you must create a file using a plain text editor (e.g Notepad or TextWrangler). Let’s call our first Page Templatesnarfer.php.

At the top of the snarfer.php file, put the following:

<?php
/*
Template Name: Snarfer
*/
?>

The above code is required and defines the snarfer.php file as the “Snarfer” Template. “Snarfer” may be replaced with most any text to change the name of the Page Template. The Template Name will appear in the WordPress Theme Editor for editing. For more information on Theme naming conventions see reserved Theme filenames for file names you should not use.