Web application coding

Create a Simple WordPress Admin Panel

When we create our themes, we also need to create our own theme options on the admin panel. By customizing the theme options, it will make it easy for us, and most importantly, for our users to control the theme. You don’t need to create hardcode again to change the options. Simply select and save it. And you’ll get what you want.

Now I will explain to you how to make a simple WordPress admin panel. This post will be useful when you make your own WordPress theme along with the admin panel. Don’t worry, everything is easy when it comes to WordPress, including making your own theme options on the admin panel.

You can put any kind of control options for your theme on the admin panel, such as uploading logo or choosing the headline’s category.

You can use all class in WordPress to make a layout for our admin panel, and add some style to make tab or accordion effect.

First, let’s make the function.php

//register settings
function theme_settings_init(){
register_setting( 'theme_settings', 'theme_settings' );
}

//add settings page to menu
function add_settings_page() {
add_menu_page( __( Your theme name .' Theme Settings' ), __( Your theme name .' Theme Settings' ), 'manage_options', 'settings', 'theme_settings_page');
}

//add actions
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );

function theme_settings_page() {}

Put that’s script to your function.php, and you will find at the bottom of your dashboard, your theme options.

then put your options of your theme to the function theme_settings_page().

You can see this one for example.

<?php
function theme_settings_page() {
?>
<div>
<div id="icon-options-general"></div>
<h2><?php _e( ' Theme Options' ) //your admin panel title ?></h2>
<ul>
<li>View Documentation |</li>
<li>Visit Support </li>
</ul>
<p>
<span>Theme version</span>
</p>
<div>
<p>This theme was made by <a title="anang pratika" href="http://anangpratika.wordpress.com" target="_blank" >Anang Pratika</a>.</p>
</div>
</div>
<?php
}?>

And done! You will see the header at your admin panel.
And all those codes above will give you this screenshot as a result.

And for the next you can put any options in your admin like that.

If you any further questions or have suggestion on what would you like to see on our next How-To post, feel free to leave them in the comment bellow.

Let’s be creative!

JOIN OUR NEWSLETTER
I agree to have my personal information transfered to MailChimp ( more information )
Join over 3.000 visitors who are receiving our newsletter and learn how to optimize your blog for search engines, find free traffic, and monetize your website.
We hate spam. Your email address will not be sold or shared with anyone else.

Leave a Reply

Your email address will not be published. Required fields are marked *