Adding array string to stylesheet.php

I’ve got a stylesheet.php that I use to change the styles on my site. I do most of the changes in my wordpress admin themes pages so I use codes like

.div {
    height:<?php echo $layout_options['div-height']; ?>;
}

I also need this at the top of the page to get the info

Read More
<?php $layout_options       = get_option ( 'layout_options' ); ?>

I’m now trying to edit the fonts, to do this I need the @import and font family to change depending on what i’ve selected in the drop down list in my admin page.

Here is my function:

function span_font_callback() {
$layout_options = (array) get_option( 'layout_options' );
$fonts = get_fonts();
$current = 'arial';

if ( isset( $layout_options['span-font'] ) )
    $current = $layout_options['span-font'];

?>
    <select name="layout_options[span-font]">
      <option value="default">Please select an option</option>
      <?php foreach( $fonts as $key => $font ): ?>
        <option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $key; ?>"><?php echo $font['name']; ?></option>
      <?php endforeach; ?>
    </select>
    <input type="text" name="layout_options[span_font_size]" size="6" value="<?php echo $layout_options['span_font_size']; ?>" placeholder="Size"/>
    <input type="text" name="layout_options[span_font_colour]" size="6" value="<?php echo $layout_options['span_font_colour']; ?>" placeholder="Colour"/>

<?php   
}

Here’s the get_fonts() arrays

function get_fonts() {
$fonts = array(
    'arial' => array(
        'name' => 'Arial',
        'font' => '',
        'css' => "'Arial', sans-serif"
    ),
    'Montez' => array(
        'name' => 'Montez',
        'font' => '@import url(http://fonts.googleapis.com/css?family=Montez);',
        'css' => "'Montez', cursive"
    ),
    'Open Sans' => array(
        'name' => 'Open Sans',
        'font' => '@import url(http://fonts.googleapis.com/css?family=Open+Sans);',
        'css' => "'Open Sans', sans-serif"
    ),
    'ubuntu' => array(
        'name' => 'Ubuntu',
        'font' => '@import url(https://fonts.googleapis.com/css?family=Ubuntu);',
        'css' => "'Ubuntu', sans-serif"
    ),
    'lobster' => array(
        'name' => 'Lobster',
        'font' => '@import url(http://fonts.googleapis.com/css?family=Lobster);',
        'css' => "'Lobster', cursive"
    )
);

return apply_filters( 'get_fonts', $fonts );

}

And here’s my stylesheet.php

<?php $layout_options       = get_option ( 'layout_options' ); ?>

@import url(http://fonts.googleapis.com/css?family=Lobster);
.hero_text {
text-align: right;
padding-left: 5px;
display: inline;
float: right;
clear: both;
position: fixed;
right: 0;
font-family: <?php echo $layout_options['h1-font']; ?>;
font-size: <?php echo $layout_options['h1_font_size']; ?>;
color: <?php echo $layout_options['h1_font_colour']; ?>;
line-height: 20px;
}

I need to replace the @impot line

this

@import url(http://fonts.googleapis.com/css?family=Lobster);

for something like

<?php echo $layout_options['h1-font-import']; ?>

so when I change the drop down list, this will change depending on what was selected

Any ideas how I can do this?

Related posts

Leave a Reply