Are you looking for an easy way to create a simple WordPress settings page? You came to the right place! For this tutorial I will use WPBootstrap and build a settings page for it. The same codes will apply to themes that don’t have their own settings page, so don’t worry about compatibility issues.
In this tutorial you will be able to create a custom area for advertisements, custom logo, add analytics code, and add social media icons easily through the settings page. Well, at least easy for your clients!
Create a WordPress Options Page
Here’s what we will be making:
Things you will need:
- WPBootstrap
- Font Awesome
- Your favorite text editor!
- Patience
First thing you need to do is install WPBootstrap. After installing, open up functions.php, header.php, and bootstrap.css. These are all the files we will be fiddling with.
Warning: practice first before applying this to any live site. Functions.php is sensitive and one wrong move may break your entire site.
Preparing the Functions.php
Before anything else, open up your functions.php and type the following code at the bottom line. Make sure to avoid adding unnecessary line breaks outside of the PHP clause, for they might break the entire theme. It’s that sensitive.
<?php
//Register settings
function theme_options_add(){
register_setting( 'theme_settings', 'theme_settings' );
}
In order to make WordPress recognize that you want a settings page, you will have to register it first. The function theme_options_add notifies WordPress that a settings page is registered.
//Initialize options page
function add_options() {
add_menu_page( __( 'Theme Options' ), __( 'Theme Options' ), 'manage_options', 'settings', 'theme_options_page');
}
This part lets you add a custom name to your new page. The manage_options line grants you access to the settings page.
//Grant access to options page add_action( 'admin_init', 'theme_options_add' ); add_action( 'admin_menu', 'add_options' );
The first line initializes the function theme_options_add for the administrator, which accesses theme_settings, which in turn needs admin privileges. If I wrote:
function restrict_admin(){
if ( ! current_user_can( 'manage_options' ) ) {
wp_die( __('You are not allowed to access this part of the site') );
}
}
add_action( 'admin_init', 'restrict_admin');
I will effectively block access to the options page.
Now, it is time to display the options page!
//Initialize options page
function theme_settings_page() {
if ( ! isset( $_REQUEST['updated'] ) )
$_REQUEST['updated'] = false;
?>
<div><!--Start of Options Page Wrap -->
<form method="post" action="options.php">
<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>
<table>
<!-- This is where you place every setting -->
</table>
</form>
</div> <!--End of the Options Page Wrap -->
<?php
} //Don't let this funny little end curly bracket confuse you. Remember the theme_settings_page function? This is where it ends. In between the { and } is the entire settings "table".
?>
The code above starts the options page and displays all of the necessary fields.
In order for this entire tutorial to work, you will need to initialize the theme options on the header with the following code on your header.php:
<?php //get theme options $options = get_option( 'theme_settings' ); ?>
Place it just right before the closing </head> tag.
Here’s our code so far:
<?php
//register settings
function theme_options_add(){
register_setting( 'theme_settings', 'theme_settings' );
}
//add settings page to menu
function add_options() {
add_menu_page( __( 'Theme Options' ), __( 'Theme Options' ), 'manage_options', 'settings', 'theme_options_page');
}
//add actions
add_action( 'admin_init', 'theme_options_add' );
add_action( 'admin_menu', 'add_options' );
//start settings page
function theme_options_page() {
if ( ! isset( $_REQUEST['updated'] ) )
$_REQUEST['updated'] = false;
//get variables outside scope
global $color_scheme;
?>
<div>
<form method="post" action="options.php">
<h2>Theme Options</h2>
<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>
<table>
//this is where all of the input fields will be placed. Continued below
</table>
<p><input name="submit" id="submit" value="Save Changes" type="submit"></p>
</form>
</div><!-- END wrap -->
<?php
}
?>
The code above should display the same thing as shown below.
The form and table has already been laid out, including a title for our special page. All that’s left is to populate it with editable options!
Advertisement Options
It’s entirely up to you how many advertising spaces you want to display. But for this tutorial I will only display one. You can go crazy, add as many as you want with the code below as your starting point.
Just place the following inside the table in functions.php.
<tr valign="top"> <th scope"row"><?php _e( 'Leaderboard Ads 728x90' ); ?></th> <td><label for="theme_settings[leadad728]"><?php e( 'Enter 728x90 Ad Code' ); ?></label> <br /> <textarea id="theme_settings[leadad728]" name="theme_settings[leadad728]" rows="5" cols="36"><?php esc_attr_e( $options['leadad728'] ); ?></textarea></td> </tr>
To display the advertisement, simply add the following code to your header.php or anywhere you want the advertisement to show.
<?php if (!empty($options['leadad728'])) { ?>
<?php echo $options['leadad728'];?>
<?php } ?>
Analytics Code
Add the code below on your functions.php for the Analytics code:
<tr valign="top"> <th scope="row"><?php _e( 'Tracking Code' ); ?></th> <td><label for="theme_settings[tracking]"><?php _e( 'Enter your analytics tracking code' ); ?></label> <br /> <textarea id="theme_settings[tracking]" name="theme_settings[tracking]" rows="5" cols="36"><?php esc_attr_e( $options['tracking'] ); ?></textarea></td> </tr>
On your header.php add the following code, preferably right before closing the head tag.
<?php echo ($options['tracking']); ?>
Change Logo
Add the following code inside the table on functions.php. The following code will display the fields for the URL of the new logo you want.
<tr valign="top"> <th scope="row"><?php _e( 'Custom Logo' ); ?></th> <td><input id="theme_settings[new_logo]" type="text" size="36" name="theme_settings[new_logo]" value="<?php esc_attr_e( $options['new_logo'] ); ?>" /> <label for="theme_settings[new_logo]"><?php _e( 'Enter logo URL' ); ?></label></td> </tr>
WPBootstrap, like many other themes, has a built-in line for the logo. In this case it’s a simple link to the homepage. Remove the following:
<a class="navbar-brand" title="<?php echo get_bloginfo('description'); ?>" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
And replace it with this:
<?php if($options['custom_logo']) { ?>
<a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><img src="<?php echo $options['custom_logo']; ?>" alt="<?php bloginfo( 'name' ) ?>" /></a>
<?php } else { ?>
<h2><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>
<?php } ?>
In English, if WordPress detects that a logo URL has been placed on the options page, the logo will be displayed. Otherwise, a text placeholder will be displayed.
Add Twitter Icon
<tr valign="top"> <th scope="row"><?php _e( 'Twitter URL ); ?></th> <td><input id="theme_settings[twitterurl]" type="text" size="36" name="theme_settings[twitterurl]" value="<?php esc_attr_e ($options['twitterurl'] ); ?>" /> <label for="theme_settings[twitterurl]"><?php _e( 'Enter Twitter URL ); ?></label> </td> </tr>
And on the header.php (or anywhere you want the icon to appear) place the following code:
<?php if (!empty($options['twitterurl'])) { ?>
<div id="twitter_div">
<a href="<?php echo $options['twitterurl']?>" target="_blank"><i class="fa fa-twitter"></i>
<ul id="theme_settings[twitterurl]"></ul></a>
</div>
<?php } ?>
In order for this to work, you will need to use Font Awesome. To use Font Awesome, all you have to do is paste the following code on the header:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Now, in order to add the code on the navigation bar, add the code below just right after <?php //if(of_get_option('search_bar', '1')) {?> of the header.php.
<?php if (!empty($options['twitterurl'])) { ?>
<div id="twitter_div">
<a href="<?php echo $options['twitterurl']?>" target="_blank"><i class="fa fa-twitter"></i>
<ul id="theme_settings[twitterurl]"></ul></a>
</div>
<?php } ?>
Now for a little bit of CSS, open Bootstrap.css and add the following code just so it will look better:
#twitter_div{
float:left;
padding-top:10px;
}
.logo{
padding-top:20px;
}
#leader{
margin: 0 auto;
width:728px;
height:90px;
padding: 10px 10px 10px 10px;
}
Our functions.php code so far:
<?php
//register settings
function theme_options_add(){
register_setting( 'theme_settings', 'theme_settings' );
}
//add settings page to menu
function add_options() {
add_menu_page( __( 'Theme Options' ), __( 'Theme Options' ), 'manage_options', 'settings', 'theme_options_page');
}
//add actions
add_action( 'admin_init', 'theme_options_add' );
add_action( 'admin_menu', 'add_options' );
//start settings page
function theme_options_page() {
if ( ! isset( $_REQUEST['updated'] ) )
$_REQUEST['updated'] = false;
//get variables outside scope
global $color_scheme;
?>
<div>
<form method="post" action="options.php">
<h2>Theme Options</h2>
<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>
<table>
<tr valign="top">
<th scope="row"><?php _e( 'Leaderboard Ad' ); ?></th>
<td><label for="theme_settings[leadad728]"><?php _e( 'Enter your advertisement code' ); ?></label>
<br />
<textarea id="theme_settings[leadad728]" name="theme_settings[leadad728]" rows="5" cols="36"><?php esc_attr_e( $options['leadad728'] ); ?></textarea></td>
</tr>
<tr valign="top">
<th scope="row"><?php _e( 'Tracking Code' ); ?></th>
<td><label for="theme_settings[tracking]"><?php _e( 'Enter your analytics tracking code' ); ?></label>
<br />
<textarea id="theme_settings[tracking]" name="theme_settings[tracking]" rows="5" cols="36"><?php esc_attr_e( $options['tracking'] ); ?></textarea></td>
</tr>
<tr valign="top">
<th scope="row"><?php _e( 'Custom Logo' ); ?></th>
<td><input id="theme_settings[custom_logo]" type="text" size="36" name="theme_settings[custom_logo]" value="<?php esc_attr_e( $options['custom_logo'] ); ?>" />
<label for="theme_settings[custom_logo]"><?php _e( 'Enter the URL to your custom logo' ); ?></label></td>
</tr>
<tr valign="top">
<th scope="row"><?php _e( 'Twitter URL' ); ?></th>
<td><input id="theme_settings[twitterurl]" type="text" size="36" name="theme_settings[twitterurl]" value="<?php esc_attr_e ($options['twitterurl'] ); ?>" />
<label for="theme_settings[twitterurl]"><?php _e( 'Enter Twitter URL' ); ?></label> </td>
</tr>
</table>
<p><input name="submit" id="submit" value="Save Changes" type="submit"></p>
</form>
</div><!-- END wrap -->
<?php
}
?>
After applying all of the codes above, this is what everything should look like on our settings page.
I took the liberty of filling up everything. The screenshot below should show you how everything looks on the frontpage!
Before
After
It’s not exactly beautiful because this tutorial is focused on teaching you how to create a basic settings page for WordPress. But you are free to beautify it the way you want!
A Challenge for You!
Given that almost every WordPress theme is now responsive, can you find a way to automatically adjust the leaderboard advertisement to a 468×90 banner? Hint: you’ll need to use media queries and basic If Else statements on PHP!
Also, can you add Facebook, Instagram, and Pinterest icons? I bet you can!
But if you want more of a challenge, pick any jQuery slider out there and integrate it with your settings page!
