WordPress.org

1. rochee_jd
   Member
   Posted 8 months ago #

   Hi guys, I'm fairly new to adding a theme options page. What I want to do is for the admin to modify the size and font of the blog title.
   I found a tutorial on how to do this and the font is working fine but the size is not. Here is the code:

   add_action( 'admin_menu', 'my_admin_menu' );
   function my_admin_menu() {
       add_theme_page( 'Header Typography', 'Header Typography', 'edit_theme_options', 'my-theme-options', 'my_theme_options' );
   }
   
   function my_theme_options() {
   ?>
       <div class="wrap">
           <div><br></div>
           <h2>Header Typography Options</h2>
   
           <form method="post" action="options.php">
               <?php wp_nonce_field( 'update-options' ); ?>
               <?php settings_fields( 'my-options' ); ?>
               <?php do_settings_sections( 'my-options' ); ?>
               <?php submit_button(); ?>
           </form>
   
       </div>
   <?php
   }
   
   add_action( 'admin_init', 'my_register_admin_settings' );
   function my_register_admin_settings() {
       register_setting( 'my-options', 'my-options' );
   		register_setting( 'my-options', 'font-size');
   
       // Settings fields and sections
       add_settings_section( 'section_typography', 'Typography Options', 'my_section_typography', 'my-options' );
       add_settings_field( 'primary-font', 'Site Title Font Face', 'my_field_primary_font', 'my-options', 'section_typography' );
   		add_settings_field( 'title-size', 'Site Title Font Size', 'my_field_primary_size', 'my-options', 'section_typography' );
   }
   function my_section_typography() {
       echo 'Change the font-face, style and size of your site title.';
   }
   
   function get_my_available_fonts() {
       $fonts = array(
           'open-sans' => array(
               'name' => 'Open Sans',
               'import' => '@import url(http://fonts.googleapis.com/css?family=Open+Sans);',
               'css' => "font-family: 'Open Sans', sans-serif;"
           ),
           'lato' => array(
               'name' => 'Lato',
               'import' => '@import url(http://fonts.googleapis.com/css?family=Lato);',
               'css' => "font-family: 'Lato', sans-serif;"
           ),
           'arial' => array(
               'name' => 'Arial',
               'import' => '',
               'css' => "font-family: Arial, sans-serif;"
           )
       );
   
       return apply_filters( 'my_available_fonts', $fonts );
   }
   
   function my_field_primary_font() {
       $options = (array) get_option( 'my-options' );
       $fonts = get_my_available_fonts();
       $current_font = 'arial';
   
       if ( isset( $options['primary-font'] ) )
           $current_font = $options['primary-font'];
   
       ?>
           <select name="my-options[primary-font]">
           <?php foreach( $fonts as $font_key => $font ): ?>
               <option <?php selected( $font_key == $current_font ); ?> value="<?php echo $font_key; ?>"><?php echo $font['name']; ?></option>
           <?php endforeach; ?>
           </select>
       <?php
   }
   
   add_action( 'wp_head', 'my_wp_head' );
   function my_wp_head() {
       $options = (array) get_option( 'my-options' );
       $fonts = get_my_available_fonts();
       $current_font_key = 'arial';
   
       if ( isset( $options['primary-font'] ) )
           $current_font_key = $options['primary-font'];
   
       if ( isset( $fonts[ $current_font_key ] ) ) {
           $current_font = $fonts[ $current_font_key ];
   
           echo '<style>';
           echo $current_font['import'];
           echo '#site-title * { ' . $current_font['css'] . ' } ';
           echo '</style>';
       }
   }
   
   /*SITE TITLE FONT SIZE*/
   function get_my_available_size() {
       $fonts = array(
           '12px' => array(
               'name' => '12',
               'css' => "font-size: 12px;"
           ),
           '14px' => array(
               'name' => '14',
               'css' => "font-size: 14px;"
           ),
           '16px' => array(
               'name' => '16',
               'css' => "font-size: 16px;"
           )
       );
   
       return apply_filters( 'my_available_fonts', $fonts );
   }
   
   function my_field_primary_size() {
       $options = (array) get_option( 'my-options' );
       $fonts = get_my_available_size();
       $current_font = '12px';
   
       if ( isset( $options['title-size'] ) )
           $current_font = $options['title-size'];
   
       ?>
           <select name="my-options[title-size]">
           <?php foreach( $fonts as $font_key => $font ): ?>
               <option <?php selected( $font_key == $current_font ); ?> value="<?php echo $font_key; ?>"><?php echo $font['name']; ?></option>
           <?php endforeach; ?>
           </select>
       <?php
   }
   
   add_action( 'wp_head', 'my_wp_head_title_size' );
   function my_wp_head_title_size() {
       $options = (array) get_option( 'my-options' );
       $fonts = get_my_available_size();
       $current_size_key = '12px';
   
       if ( isset( $options['title-size'] ) )
           $current_size_key = $options['title_size'];
   
       if ( isset( $fonts[ $current_size_key ] ) ) {
           $current_size = $fonts[ $current_size_key ];
   
           echo '<style>';
           echo '#site-title * { ' . $current_size['css'] . ' } ';
           echo '</style>';
       }
   }

   Help is really appreciated. Thanks in advance.

2. Peter Baylies
   Member
   Posted 8 months ago #

   In your code, you have this:

   register_setting( 'my-options', 'font-size');

   Shouldn't you be using title-size there instead of font-size?

3. rochee_jd
   Member
   Posted 8 months ago #

   Hi pbaylies, sorry for the late reply.. I got it working now and you were right! Thanks for the tip.. :)

Reply

You must log in to post.