1

working with a child-theme, adding a custom options page to dashboard in which admin can save details about the site. Using this code in the child-theme functions.php to create the options page:

add_action( 'admin_menu', 'jrl_add_admin_menu' );
function jrl_add_admin_menu()
{
    add_menu_page('Journal Options', 'Journal Options', 'manage_options', 'functions','journal_custom_options');
}
function journal_custom_options()
{
?>
    <div class="jrl-wrap">
    <div class="icon32" id="icon-tools"> <br /> </div>
        <h2>Site Options</h2>
        <p>Add Site Informations.</p>
        <hr>
        <form method="post" action="options.php" enctype="multipart/form-data">
            <?php wp_nonce_field('update-options') ?>
            <p><strong>site Title:</strong>
                <input type="text" name="jrlname" size="75" value="<?php echo get_option('jrlname'); ?>" />
            </p>
            <p><strong>site Title Abbreviation:</strong>
                <input type="text" name="abr" size="25" value="<?php echo get_option('abr'); ?>" />
            </p><hr>
            <p><strong>site-code:</strong>
                <input type="text" name="scode" size="45" value="<?php echo get_option('eissn'); ?>" />
            </p>
            <p><strong>admin-code:</strong>
                <input type="text" name="acode" size="45" value="<?php echo get_option('pissn'); ?>" />
            </p><hr>
            <p><strong>manager:</strong><br />
                <input type="text" name="chef" size="45" value="<?php echo get_option('chef'); ?>" />
            </p><hr>
            <p class="submit"><input type="submit" name="Submit" value="Save Options" class="button-primary" /></p>
            <input type="hidden" name="action" value="update" />
            <input type="hidden" name="page_options" value="jrlname,scode,acode,chef,abr" />
        </form>
    </div>
<?php
}

this code create the options page and it work fine. But when i try to add style to this page nothing happens. I created a style-sheet file "site-options.css" in the functions directory in the child-theme with this code:

#jrl-wrap {
  width: 700px;
  padding: 3em;
  background: white;
  background: -moz-linear-gradient(top, #f4f2f2, white 20%, #f4f2f2 80%, white);
  background: -webkit-gradient(linear, left top, left bottom, from(#f4f2f2), color-stop(.2, white), color-stop(.8, #f4f2f2), to(white));
  border-top: 1px solid white;
  color:red;
  }
#jrl-wrap h2 {
font-style:normal;
font-size:28px;
margin-bottom:20px;
font-style:italic;
}
#jrl-wrap #icon-tools {
  position: relative;  .
  top: -10px;
  }
#jrl-wrap input, #jrl-wrap textarea {
  padding: .7em;.
  }

And I tried to call this file by adding this code to the child-theme functions.php

// Add stylesheetadd_action('admin_head', 'admin_register_head');
    function admin_register_head() {
       $url = get_bloginfo('template_directory') . '/functions/site-options.css';  echo "<link rel='stylesheet' href='$url' />n";
}

but nothing happens & options page still without any style. Any suggestions please to solve this problem?

| improve this question | | | | |
1

You can simply add those CSS to admin HEAD section, it's fast and easy solution.

function jrl_styles() {
    ?><style type="text/css">
    #jrl-wrap {
      width: 700px;
      padding: 3em;
      /* ... */
    }
    </style><?php
}
add_action('admin_head', 'jrl_styles');

Or you can enque your CSS file like this:

function load_custom_wp_admin_style() {
    wp_register_style( 'custom_wp_admin_css', get_stylesheet_directory_uri() . '/functions/site-options.css', false, '1.0.0' );
    wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

Documentation page.

Both options will add those CSS code (or file) to every admin page, so have your CSS definiton prefixed to aviod some collisions with WordPress CSS. Your CSS code looks OK.

Edit: Changed get_template_directory_uri() (always returns parent theme folder) to get_stylesheet_directory_uri() (returns child-theme folder).

| improve this answer | | | | |
  • Thanks for replying. I added the second code to child-theme functions.php. but still having the same problem. – nisr Aug 24 '15 at 14:17
  • this may work only if a added the style-sheet to functions folder in the main theme directory but not in the child theme one – nisr Aug 24 '15 at 14:58
  • Aha! I was not aware get_template_directory_uri() will always return parent theme directory... so you have to use get_stylesheet_directory_uri() (in second code), it will return child-theme directory (if used). – Marek Aug 25 '15 at 3:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.