Skip to content

Instantly share code, notes, and snippets.

@MrBlank

MrBlank/miz-wp-customizer

Last active January 5, 2018 14:57
Show Gist options
  • Save MrBlank/9241abe72c30947ab147a829bfd10635 to your computer and use it in GitHub Desktop.
Save MrBlank/9241abe72c30947ab147a829bfd10635 to your computer and use it in GitHub Desktop.
Download ZIP
WordPress Customizer for Mizzou signature - rough version
Raw
miz-wp-customizer
<?php
/**
* Create Logo Setting and Upload Control
*/
function miz_customizer_settings($wp_customize)
{
// add a setting for the site logo
$wp_customize->add_setting('miz_theme_logo');
// Add a control to upload the logo
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'miz_theme_logo',
array(
'label' => 'Upload Logo sprite (Unit Name)',
'section' => 'title_tagline', // Site Identity section
'settings' => 'miz_theme_logo',
'description' => 'Image sprite required. Begin hover image at 50% of height. Should not exceed 550px wide.',
)
) );
// Width of Logo
$wp_customize->add_setting( 'miz_number_logo_width', array(
'capability' => 'edit_theme_options',
'sanitize_callback' => 'themeslug_sanitize_number_absint',
'default' => 200,
) );
$wp_customize->add_control( 'miz_number_logo_width', array(
'type' => 'number',
'section' => 'title_tagline',
'label' => __( 'Logo Width (px)' ),
) );
// Height of Logo
$wp_customize->add_setting( 'miz_number_logo_height', array(
'capability' => 'edit_theme_options',
'sanitize_callback' => 'themeslug_sanitize_number_absint',
'default' => 100,
) );
$wp_customize->add_control( 'miz_number_logo_height', array(
'type' => 'number',
'section' => 'title_tagline',
'label' => __( 'Logo Height (px)' ),
) );
// make sure it is a number
function themeslug_sanitize_number_absint( $number, $setting ) {
// Ensure $number is an absolute integer (whole number, zero or greater).
$number = absint( $number );
// If the input is an absolute integer, return it; otherwise, return the default
return ( $number ? $number : $setting->default );
}
}
add_action( 'customize_register', 'miz_customizer_settings' );
/**
* Remove Site Icon option - in theme template already
*/
function remove_styles_sections($wp_customize)
{
$wp_customize->remove_control('site_icon');
}
add_action( 'customize_register', 'remove_styles_sections', 20, 1 );
/**
* Render customized styles in <head>
*/
function miz_customize_css()
{
$imageWidth = get_theme_mod('miz_number_logo_width');
$imageHeight = get_theme_mod('miz_number_logo_height');
?>
<style type="text/css">
.site-brand .ed-name a {
height: <?php echo $imageHeight / 2; ?>px;
width: <?php echo $imageWidth; ?>px;
}
.site-brand .ed-name a:hover,
.site-brand .ed-name a:active,
.site-brand .ed-name a:focus {
background-position-y: -<?php echo $imageHeight / 2; ?>px !important;
}
@media only screen and (max-width: 768px) {
.site-brand .ed-name a {
height: <?php echo $imageHeight / 4; ?>px;
width: <?php echo $imageWidth / 2; ?>px;
}
.site-brand .ed-name a:hover,
.site-brand .ed-name a:active,
.site-brand .ed-name a:focus {
background-position-y: -<?php echo $imageHeight / 4; ?>px !important;
}
}
</style>
<?php
}
add_action( 'wp_head', 'miz_customize_css' );
-------------
<div class="site-brand mizzou-brand">
<p class="logo">
<a href="http://missouri.edu">Mizzou Logo</a>
</p>
<h1 class="ed-name">
<?php
$currentSite = get_blog_details();
$imageUrl = get_theme_mod( 'miz_theme_logo' ); // from customizer
?>
<a href="<?php echo esc_url($currentSite->siteurl); ?>" style="background-image: url(<?php echo $imageUrl; ?>);">
<?php bloginfo('name'); ?>
</a>
</h1>
<h2 class="wordmark">
<a href="http://missouri.edu">University of Missouri</a>
</h2>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment