How to create custom text forms in admin panel and show them on my page (Wordpress)

Question

Introduction: At this moment I'm creating my first custom Wordpress theme. Now I succesfully created a HTML/CSS template and converted this to fit wordpress (including header.php, index.php, footer.php, functions.php, sidebar.php and page.php).

Case/Problem definition: At my homepage (index.php), I included several div's filled with text (pure HTML and CSS). Now I want to be able to manually change this text from an admin panel in my Wordpress Back-end. I already made an extra sub-menu page in the admin panel. This page is completely blank at this moment.

In Short: How to fill in a text form in my Wordpress admin panel and echo this out on a certain page (front-end).

Extra Since I'm new to Wordpress, PHP and creating your own themes I'm not sure how to do this or how to search for tutorials online (I don't know the correct terminology to search).

Thanks for all the tips and advice already!

Answer 1

In your functions.php add the following code that is highlighted. This will add a twitterid. So anywhere in your custom theme you can call the value of the custom admin page:

add menu item:

add_action('admin_menu', 'add_global_custom_options');

Assign the custom function which will create a form.

function add_global_custom_options()  
{  
    add_options_page('Global Custom Options', 'Global Custom Options', 'manage_options', 'functions','global_custom_options');  
}

Create a Function Which Generates the Form:

<?php
function global_custom_options()
{
?>
    <div class="wrap">
        <h2>Global Custom Options</h2>
        <form method="post" action="options.php">
            <?php wp_nonce_field('update-options') ?>
            <p><strong>Twitter ID:</strong><br />
                <input type="text" name="twitterid" size="45" value="<?php echo get_option('twitterid'); ?>" />
            </p>
            <p><input type="submit" name="Submit" value="Store Options" /></p>
            <input type="hidden" name="action" value="update" />
            <input type="hidden" name="page_options" value="twitterid" />
        </form>
    </div>
<?php
}
?>

View your admin page. You will find a new link in your Admin Menu called “Global Custom Options”. Just enter your values in that form and you are good to go for using those values in your theme files like “get_option(‘twitterid’)”. So, in your index.php or any other theme file, you can do something like

<?php echo get_option('twitterid') ?>

and it will print whatever value is in the textbox on admin page.

Here is a link to the tutorial for reference.