Jump to content
Sign in to follow this  
yukon

Build Custom Wordpress Theme Option Pages

Recommended Posts

This website (link below) is awesome for building Wordpress theme option pages. Go to the site, fill out the forms for whatever options you need and the right side of the page automatically builds the page.

I'm using this right now to build an image slider options page for custom Wordpress themes.

 

 

The code generated goes inside the Wordpress theme functions.php file. Make sure to backup the old file first.

The way I get data out of the option page database is with the code below. For instance, my theme option page is for an image slider, so I'm storing the image URL in the database. The code ID (imageslide1) that I created while building the options page returns my image URL back in the theme/HTML.

 

<?php echo get_option('imageslide1'); ?>

 

Anyways, everything else I've found online sucked and was incomplete tutorials, always throwing errors. This code works and it's super simple, fill in the blank forms.

 

Edit: I'll probably end up changing that code above to get my image URL to an IF/ELSE in case someone leaves one of the input forms blank on the admin options page.

Share this post


Link to post
Share on other sites

SEOPress WordPress SEO plugin

I'm not sure if you know this, but you can do pretty crazy stuff with shortcodes.

Note: This example is actually extremely straightforward, I would post something more complicated but my shortcodes are so specific to my sites that it wouldn't really be useful to anybody.

Make a colored call-out box:

In functions.php

 

// Add Support for My Custom Shortcodes

include(get_stylesheet_directory() . '/my_custom_shortcodes.php');

Note: Just some basic call out boxes.

my_custom_shortcodes.php

function make_yellowbox($atts, $content = null) {
   return '<div class="yellow-box">' . do_shortcode($content) . '</div>';
}

add_shortcode('yellowbox', 'make_yellowbox');

//red


function make_redbox($atts, $content = null) {
   return '<div class="red-box">' . do_shortcode($content) . '</div>';
}

add_shortcode('redbox', 'make_redbox');

//green

function make_greenbox($atts, $content = null) {
   return '<div class="green-box">' . do_shortcode($content) . '</div>';
}

add_shortcode('greenbox', 'make_greenbox');

//blue

function make_bluebox($atts, $content = null) {
   return '<div class="blue-box">' . do_shortcode($content) . '</div>';
}

add_shortcode('bluebox', 'make_bluebox');

//orange

function make_orangebox($atts, $content = null) {
   return '<div class="orange-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('orangebox', 'make_orangebox');


//purple 

function make_purplebox($atts, $content = null) {
   return '<div class="purple-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('purplebox', 'make_purplebox');


//grey

function make_greybox($atts, $content = null) {
   return '<div class="grey-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('greybox', 'make_greybox');

css:

/*colored callout boxes*/
.yellow-box{
	background-color: #ffff90;
	clear: both;
	border: 1px solid #9b9b9b;
	padding: 10px;
	margin-bottom:1em;
}
.red-box{
	background-color: #fbafaf;
	clear: both;
	border: 1px solid #9b9b9b;
	padding: 10px;
	margin-bottom:1em;
}
.green-box{
	background-color: #b2fbba;
	clear: both;
	border: 1px solid #9b9b9b;
	padding: 10px;
	margin-bottom:1em;
}
.blue-box{
	background-color: #a9c4fc;
	clear: both;
	border: 1px solid #9b9b9b;
	padding: 10px;
	margin-bottom:1em;
}
.orange-box{
	background-color: #ffca9a;
	clear: both;
	border: 1px solid #9b9b9b;
	padding: 10px;
	margin-bottom:1em;
}
.purple-box{
	background-color: #f7c8ff;
	clear: both;
	border: 1px solid #9b9b9b;
	padding: 10px;
	margin-bottom:1em;
}
.grey-box{
	background-color: #e7e7e7;
	clear: both;
	border: 1px solid #9b9b9b;
	padding: 10px;
	margin-bottom:1em;
}

Modify as necessary obviously.

Testcode (for Wordpress): Note - The text says yellow callout box over and over, I never bothered to fix the test code and I'm not going to :)

[redbox]<H3>Red Callout Box Test</H3><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p>[/redbox]

[greenbox]<H3>Green Callout Box Test</H3><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p>[/greenbox]

[bluebox]<H3>Blue Callout Box Test</H3><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p>[/bluebox]

[orangebox]<H3>Orange Callout Box Test</H3><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p>[/orangebox]

[purplebox]<H3>Purple Callout Box Test</H3><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p>[/purplebox]

[greybox]<H3>Grey Callout Box Test</H3><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p><p>This is a test of the yellow callout box. This is a test of the yellow callout box. This is a test of the yellow callout box.</p>[/greybox]

[yellowbox]<p><b>Exclusive Bonus:</b> <a href="http://www.test.com">Download</a> the step-by-step checklist that will show you how to improve conversions using The Content Upgrade.</p>[/yellowbox]

[redbox]<p><b>Exclusive Bonus:</b> <a href="http://www.test.com">Download</a> the step-by-step checklist that will show you how to improve conversions using The Content Upgrade.</p>[/redbox]

[greenbox]<p><b>Exclusive Bonus:</b> <a href="http://www.test.com">Download</a> the step-by-step checklist that will show you how to improve conversions using The Content Upgrade.</p>[/greenbox]

[bluebox]<p><b>Exclusive Bonus:</b> <a href="http://www.test.com">Download</a> the step-by-step checklist that will show you how to improve conversions using The Content Upgrade.</p>[/bluebox]

[orangebox]<p><b>Exclusive Bonus:</b> <a href="http://www.test.com">Download</a> the step-by-step checklist that will show you how to improve conversions using The Content Upgrade.</p>[/orangebox]

[purplebox]<p><b>Exclusive Bonus:</b> <a href="http://www.test.com">Download</a> the step-by-step checklist that will show you how to improve conversions using The Content Upgrade.</p>[/purplebox]

[greybox]<p><b>Exclusive Bonus:</b> <a href="http://www.test.com">Download</a> the step-by-step checklist that will show you how to improve conversions using The Content Upgrade.</p>[/greybox]

How to pass a variable to a shortcode

https://developer.wordpress.org/plugins/shortcodes/shortcodes-with-parameters/

Sorry, I don't have any examples that are generic or that I would want to give away, but you can do some relatively complex stuff since the shortcode can execute PHP code without a plugin to allow PHP code to be inserted anywhere (which is dangerous.)

I only posted that because you mentioned a slider, I have code to create a slider with a shortcode, but you have to pre-format the array to a string: [slider]image1.jpg,image2.jpg,image3.jpg[/slider] obviously not the most flexible solution but it worked for what I wanted to do with it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.