In my second WordPress tutorial I will guide you through the process of creating individual options pages.
First off, I think it is necessary to explain exactly what I mean by an “individual WordPress option page”. Whilst there are several tutorials available that tell you how to create a generalized WordPress options page, there seems to be nothing that tells you how to create standalone edits.
By this I mean, say if wanted to add an extra menu item to the admin area that said for example “Edit The Homepage Text”, how would we go about it? This post will tell you how.
Establishing a connection
Firstly, we need to create a link to our new function file that will create our individual option page. To do this, open up your themes functions.php file (or create one if it doesn’t exist) and add the following code:
<?php require_once ( get_stylesheet_directory() . '/home_page_text.php' ); ?>
This code simply tells our functions.php file to open our new file “home_page_text.php” file. Once this is done, we need actually create this file and start building our function.
Creating the page
The first part of our file looks like this:
<?php
$sa_options = array(
'intro_text' => '',
);
if ( is_admin() ) : // Load only if we are viewing an admin page
function sa_register_settings() {
// Register settings and call sanitation functions
register_setting( 'sa_theme_options', 'sa_options', 'sa_validate_options' );
}
add_action( 'admin_init', 'sa_register_settings' );
function sa_theme_options() {
// Add theme options page to the addmin menu
add_menu_page( 'Home Page Text', 'Home Page Text', 'manage_options',
'edit_home_page_text', 'sa_theme_options_page', '', 30 );
}
add_action( 'admin_menu', 'sa_theme_options' );
?>
<?
// Function to generate options page
function sa_theme_options_page() {
global $sa_options, $sa_categories, $sa_layouts;
Above, we have simply created a new function for registering the new option (home page text) using the register setting wordpress function. The most important part of the above code is the “add_menu_page” bit, which is the code that actually adds a new menu item to the admin panel named “Home Page Text”. The add_menu_page function accepts many other parameters which can be read about here.
I do want to cover two of these parameters though. The fifth parameter sets what function is to be used, and the seventh (30 above) sets where on the menu the item should actually appear. Setting it to thirty as we have above places it just above the Appearance tab. At this stage, your admin panel should look something like this:
Creating the form
So we have successfully created a new menu item, specifically for changing the text on the homepage. Now we need to create some content for this new page. Add the following code directly below what code you have already added:
?>
<div>
<div id="icon-edit"><br /></div><h2> Edit The Homepage Text </h2>
<?php
if ( !isset( $_REQUEST['settings-updated'] ) ) {
$_REQUEST['updated'] = false; }
if ( isset( $_REQUEST['settings-updated'] ) ) {
$_REQUEST['updated'] = true; }
if (true != $_REQUEST['settings-updated'] ) { echo ''; }
if ( false != $_REQUEST['settings-updated'] ) {
echo '<div id="message"><p><strong>Home Page Test Successfully Changed.</strong></p></div>';
}
?>
<form method="post" action="options.php">
<?php $settings = get_option( 'sa_options', $sa_options ); ?>
<?php settings_fields( 'sa_theme_options' );
/* This function outputs some hidden fields required by the form,
including a nonce, a unique number used to ensure the form has been submitted from the admin page
and not somewhere else, very important for security */ ?>
<table>
<td>
<textarea id="intro_text" name="sa_options[intro_text]" rows="15" cols="100">
<?php echo stripslashes($settings['intro_text']); ?>
</textarea>
</td>
</tr>
</table>
<p><input type="submit" value="Save Text" name="submit" id="submit" /></p>
</form>
</div>
<?php
}
function sa_validate_options( $input ) {
global $sa_options, $sa_categories, $sa_layouts;
$settings = get_option( 'sa_options', $sa_options );
// We strip all tags from the text field, to avoid vulnerablilties like XSS
$input['intro_text'] = wp_filter_post_kses( $input['intro_text'] );
return $input;
}
endif; // EndIf is_admin()
?>
The code above first of all gives our new page a title that is in-keeping with the style of our admin area. Next up, we define what message to display when our text has been updated. We then create our form for actually entering and editing the home page text. We then validate the value of this text and return it to be stored, using options.php.
Our Final Result should look something like this:
Using The New Value
The final step to our task is to actually reference our new value in our home-page. To do this, open index.php and paste the following code wherever you would like the homepage text to appear:
<?php global $sa_options; $sa_settings = get_option( 'sa_options', $sa_options ); ?> <?php if( $sa_settings['intro_text'] != '' ) : ?> <?php echo nl2br(stripslashes($sa_settings['intro_text'])); ?> <?php endif; ?>
This code simply checks if the text actually has some content, and then outputs the result on the page. NOTE: I am using the “nl2br” php function here to ensure that line breaks are retained when outputting the content. You can remove this if you wish.
Feel free to use this code in your site, and don’t hesitate to ask me for any help getting it working. In the mean time go ahead and download the file.
8:36 am