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
<?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?