How to Add Description Below Logo?

  • I’m using the Editor theme. In the Editor theme it will show
    EITHER
    An Image Logo
    OR
    Site Title and Tagline

    Right now the website is showing an Image Logo (the owl carrying the books)

    Now, I’ve done some experimenting with the HTML when viewing the page and have come up with exactly what I want. I want this:

    Click here to see what site should look like

    It’s got the Image Logo and below I put the title of the page but called it site-description (h2) so it uses the smaller font that the Tagline uses.

    I’ve highlighted the HTML code that I used to get that. I’ll also post it here:
    <h2 class="site-description"><a href="https://omnieducation.org/" rel="home">Omni Education | Children's Creative Writing | Download Free Workbooks </a></h2>

    My question is where do I put that HTML code?

    My guess is it goes in the header.php. But I’m not sure where it goes and what code I might have to delete from the header.php

    This is the original code for the Editor header.php

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package Editor
 */
?><!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="https://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div id="page" class="hfeed site container">

	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'editor' ); ?></a>

	<!-- Get sidebar color option (Appearance -> Customize -> Theme Options) -->
	<?php
		$editor_sidebar_color = get_option( 'editor_customizer_sidebar_color' );
		$editor_featured_cat = get_theme_mod( 'editor_featured_cat' );
	?>
	<header id="masthead" class="site-header <?php echo $editor_sidebar_color; ?>" role="banner">
		<!-- Tab navigation -->
		<ul class="toggle-bar" role="tablist">
			<!-- Main navigation -->
			<li id="panel-1" class="current" role="presentation">
				<a href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true" class="current nav-toggle" data-tab="tab-1"><i class="fa fa-bars"></i><span class="screen-reader-text"><?php _e( 'View menu', 'editor' ); ?></span></a>
			</li>

			<!-- Featured Posts navigation -->
			<?php if( $editor_featured_cat && $editor_featured_cat !== '0' ) { ?>
				<li id="panel-2" role="presentation">
					<a href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false" data-tab="tab-2"><i class="fa fa-thumb-tack"></i><span class="screen-reader-text"><?php _e( 'View featured posts', 'editor' ); ?></span></a>
				</li>
			<?php } ?>

			<!-- Sidebar widgets navigation -->
			<li id="panel-3" role="presentation">
				<a href="#tab-3" role="tab" aria-controls="tab-3" aria-selected="false" class="folder-toggle" data-tab="tab-3"><i class="fa fa-folder"></i><i class="fa fa-folder-open"></i><span class="screen-reader-text"><?php _e( 'View sidebar', 'editor' ); ?></span></a>
			</li>
		</ul>

		<div id="tabs" class="toggle-tabs">
			<div class="site-header-inside">
				<!-- Logo, description and main navigation -->
				<div id="tab-1" class="tab-content current fadeIn">
					<div class="site-branding">
						<!-- Get the site branding -->
						<?php
							$logo = get_theme_mod( 'editor_customizer_logo' );
							if ( ! empty( $logo ) ) {
						?>
							<h1 class="site-logo">
								<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="site-logo" src="<?php echo esc_url( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" /></a>
							</h1>
						<?php } else { ?>
							<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
							<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
						<?php } ?>
					</div>
					<nav id="site-navigation" class="main-navigation" role="navigation">
						<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,

    You bring up a good question. I see from you’re screenshot that you’ve already used your browser’s developer tools to take a look under the hood. When using the developer tools I’ve looked at your site’s logo.

    The HTML for this is : <img class=”site-logo” src=”https://omnieducation.org/wp-content/uploads/2016/06/owl_w_books_small-1.png&#8221; alt=”Omni Education | Children’s Creative Writing | Download free workbooks”>

    I would start by going into your site’s dashboard and try editing the theme itself and see if that code snippet pops up anywhere for you.

    If you reply back with what theme you’re using I can try and replicate this on my end to see if I can give you a better answer. However, for the moment that’s the only lead that springs to mind. I hope this helps. Also, I’ve subscribed to email notifications for this thread. When you’ll reply I’ll get an alert and take a look.

    It looks like this is the area where you want to insert your code:

    <!– Get the site branding –>
    <?php
    $logo = get_theme_mod( ‘editor_customizer_logo’ );
    if ( ! empty( $logo ) ) {
    ?>
    <h1 class=”site-logo”>
    “><img class=”site-logo” src=”<?php echo esc_url( $logo ); ?>” alt=”<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>” />
    </h1>
    <?php } else { ?>
    <h1 class=”site-title”>” rel=”home”><?php bloginfo( ‘name’ ); ?></h1>
    <h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
    <?php } ?>
    </div>

    Based on what I observed using the developer tools that seems to be the correct spot. However, there’s also PHP code in there as opposed to just straight HTML. That being said, it may not be as straight forward as copying and pasting html. In my brief testing, I can confirm you can do a copy and paste of HTML. However, I can’t tell you what functionality if any you would end up omitting if you were to do that. While I understand this isn’t a complete solution I hope I’ve narrowed it down a bit for you.

    Thread Starter maggieameanderings

    (@maggieameanderings)

    @ avazquez1

    Thank you very much for the help.

    You’re welcome. I hope that I helped !

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to Add Description Below Logo?’ is closed to new replies.