SMOF Documentation

This documentation will serve as a starting point for you to setup SMOF and will be updated from time to time as the SMOF is further developed in the future. Ultimately, I will probably just dedicate a full page documentation on this site, and include a downloadable HTML copy of it on Github. Enough talking, let’s get started.

Requirements:

WordPress v3.2 or later
A WordPress theme compatible with WP 3.2
PHP 5
Notepad++ (optional)

Preliminary steps:

Download a copy of SMOF on Github
Extract the folder admin and images inside your theme
Turn off WP_DEBUG. You can turn it on later for debugging.

Copy the codes inside functions.php file and put that into your own theme’s functions.php file

Reset your options

For first time activation, you need to hit RESET to store your default options in the database. You would also do this when you’re upgrading from an older version of the SMOF.

This step is unnecessary for your users since the default options will be stored automatically on theme activation.

This section will tell you how set up the options that was added/modified in SMOF, and where applicable show how to use them in your theme.

Basic

If you open up theme-options.php, you should see an array of options and how they were written. As I’m sure many of you are talented and well experienced coders & WordPress developers, I’m not going to explain each one of them as that would quickly eat out my time from writing all of the other good stuff. I just hope you will find in your time to test how each option works. But as a starting point, here’s a line by line explanation example:

$of_options[] = array( "name" => "Media Uploader",
	"desc" => "Upload images using native media uploader.",
	"id" => "media_upload",
	"std" => "",
	"type" => "media");

1. name – This is the title that will be displayed on the options panel.
2. desc – Description for the option
3. id – A unique id for your option.
4. std – A standard value for the option.
5. type – The type of option

Note that some options requires different array keys, for example “options” and “mod”. Almost all of the options has already been defined in the theme-options so you can have a good study on how each one works.

Using it in your theme

This is how a basic example of how the above option would be called inside your theme.

global $data; //fetch options stored in $data
echo $data['media_upload']; //get $data['id'] then echo the value

As you would’ve guessed, the above code will output the URL to the image which was uploaded from the option panel. Also take a look at the documentation on variable scope for a better understanding of what global does.

You will notice that for some options like textarea or input, you will need to do a little sanitization to ensure the output would display correctly. Here’s an example:

echo do_shortcode(stripslashes($data['homepage_slogan']));

stripslashes will ensure that your output data will be free from any which is saved automatically everytime a " or : etc are present in the database.

Now that we’ve got the basics down, it’s time that we look at more examples. Currently these are the only two options that I will be explaining as they’re a little more complicated than the rest.

• Slider
• Sorter

Slider

The slider option populates most of the common data used by a slider, i.e. the image, title, description and link, while also enabling the user to drag and drop each slide to organize them. This is pretty much the simplest and intuitive way to set-up a slider.
Example option:

$of_options[] = array( "name" => "Slider Options",
	"desc" => "Unlimited slider with drag and drop sortings.",
	"id" => "example_slider",
	"std" => "",
	"type" => "slider");

That one is pretty self-explanatory. Just give it a unique id and you’re good to go.

Example usage:
The data for slider option is stored in multi-dimensional array. What that means basically is that you have a few levels of arrays that stores the data. To make everything simpler, this is the structure:

    [example_slider] => Array
        (
            [1] => Array
                (
                    [order] => 1
                    [title] => Title 1
                    [url] => http://url1.com/image1.jpg
                    [link] => http://link1.com/etc
                    [description] => etc etc
                )
            [2] => Array
                (
                    [order] => 1
                    [title] => 
                    [url] => 
                    [link] => 
                    [description] => 
                )
        )

To fetch all of these data, while retaining the order on which they were saved to the database will require you to do a simple foreach loop.

Below is just a basic example of how you may do it.

$slides = $data['example_slider']; //get the slides array

foreach ($slides as $slide) {
	echo $slide['title'];
	echo $slide['url'];
	echo $slide['link'];
	echo $slide['description'];
}

The above code will iterate through each of the slide and display whatever stored in them. Apparently, if you need to create a slider then you will need to echo the values inside your own HTML structure.

Sorter

The sorter enables the user to disable/enable block and organize them with simple drag & drop manner. The “blocks” can be anything at all, depending on the theme author’s creativity.

Example option:
First we need to create an array of the blocks.

$of_options_homepage_blocks = array( 
	"disabled" => array (
		"placebo" 		=> "placebo", //REQUIRED!
		"block_one"		=> "Block One",
		"block_two"		=> "Block Two",
		"block_three"	=> "Block Three",
	), 
	"enabled" => array (
		"placebo" => "placebo", //REQUIRED!
		"block_four"	=> "Block Four",
	),
);

Notice that the “placebo” array is required. It will not be shown on the option panel, but will be saved to database nonetheless. Continue:

$of_options[] = array( "name" => "Homepage Layout Manager",
	"desc" => "Organize how you want the layout to appear on the homepage",
	"id" => "homepage_blocks",
	"std" => $of_options_homepage_blocks,
	"type" => "sorter");

The above option uses our previously defined $of_options_homepage_blocks as the default values, and order them in which manner they were structured.

Example usage:
To display the saved blocks will require a combination of foreach and switch. As I’m sure you’re already familiar with these functions, here’s a code snippet how you would use them:

<?php
$layout = $data['homepage_layout']['enabled'];

if ($layout):

foreach ($layout as $key=>$value) {

    switch($key) {

    case 'block_one':
    ?>
    <!--do something here-->

    <?php
    break;
    case 'block_two':
    ?>
    <!--do something here-->

    <?php
    break;
    //repeat as many times necessary    

    }

}

endif;
?>

In the above code, you’re basically fetching the data stored inside the ‘enabled’ array of the ‘homepage_layout’ option. You then use a foreach loop to get the $key, which you will then use to determine what to do with each case of the key. I know that doesn’t sound very technical from me, but that’s how I understand it. Image may be NSFW.
Clik here to view.

So far we have covered:
1. Setting up SMOF and porting it inside your theme
2. Defining the options
3. Using it in your theme

I hope you get a little clue from my somewhat deficient documentation, and give you the starting point on how you can use SMOF to its full potential. To streamline all the support questions, I will not be answering coding-related questions in the comment section. Please open a ticket on the SMOF’s Github Page instead. Thanks for reading and have fun theming! Image may be NSFW.
Clik here to view.