- This topic has 9 replies, 2 voices, and was last updated 8 years, 10 months ago by wensolutions.
-
AuthorPosts
-
January 20, 2016 at 7:08 am #83289KyleMember
I am trying to move the site logo, site-branding, from the site header section to the Top Header section with a left justification. Ideally I would like for the logo to be on the top left of the site and the social icon widget to display with a right justification on the site.
Any way to make these two changes?
site is: asucolorado.com
January 20, 2016 at 2:22 pm #83314wensolutionsParticipantHello Kyle,
This customization can be achieve by refactoring some div structure through code level.
We recommend you to make a Child Theme before you make these customization in your
current theme.So after setting up and activating your Child Theme you will have two new files style.css and functions.php file .
In your functions.php file, paste the following code snippet right below your existing code.
`/**
* Site branding
*
* @since WEN Business 1.0
*/
function wen_business_site_branding(){?>
<div id=”site-navigation” role=”navigation”>
<?php
wp_nav_menu( array(
‘theme_location’ => ‘primary’ ,
‘container’ => ‘nav’ ,
‘container_class’ => ‘main-navigation’ ,
)
);
?>
</div><!– #site-navigation –>
<?php}
/**
* Primary navigation
*
* @since WEN Business 1.0
*/
function wen_business_mobile_navigation(){?>
<a href=”#mob-menu” id=”mobile-trigger”><i class=”fa fa-bars”></i></a>
<div style=”display:none;”>
<div id=”mob-menu”>
<?php
wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘container’ => ”,
) );
?>
</div><!– #mob-menu –>
</div><?php
}
/**
* Header top content
*
* @since WEN Business 1.0
*/
function wen_business_header_top_content(){$social_in_header = wen_business_get_option( ‘social_in_header’ );
$search_in_header = wen_business_get_option( ‘search_in_header’ );?>
<?php if ( ( 1 == $social_in_header && wen_business_is_social_menu_active() ) || 1 == $search_in_header ): ?>
<div id=”header-top-content”>
<div class=”container”>
<div class=”site-branding”>
<h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”>
<?php
$site_logo = wen_business_get_option( ‘site_logo’ );
?>
<?php if ( ! empty( $site_logo ) ): ?>
<img src=”<?php echo esc_url( $site_logo ); ?>” alt=”<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>” />
<?php else: ?>
<?php bloginfo( ‘name’ ); ?>
<?php endif ?>
</a></h1>
<?php
$show_tagline = wen_business_get_option( ‘show_tagline’ );
?>
<?php if ( 1 == $show_tagline ): ?>
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
<?php endif ?>
</div><!– .site-branding –><div class=”header-top”>
<div class=”header-top-inner”>
<?php if ( 1 == $social_in_header ): ?>
<?php the_widget( ‘WEN_Business_Social_Widget’, array( ‘icon_size’ => ‘small’ ) ); ?>
<?php endif ?>
<?php if ( 1 == $search_in_header ): ?>
<div id=”header-search-form”>
<?php get_search_form(); ?>
</div><!– #header-search-form –>
<?php endif ?>
</div><!– .header-top-inner –></div><!– .header-top –>
</div><!– .container –>
</div><!– #header-top-content –>
<?php endif
}`Above code will move site logo in Top Header section. You may need to reupload logo with a appropriate size to adjust in new section.
Now in order to move the social icon widget to right, copy following CSS code snippet in your Child Theme’s style.css.
.header-top{ float: right; }
Just in case, if you wish to move the current primary menu from right to left to fill up the empty logo space, then paste the following CSS code right below the above CSS code.
#site-navigation { float: left; }
Thanks
January 21, 2016 at 10:58 pm #83417KyleMemberThanks for the coding to help make that happen! Unfortunately i’m having issues implementing it due to issues with the child theme. Here is what I have in the Child Theme:
style.css
/*
Theme Name: WEN Business Pro Child Theme
Theme URI: http://wenthemes.com/item/wordpress-themes/wen-business/
Author: SageMedia, LLC
Author URI: http://wenthemes.com/
Description: Child theme for WEN Business Pro theme
Version: 1.0.5
License: GNU General Public License, version 3 (GPLv3)
License URI: http://www.gnu.org/licenses/gpl-3.0.txt
Tags: light, white, blue, one-column, two-columns, left-sidebar, right-sidebar, fixed-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, full-width-template, post-formats, sticky-post, translation-ready, responsive-layout, theme-options, threaded-comments
Text Domain: wen-business
Template: wen-business-pro
*//* =Child Theme Custom CSS
————————————————————– *//** functions.php ———– */
<?php
/**
* Child Theme functions and definitions
*
*//**
* Loading Parent theme stylesheet
*
*/
add_action( ‘wp_enqueue_scripts’, ‘catchbox_child_enqueue_styles’ );
function catchbox_child_enqueue_styles() {
wp_enqueue_style( ‘catchbox-parent-style’, get_template_directory_uri() . ‘/style.css’ );
}January 21, 2016 at 11:38 pm #83418wensolutionsParticipantHi Kyle, I am sorry you are having trouble with it.
Your respective code of style.css and functions.php for Child Theme is working perfectly to me when I exactly pasted it and tried by activating it. Child Theme is running fine. So just paste out the code I have given you above right below the current code of your child theme files. But I doubt, after you copy and paste the code from your browser to your actual php file you might need to properly format the single quotes ( ‘ ) which might renders incorrectly that could have cause you a problem.
Or can you please explain the actual issue that happen while you try to implement the Child theme with above code?
January 21, 2016 at 11:41 pm #83419KyleMemberWhen I past the functions.php code in below I get the following error message:
Parse error: syntax error, unexpected end of file in /homepages/40/d141091220/htdocs/clickandbuilds/ASUColoradoAlumni/wp-content/themes/wen-business-pro-child/functions.php on line 92
line 91 and 92 on the functions.php file are:
<?php endif
}’January 21, 2016 at 11:55 pm #83420wensolutionsParticipantIt appears that the terminating syntax
;
is missed right afterendif
statement.So correct syntax to replace above is as follows :
<?php endif; }
January 21, 2016 at 11:59 pm #83421KyleMemberVery odd things happening, I added the terminating syntax ; to the endif statement and now get the following error:
Parse error: syntax error, unexpected end of file in /homepages/40/d141091220/htdocs/clickandbuilds/ASUColoradoAlumni/wp-content/themes/wen-business-pro-child/functions.php on line 93
Here is the entirety of the functions.php child theme code:
<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_child_theme_styles’, PHP_INT_Max);
function enqueue_child_theme_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_uri(), array(‘partent-style’) );
}‘/**
* Site branding
*
* @since WEN Business 1.0
*/
function wen_business_site_branding(){
?>
<div id=”site-navigation” role=”navigation”>
<?php
wp_nav_menu( array(
‘theme_location’ => ‘primary’ ,
‘container’ => ‘nav’ ,
‘container_class’ => ‘main-navigation’ ,
)
);
?>
</div><!– #site-navigation –>
<?php
}
/**
* Primary navigation
*
* @since WEN Business 1.0
*/
function wen_business_mobile_navigation(){
?>
<i class=”fa fa-bars”></i>
<div style=”display:none;”>
<div id=”mob-menu”>
<?php
wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘container’ => ”,
) );
?>
</div><!– #mob-menu –>
</div>
<?php
}
/**
* Header top content
*
* @since WEN Business 1.0
*/
function wen_business_header_top_content(){
$social_in_header = wen_business_get_option( ‘social_in_header’ );
$search_in_header = wen_business_get_option( ‘search_in_header’ );
?>
<?php if ( ( 1 == $social_in_header && wen_business_is_social_menu_active() ) || 1 == $search_in_header ): ?>
<div id=”header-top-content”>
<div class=”container”>
<div class=”site-branding”>
<h1 class=”site-title”>” rel=”home”>
<?php
$site_logo = wen_business_get_option( ‘site_logo’ );
?>
<?php if ( ! empty( $site_logo ) ): ?>
” alt=”<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>” />
<?php else: ?>
<?php bloginfo( ‘name’ ); ?>
<?php endif ?>
</h1>
<?php
$show_tagline = wen_business_get_option( ‘show_tagline’ );
?>
<?php if ( 1 == $show_tagline ): ?>
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
<?php endif ?>
</div><!– .site-branding –>
<div class=”header-top”>
<div class=”header-top-inner”>
<?php if ( 1 == $social_in_header ): ?>
<?php the_widget( ‘WEN_Business_Social_Widget’, array( ‘icon_size’ => ‘small’ ) ); ?>
<?php endif ?>
<?php if ( 1 == $search_in_header ): ?>
<div id=”header-search-form”>
<?php get_search_form(); ?>
</div><!– #header-search-form –>
<?php endif ?>
</div><!– .header-top-inner –>
</div><!– .header-top –>
</div><!– .container –>
</div><!– #header-top-content –>
<?php endif;
}’January 22, 2016 at 12:13 am #83422wensolutionsParticipantWell, to maintain the precision while copying the entire code I’m sharing you the Git hub link of functions.php code.
https://gist.github.com/anonymous/70e9f3e0dce77cecca6cLet me know whether this helps.
January 22, 2016 at 12:16 am #83423KyleMemberFANTASTIC! There must have been an error in copying the code over as it is working perfectly now. Thank you so much for you help on this!
January 22, 2016 at 12:20 am #83425wensolutionsParticipantYou’re welcome; it has been my pleasure helping you out!
-
AuthorPosts
- The topic ‘Move Site Logo’ is closed to new replies.