Replies: 0
Hi, I’ve recently started developing a theme using the udnerscores starter theme.
Everything is going well, but I can’t seem to get the logo to rescale when it’s in the header. At the moment it’s way to large and doesn’t rescale at all.
Here is my header.php code
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Elesha
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'elesha' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<div id="toggle">
<i class="fa fa-bars fa-2x" alt="Show" aria-hidden="true"></i></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu side-menu' ) ); ?>
</div>
</header><!-- #masthead -->
<?php
if (is_front_page()) {
soliloquy( 'home-page', 'slug' );
}
?>
<div id="content" class="site-content">Here is my functions.php code
<?php
/**
* Elesha functions and definitions
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package Elesha
*/
if ( ! function_exists( 'elesha_setup' ) ) :
/**
* Sets up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which
* runs before the init hook. The init hook is too late for some features, such
* as indicating support for post thumbnails.
*/
function elesha_setup() {
/*
* Make theme available for translation.
* Translations can be filed in the /languages/ directory.
* If you're building a theme based on Elesha, use a find and replace
* to change 'elesha' to the name of your theme in all the template files.
*/
load_theme_textdomain( 'elesha', get_template_directory() . '/languages' );
// Add default posts and comments RSS feed links to head.
add_theme_support( 'automatic-feed-links' );
/*
* Let WordPress manage the document title.
* By adding theme support, we declare that this theme does not use a
* hard-coded <title> tag in the document head, and expect WordPress to
* provide it for us.
*/
add_theme_support( 'title-tag' );
/*
* Enable support for Post Thumbnails on posts and pages.
*
* @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
*/
add_theme_support( 'post-thumbnails' );
add_theme_support( 'custom-logo', array(
'height' => 150,
'width' => 300,
'flex-width' => true,
'flex-height' => true,
) );
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'menu-1' => esc_html__( 'Primary', 'elesha' ),
) );
/*
* Switch default core markup for search form, comment form, and comments
* to output valid HTML5.
*/
add_theme_support( 'html5', array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
) );
// Set up the WordPress core custom background feature.
add_theme_support( 'custom-background', apply_filters( 'elesha_custom_background_args', array(
'default-color' => 'ffffff',
'default-image' => '',
) ) );
// Add theme support for selective refresh for widgets.
add_theme_support( 'customize-selective-refresh-widgets' );
}
endif;
add_action( 'after_setup_theme', 'elesha_setup' );
/**
* Set the content width in pixels, based on the theme's design and stylesheet.
*
* Priority 0 to make it available to lower priority callbacks.
*
* @global int $content_width
*/
function elesha_content_width() {
$GLOBALS['content_width'] = apply_filters( 'elesha_content_width', 640 );
}
add_action( 'after_setup_theme', 'elesha_content_width', 0 );
/**
* Register widget area.
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
*/
function elesha_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Sidebar', 'elesha' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'elesha' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => 'Footer Section 1',
'id' => 'footer-section-1',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Section 2',
'id' => 'footer-section-2',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Section 3',
'id' => 'footer-section-3',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Section 4',
'id' => 'footer-section-4',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'elesha_widgets_init' );
/**
* Enqueue scripts and styles.
*/
function elesha_scripts() {
wp_enqueue_style( 'elesha-style', get_stylesheet_uri() );
wp_enqueue_style( 'elesha-sidebar-style', '/wp-content/themes/elesha/layouts/content-sidebar.css');
wp_enqueue_script( 'elesha-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'elesha-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'elesha_scripts' );
/**
* Implement the Custom Header feature.
*/
require get_template_directory() . '/inc/custom-header.php';
/**
* Custom template tags for this theme.
*/
require get_template_directory() . '/inc/template-tags.php';
/**
* Custom functions that act independently of the theme templates.
*/
require get_template_directory() . '/inc/extras.php';
/**
* Customizer additions.
*/
require get_template_directory() . '/inc/customizer.php';
/**
* Load Jetpack compatibility file.
*/
require get_template_directory() . '/inc/jetpack.php';
add_action( 'wp_head', 'elesha_customizer_css');
function elesha_customizer_css()
{
?>
<style type="text/css">
a { color: <?php echo get_theme_mod('link_color', '#989b9d'); ?>; }
</style>
<style type="text/css">
p { color: <?php echo get_theme_mod('text_color', '#404040'); ?>; }
</style>
<style type="text/css">
h1, h2, h3, h4, h5, h6 { color: <?php echo get_theme_mod('header_color', '#404040'); ?>; }
</style>
<style type="text/css">
.site-header { background: <?php echo get_theme_mod('header_bg', '#fff'); ?>; }
</style>
<?php
}
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,500,500i,700,700i|Rubik:300,300i,400,400i,500,500i,700|Work+Sans:300,400,500,700', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );Also, is there a way to add a control in the customizer to change each object with a certain background color to whatever color the user wishes?
Here is my website with the theme active – http://timothycdavis.co.uk/
Thanks in advance
- This topic was modified 10 minutes ago by supeherotim.