WordPress:Modifying Options Pages

Modifying already existing option pages for plug-ins can be done, although it's not pretty.

Note: This is not relatively easy, so if you're a beginner I wouldn't recommend trying this.

Initializing Variables

First, inside your main plug-in PHP source you need to declare the variable(s) that you wish to add to the options pages:

//Function to create the vars in the database
function set_samplePlugin_options () {
     add_option('fake_option_a','value','Description');
     add_option('fake_option_b','value','Description');
     add_option('fake_option_c','value','Description');
}

//Function to delete the vars from the database
function unset_samplePlugin_options () {
     delete_option('fake_option_a');
     delete_option('fake_option_b');
     delete_option('fake_option_c');
}

//Add and Remove vars when creating/removing plugin
register_activation_hook(__FILE__,'set_samplePlugin_options');
register_deactivation_hook(__FILE__,'unset_samplePlugin_options');

Finding the insert XHTML

Now that we have the variables set we have to give the admin a way to edit them. Sure, we could just use the normal way of creating interfaces for the admin, but why do that when we can just add it on to another already made page.

Under the options tab we have five differently-named pages that we can add our options to:

1. options-general.php
2. options-writing.php
3. options-reading.php
4. options-privacy.php
5. options-permalink.php
6. options-misc.php

So here comes probably the hardest part of doing this: we actually have to look through the rendered source to look for a place to insert our own XHTML.

I'll be using options-reading.php for an example. So obviously the first step would be to navigate to that page on your site, logging in if needed. Once you have the page up. We'll need to look at the source of the page:

• IE7: Page -> View Source
• Firefox: View -> Page Source
• Safari: View -> View Source

Using the rendered page spot a location where you want to add your option. I wish to add mine right below "Encoding for pages and feeds".

Next, we'll look for those words in the source:

78 79 Encoding for pages and ... 80 <input name="blog_charset" type="text" id="blog...

(Note: Line numbers may vary based on installation)

Now, let's look for the whole element that we can repeat for our uses.

Notice this particular entry is in a table:

77 <table width="100%" cellspacing="2" cellpadding="5"...

78 79 Encoding for pages and ... 80 <input name="blog_charset" type="text" id="blog...

81 The character encoding you write your blog in (UTF-...

82 83

So from previous HTML knowledge (which I assume you have if you are reading this) I know that we can add another row to the table by adding another "TR" tag. At this point we need to find the ending of the "TR" tag so we can tell our code where to add our new one. So back to the code...

81 ... recommended</a>) 82 Thats the ending of the "TR" tag. You'll note that the end has to be distinct, so our code won't find it anywhere else in the page, and also that the end can't be too long, or else our code won't be able to find it. So I have chosen: "recommended</a>)\n" We need the \n there in order for our code to be able to recognize that there is a new line. Save that string for later when we write the function.

Creating new XHTML

Now that we know where to insert the code, and what the code should look like, we need to create our own code. Let's take a look at the whole row:

Encoding for pages and feeds:

<input name="blog_charset" type="text" id="blog_charset" value="UTF-8" 
       size="20" class="code" />


The character encoding you write your blog in (UTF-8 is 
<a href="link">recommended</a>)

By looking at how the page is displayed we can pick apart the different elements of the XHTML. The label is located in between the "TH" tags the actual text box is of course the input tag and they put a description below it after the "BR tag. You'll also notice that the name and the id of input have to be equal to the option name that you set up earlier. We'll get into writing the value later. So heres an example:

Sample Option:

<input name="fake_option_a" type="text" id="fake_option_a" value="" 
       size="20" class="code" />


This is a description

Writing the Script

So at this point we have where to put the code and what to put in the page but we now need a way of writing the XHTML to the page. Normally we would do just that write it in ourselves, but since this has to be done automatically we will do it through javascript (since WordPress doesn't provide us with filters for that).

So back to the main plug-in PHP let's add a function. I'll call it "add_fake_options" because it will do just that:

function add_fake_options () {
}

Now we need to tell WordPress to run that function when creating the admin-footer using action hooks:

function add_fake_options () {
}
add_action('admin_footer', 'add_fake_options');

Now lets tell it to create a javascript on the admin pages by adding script tags:

function add_fake_options () {
     echo '<script type="text/javascript">';
     echo '</script>';
}
add_action('admin_footer', 'add_fake_options');

Next we'll tell it to only run on the page we want (we could also do this through PHP as well. What this part of the code does is it will search through the page title and see if it matches 'options-reading'. If you are using a different page substitute the file-name where it says options-reading ex: options-writing or options-general.

function add_fake_options () {
     echo '<script type="text/javascript">';
     echo 'if(window.location.href.indexOf("'.
          'options-reading")!=-1) {';
     echo '}';
     echo '</script>';
}
add_action('admin_footer', 'add_fake_options');

Now let's tell it to replace the content of the end of the previous row with that and the XHTML that we wrote. In the code below we use the "replace" function to look through the form1 element on options-reading for the code that we looked for in section "Finding the Insert XHTML". The syntax is: document.form1.innerHTML.replace(insertHTML,insertHtml+replaceHtml); Thus concatenating our replaceHtml to the insertHTML that it finds in options-reading

function add_fake_options () {
     echo '<script type="text/javascript">';
     echo 'if(window.location.href.indexOf("'.
          'options-reading")!=-1) {';
     echo 'document.form1.innerHTML =';
     echo 'document.form1.innerHTML =';
     echo 'document.form1.innerHTML.replace(';

echo '"recommended</a>)\n",'; echo '"recommended</a>)\n'. ' '. ''. 'Sample Option: '.

          '<input name=\"fake_option_a\" '.
          'id=\"fake_option_a\" value=\"\" '.
          'size=\"20\" class=\"code\" '.
          'type=\"text\"> '.

'This is a description ");'; echo '}'; echo '</script>'; } add_action('admin_footer', 'add_fake_options'); Now currently as it is it will add the option to the page but not display it's current setting nor save the option upon clicking update. Let's have it display the current setting first by adding a get_option() function inside the value variable of our input tag: function add_fake_options () { echo '<script type="text/javascript">'; echo 'if(window.location.href.indexOf("'. 'options-reading")!=-1) {'; echo 'document.form1.innerHTML ='; echo 'document.form1.innerHTML ='; echo 'document.form1.innerHTML.replace('; echo '"recommended</a>)\n",'; echo '"recommended</a>)\n'. ' '. ''. 'Sample Option: '.

          '<input name=\"fake_option_a\" '.
          'id=\"fake_option_a\" value=\"'.
          get_option('fake_option_a').
          '\" '.
          'size=\"20\" class=\"code\" '.
          'type=\"text\"> '.

'This is a description ");'; echo '}'; echo '</script>'; } add_action('admin_footer', 'add_fake_options'); Now, it should also display it's current setting but in order to tell the script to update it when the admin clicks update we need to edit a hidden variable called page_options which contains a comma-separated list of all the options on the page. First we'll select the hidden input object using getElementsByName('page_options') then we'll add our name onto the value of it following a comma: function add_fake_options () { echo '<script type="text/javascript">'; echo 'if(window.location.href.indexOf("'. 'options-reading")!=-1) {'; echo 'document.form1.innerHTML ='; echo 'document.form1.innerHTML ='; echo 'document.form1.innerHTML.replace('; echo '"recommended</a>)\n",'; echo '"recommended</a>)\n'. ' '. ''. 'Sample Option: '.

          '<input name=\"fake_option_a\" '.
          'id=\"fake_option_a\" value=\"'.
          get_option('fake_option_a').
          '\" '.
          'size=\"20\" class=\"code\" '.
          'type=\"text\"> '.

'This is a description ");'; echo 'document.getElementsByName("page_options")[0]'. '.value = '. 'document.getElementsByName("page_options")[0]'. '.value + ",fake_option_a";'; echo '}'; echo '</script>'; } add_action('admin_footer', 'add_fake_options'); WordPress:Image:ModOptnPageExample.png And there you have it :] adding options to a current option page isn't that hard if you know what you are doing contrary to my comment at the top. To add more then one option after initializing the variable you need to add on the XHTML to the same place as well as the name on to the page_options list.