If you’re building your own WordPress Themes, you must have tried adding options panel to handle different features in your theme. While there are different options panel like Elegant Themes and WooThemes, creating you’re own from scratch would take a lot of time to build and if you’re not that good in PHP, so you need an alternative way.
Lucky for us Devin from WPTheming created the Options Framework and it’s so easy to integrate on your theme. Even if you are using you’re own custom theme you can still use this as your own options panel, and take advantage of it’s features. Follow along and we will discover on how to include this on your own theme, we will also add certain features as samples.
Let’s Begin
First we will work on our local server, so make sure that’s already set up. Open your browser, also open your theme folder. Download Options Framework theme from github, and unzip it. We will use the theme version since it’s the easiest way to integrate for a newbie
For the sake of this sample, we will use a custom theme. Make sure that you back up your theme.
From the Options Framework folder, copy the options.php and paste it on your theme folder, open functions.php and paste this below.
/*
* Loads the Options Panel
*
* If you're loading from a child theme use stylesheet_directory
* instead of template_directory
*/
if ( !function_exists( 'optionsframework_init' ) ) {
define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
require_once dirname( __FILE__ ) . '/inc/options-framework.php';
}This will look for the inc folder, so you can use the options framework functions.
After that, copy the inc folder from options-framework-theme-master, and paste it on your theme folder. If you check your dashboard under Apperance, you’ll see Theme Options.
Open options.php from your theme folder, and you’ll see this code.
$options[] = array(
'name' => __('Basic Settings', 'options_framework_theme'),
'type' => 'heading');
$options[] = array(
'name' => __('Input Text Mini', 'options_framework_theme'),
'desc' => __('A mini text input field.', 'options_framework_theme'),
'id' => 'example_text_mini',
'std' => 'Default',
'class' => 'mini',
'type' => 'text');
$options[] = array(
'name' => __('Input Text', 'options_framework_theme'),
'desc' => __('A text input field.', 'options_framework_theme'),
'id' => 'example_text',
'std' => 'Default Value',
'type' => 'text');
$options[] = array(
'name' => __('Textarea', 'options_framework_theme'),
'desc' => __('Textarea description.', 'options_framework_theme'),
'id' => 'example_textarea',
'std' => 'Default Text',
'type' => 'textarea');
$options[] = array(
'name' => __('Input Select Small', 'options_framework_theme'),
'desc' => __('Small Select Box.', 'options_framework_theme'),
'id' => 'example_select',
'std' => 'three',
'type' => 'select',
'class' => 'mini', //mini, tiny, small
'options' => $test_array);
$options[] = array(
'name' => __('Input Select Wide', 'options_framework_theme'),
'desc' => __('A wider select box.', 'options_framework_theme'),
'id' => 'example_select_wide',
'std' => 'two',
'type' => 'select',
'options' => $test_array);
We will add our own, we will comment the code above and use it in the future. For now we will use the code below which will be used for the favicon, logo, and header text code
//Logo
$options[] = array(
'name' => __('Upload a Logo', 'options_framework_theme'),
'desc' => __('Upload a logo on your theme, size must be 300px by 150px.', 'options_framework_theme'),
'id' => 'logo_uploader',
'type' => 'upload');
//Favicon
$options[] = array(
'name' => __('Upload a Favicon', 'options_framework_theme'),
'desc' => __('Upload a favicon on your theme, size must be 16px by 16px', 'options_framework_theme'),
'id' => 'favicon_uploader',
'type' => 'upload');
//Footer text
$options[] = array(
'name' => __('Header Text', 'options_framework_theme'),
'desc' => __('A text input field on header.', 'options_framework_theme'),
'id' => 'header_input',
'std' => 'Default Value',
'type' => 'textarea');
Now, head over to your dashboard Apperance > Theme Options and you’ll see something like this.
Now, to use our options panel we will add a favicon field, logo and some header text. Open our header.php and paste this code inside the header tag.
<?php
//set favicon if defined in admin
if(of_get_option('favicon_uploader')) { ?>
<!-- Favicon
================================================== -->
<link rel="icon" type="image/png" href="<?php echo of_get_option('favicon_uploader'); ?>" />
<?php } ?>
Basically we are checking if ‘favicon_uploader’ has a value before displaying it. You can try to upload a favicon now on your theme options to check if it’s working.
Next is the logo, back at the header.php and look for <h1>tag or something like this:
<h1><a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a></h1>And replace it with this one
<?php $logo_uploader = of_get_option('logo_uploader');
if ($logo_uploader) { ?>
<h1><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo $logo_uploader; ?>" alt="<?php bloginfo('name'); echo ' - '; bloginfo('description'); ?>" /></a></h1>
<?php } else { ?>
<h1><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<p><span><?php bloginfo('description'); ?></span></p>
<?php } ?>This is a pretty cool snippet, if a logo was uploaded it will be displayed on the front end. However, if we only use text logo (no images) it will use the text instead.
For our header text paste this code below, use a div to display it properly.
<?php echo of_get_option('header_input'); ?>You now have a working options panel that’s easy to use and has a ton of features, you can add more on your theme by following the Options Framework theme that we downloaded earlier.
0 yorum:
Yorum Gönder