Header Button Not Aligning

CMS & WordPress
1

Hi Guys,

Here is the code I am using to add a button to header:

In functions.php:

//add a widget area in the header as described by TomHart
if ( function_exists ('register_sidebar') )
register_sidebar( array(
  'name' => __( 'Header Widgets Area', 'twentythirteen' ),
  'id' => 'sidebar-header',
  'description' => __( 'Header widgets area for my child theme.' ,  'twentythirteen' ),
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );

and in header.php:

<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('Header Widgets Area') ) :
 endif; ?>

<header id="header">

<div class="logo">
<img .. />
</div>

<div id="header-sidebar" style="width: 60%;float: right;">
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('Header Widgets Area') ) :
 endif; ?>
</div> <!-- #header-sidebar -->

<div class="clear"></div>
</header>

What I would is to have the donate button after the last menu item in the nav bar.

At the moment the button is appearing twice:

http://organicweb.mozyou.com

Thanks

2

Anyone help me with this guys?

3

Well I’m not a wordpress expert, but you only post the <header> code there. Your second donate button is not inside of <header>. So you haven’t even given us all the code (or the code we need.)

4

Here is my header code:

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<?php $options = get_option('ci_theme_options'); ?>
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<?php $options = get_option('ci_theme_options');
    if(!isset($options['ci_disableresponsive'])) { ?>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><?php
    }
?>
<title><?php
    /*
     * Print the <title> tag based on what is being viewed.
     */
    global $page, $paged;

    wp_title( '|', true, 'right' );

    // Add the blog name.
    bloginfo( 'name' );

    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) )
        echo " | $site_description";

    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
        echo ' | ' . sprintf( __( 'Page %s', 'organicweb' ), max( $paged, $page ) );

    ?></title>
<?php if (!isset($content_width)) $content_width = 1000; ?>

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/js/jquery-ui-1.8.20.custom.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/colorbox.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/js/flexslider.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/js/superfish.css" />

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link href='http://fonts.googleapis.com/css?family=Condiment|Chicle|Questrial|Marko+One|Dynalight|Berkshire+Swash|Shadows+Into+Light|Boogaloo|Ruge+Boogie|Fredericka+the+Great|Alex+Brush|Mr+Dafoe|Waiting+for+the+Sunrise|Allura|Amatic+SC|Engagement|Aguafina+Script|Qwigley|Mrs+Sheppards|Merienda+One|Cookie|Monoton|Cedarville+Cursive|Loved+by+the+King|Calligraffitti|Pompiere|Give+You+Glory|Miss+Fajardose|Rancho|Lobster|Pinyon+Script|Indie+Flower|Zeyada|Cabin+Sketch|Tienne|Trade+Winds|Bad+Script|Sonsie+One' rel='stylesheet' type='text/css'>
<?php
        if($options['ci_favicon']) {
            $favicon = $options['ci_favicon'];
            echo'<link rel="shortcut icon" type="image/x-icon" href="'.$favicon.'">';
        }
?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); echo '/styles/'.$options['ci_generalstyle'];?>.css" />

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
    if ( is_singular() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );

    wp_head();
?>
<style>
    <?php $options = get_option('ci_theme_options');
        if($options['ci_primarycolor']) :
        $primarycolor = $options['ci_primarycolor'];
        print "
                input:focus,
                textarea:focus {
                    border: 1px solid #$primarycolor !important;
                }
                .flickr_badge_image a:hover img {
                    border: 3px solid #$primarycolor !important;
                }
                body {
                    border-top: 2px solid #$primarycolor !important;
                }
                a:hover,
                h3.ci-pageheader,
                .widget-title,
                .ci-subnavi li a:hover,
                .ci-subnavi li.current_page_item a,
                .current-menu-item a,
                .current-menu-ancestor a,
                li.ui-state-active a,
                .ci-navigation a:hover,
                .ci-primary-navigation-container .current-menu-item .sub-menu a:hover,
                #ci-mainmenu .sub-menu .menu-item a:hover,
                .ui-state-default a:hover,
                .widget_nav_menu li a:hover,
                .widget_nav_menu li.current_page_item a,
                #ci-portfolio #filter li a:hover,
        #ci-portfolio #filter li a.ci-active-cat,
        #ci-portfolio h3.ci-pageheader {
                    color: #$primarycolor !important;
                }
                #commentform p.form-submit input,
                .ci-sumbitbutton,
                .widget_ci_donation_widget a.ci-donation-btn {
                    background: #$primarycolor !important;
                }
        ";
        endif;
    ?>
</style>

</head>

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

    <span id="ci-generalfont" class="ci-generalfont-<?php echo $options['ci_generalfont']; ?>">
    <span id="ci-navistyle" class="<?php echo $options['ci_navistyle']; ?>">
    <?php
        $rootpageid = get_ancestors($post->ID,'page');
        $numOfAncestors = sizeof(get_ancestors( $post->ID, 'page' ));
        $GLOBALS["numOfAncestors"] = $numOfAncestors;
        if(isset($rootpageid[0])) :
            $GLOBALS["rootpage"] = $rootpageid[0];
        endif;
    ?>

    <!-- Facebook integration - START -->
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- Facebook integration - END -->

    <!-- Slidebox -->
    <?php get_template_part('functions/slidebox'); ?>
    <div class="ci-content-environment">
        <div id="page" class="hfeed">
            <div class="ci-header" id="branding" role="banner">
                <span class="ci-hgroup">
                    <?php
                    echo '<a href="'.esc_url( home_url( '/' ) ).'" class="ci-sitelogo" rel="home">';
                            if($options['ci_enablelogo']) {
                                echo '<img src="'.$options['ci_logo'].'" alt="';
                                echo bloginfo( 'name' );
                                echo '"';
                                if($options['ci_logowidth']) {
                                    echo 'width="'.$options['ci_logowidth'].'"';
                                }
                                if($options['ci_logoheight']) {
                                    echo 'height="'.$options['ci_logoheight'].'"';
                                }
                                echo '/>';

                            } else {
                                echo '<h1 id="site-title">';
                                echo bloginfo( 'name' );
                                echo '</h1>';
                            }
                    echo '</a>';
                    ?>
                </span>


                <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'organicweb' ); ?>"><?php _e( 'Skip to primary content', 'organicweb' ); ?></a></div>
                <div id="access" class="ci-primary-navigation-container" role="navigation">
                    <?php if ( has_nav_menu( 'primary-menu' ) ) {

                    wp_nav_menu( array(     'sort_column' => 'menu_order',
                                                'menu_class' => 'ci-navigation',
                                                'theme_location' => 'primary-menu',
                                                'depth' => '0',
                                                'menu_id' => 'ci-mainmenu' ) );
                }?>
                </div>
                                  <header id="header">

<div class="logo">
<img .. />
</div>

<div id="header-sidebar" style="width: 8%;float: right;">
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('Header Widgets Area') ) :
 endif; ?>
</div> <!-- #header-sidebar -->
                <div class="ci-clear"></div>
            </div>

            <div id="main">
                <div class="ci-content-head"></div>
                <div class="ci-content-body">

<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('Header Widgets Area') ) :
 endif; ?>

Functions.php:

<?php

// Set Global Variables
    define('CI_WAYHOME', get_template_directory_uri());
    define('CI_FILEPATH', get_template_directory());
    define('CI_DIRECTORY', get_template_directory_uri());


// Load Translation
    load_theme_textdomain ('organicweb');


// Theme Option Pages
    require_once ( get_template_directory() . '/functions/admin-general-options.php' );
    require_once ( get_template_directory() . '/functions/admin-homepage-options.php' );


// Load Scripts
    function register_js() {
        wp_register_script('jquery-ui-custom', get_template_directory_uri() . '/js/jquery-ui-1.9.2.custom.min.js');
        wp_register_script('colorbox', get_template_directory_uri().'/js/jquery.colorbox-min.js');
        wp_register_style('mobilecss', get_template_directory_uri() . '/mobile.css');
        wp_register_script('plugin-portfolio-menufilter', get_template_directory_uri().'/js/menufilter.js');
        wp_register_script('fe-inline', get_template_directory_uri().'/js/frontend_inline.js');
        wp_register_script('slides', get_template_directory_uri().'/js/jquery.flexslider.js');
        wp_register_script('wdgt-twitter', get_template_directory_uri().'/js/twitter.js');
        wp_register_script('cufon', get_template_directory_uri().'/js/cufon-yui.js');
        wp_register_script('ffftusj', get_template_directory_uri().'/js/fff_tusj_700.font.js');
        wp_register_script('livequery', get_template_directory_uri().'/tinymce/js/jquery.livequery.js');
        wp_register_script('appendo', get_template_directory_uri().'/tinymce/js/jquery.appendo.js');
        wp_register_script('popup', get_template_directory_uri().'/tinymce/js/popup.js');
        wp_register_script('supersubs', get_template_directory_uri().'/js/supersubs.js');
        wp_register_script('superfish', get_template_directory_uri().'/js/superfish.js');
        wp_register_script('tinynav', get_template_directory_uri().'/js/tinynav.js');
        wp_register_script('be-inline', get_template_directory_uri().'/admin/js/inline.js');

        wp_enqueue_script('jquery');

        if (!is_admin()) {
            wp_enqueue_script('jquery-ui-custom');
            wp_enqueue_script('tinynav');
            wp_enqueue_script('tabbed');
            wp_enqueue_script('appendo');
            wp_enqueue_script('colorbox');
            wp_enqueue_script('slides');
            wp_enqueue_script('supersubs');
            wp_enqueue_script('superfish');

            $options = get_option('ci_theme_options');
            if(!isset($options['ci_disableresponsive'])) {
                wp_enqueue_style('mobilecss');
            }

            $options = get_option('ci_theme_options');
            if($options['ci_generalfont'] == 'default') {
                wp_enqueue_script('cufon');
                wp_enqueue_script('ffftusj');
            }

      if (in_array( 'ci-portfolios/ci-portfolio.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
        wp_enqueue_script('plugin-portfolio-menufilter');
      }



            wp_enqueue_script('wdgt-twitter');
            wp_enqueue_script('fe-inline');
        } else {
            wp_enqueue_script('jquery-ui-sortable');
            wp_enqueue_script('livequery');
            wp_enqueue_script('appendo');
            wp_enqueue_script('popup');
            wp_enqueue_script('be-inline');
        }
    }

    add_action('init', 'register_js');

// Add support for WordPress 3.0's custom menus
    add_action( 'init', 'register_my_menu' );


// Register area for custom menu
    function register_my_menu() {
    register_nav_menu( 'primary-menu', __( 'Primary Menu', 'organicweb' ) );
    }

add_filter('body_class','ci_browser');
function ci_browser($classes) {
    global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

    if($is_lynx) $classes[] = 'lynx';
    elseif($is_gecko) $classes[] = 'gecko';
    elseif($is_opera) $classes[] = 'opera';
    elseif($is_NS4) $classes[] = 'ns4';
    elseif($is_safari) $classes[] = 'safari';
    elseif($is_chrome) $classes[] = 'chrome';
    elseif($is_IE) $classes[] = 'ie';
    else $classes[] = 'unknown';

    if($is_iphone) $classes[] = 'iphone';
    return $classes;
}


// Set widgets areas
    function widgets_init() {

        register_sidebar( array(
            'name' => __( 'Homepage 1/4', 'organicweb' ),
            'id' => 'sidebar-3',
            'description' => __( 'Widgets will appear on the homepage only', 'organicweb' ),
            'before_widget' => '<li class="ci-content-positioner"><div id="%1$s" class="widget %2$s">',
            'after_widget' => "</div></li>",
            'before_title' => '<h3 class="ci-cufon widget-title">',
            'after_title' => '</h3>',
        ) );

        register_sidebar( array(
            'name' => __( 'Homepage 1/2', 'organicweb' ),
            'id' => 'sidebar-4',
            'description' => __( 'Widgets will appear on the homepage only', 'organicweb' ),
            'before_widget' => '<li class="ci-content-positioner"><div id="%1$s" class="widget %2$s">',
            'after_widget' => "</div></li>",
            'before_title' => '<h3 class="ci-cufon widget-title">',
            'after_title' => '</h3>',
        ) );

        register_sidebar( array(
            'name' => __( 'Primary Sidebar', 'organicweb' ),
            'id' => 'sidebar-1',
            'description' => __( 'Widgets will appear on all pages with sidebar', 'organicweb' ),
            'before_widget' => '<div class="ci-content-positioner"><div id="%1$s" class="widget %2$s">',
            'after_widget' => "</div></div>",
            'before_title' => '<h3 class="ci-cufon widget-title">',
            'after_title' => '</h3>',
        ) );

        register_sidebar( array(
            'name' => __( 'Footer 4/4', 'organicweb' ),
            'id' => 'sidebar-2',
            'description' => __( 'Widgets will appear at the end of every page', 'organicweb' ),
            'before_widget' => '<li class="ci-content-positioner"><div id="%1$s" class="widget %2$s">',
            'after_widget' => "</div></li>",
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        ) );


    }
    add_action( 'widgets_init', 'widgets_init' );


 // Add the Theme Shortcodes
    include("functions/theme-shortcodes.php");


// Add the Latest Tweets Custom Widget
    include("functions/widget-tweets.php");


// Add the Video Custom Widget
    include("functions/widget-video.php");


// Add the Flickr Custom Widget
    include("functions/widget-flickr.php");


// Add the Ad Custom Widget
    include("functions/widget-ad.php");

// Add the Custom Donation Widget
    include("functions/widget-donate.php");




// Create Excerpt & More Link
    function ci_create_excerpt_more_link($more) {
      global $post;
    }
    add_filter('excerpt_more', 'ci_create_excerpt_more_link');

    function custom_excerpt_length( $length ) {
        return 40;
    }
    add_filter( 'excerpt_length', 'custom_excerpt_length', 60 );


// Enable post thumbnails
    add_theme_support('post-thumbnails');
    set_post_thumbnail_size(595);

  if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'portfolio-thumb', 290, 180, true ); //(cropped)
    add_image_size( 'portfolio-fullwidth', 900, 500, true ); //(cropped)
  }


// Add Comments & Ping
    add_theme_support( 'automatic-feed-links' );
    include("functions/settings-comments.php");


// Shortcodes
    require_once (CI_FILEPATH . '/tinymce/tinymce.loader.php');
    add_filter('widget_text', 'shortcode_unautop');
    add_filter('widget_text', 'do_shortcode');


    add_editor_style('custom-style.css');

//add a widget area in the header as described by TomHart
if ( function_exists ('register_sidebar') )
register_sidebar( array(
  'name' => __( 'Header Widgets Area', 'twentythirteen' ),
  'id' => 'sidebar-header',
  'description' => __( 'Header widgets area for my child theme.' ,  'twentythirteen' ),
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );
?>

That’s got both the header and Functions.php code

5

This code doesn’t match your post #1 code. Where is your closer </header>?

6

Hi Ryan,

That’s the full functions and header code.

If you look at the code, you will see , there is no

7

So, I am trying a different code below for the header donate button; it still now working.

This is the code I added to my header.php:

<?php
        // Display Donate button
        if( wpex_get_data( 'callout_link' ) !== '' && wpex_get_data( 'header_donate', '1' ) == '1' ) { ?>
            <a href="<?php echo wpex_get_data( 'callout_link' ); ?>" id="header-donate" title="<?php echo wpex_get_data( 'callout_text' ); ?>" target="_<?php echo wpex_get_data( 'callout_target' ); ?>">
                <div id="header-donate-inner">
                    <?php if(wpex_get_data( 'callout_icon' ) !='Select') { ?>
                    <span class="fa fa-<?php echo wpex_get_data( 'callout_icon' ); ?>"></span>
                    <?php } ?>
                    <?php echo wpex_get_data( 'callout_text' ); ?>
                </div><!-- /header-donate-inner -->
            </a><!-- /header-donate -->
        <?php } ?>

And for CSS:

/*Donate Button*/
#header-donate { cursor: pointer; display: block; position: absolute; bottom: 0px; right: 20px; background: #d84a2f url("images/donate-bg.png") repeat-x; color: #fff; font-weight: normal; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0,0,0, 0.4); /*rounded corners*/ border: 1px solid #b8020b; border-bottom: none; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; }
#header-donate:hover { text-decoration: none }
#header-donate-inner { padding: 0 20px; height: 35px; line-height: 35px; border-top: 1px solid #e89585; /*rounded corners*/ border-bottom: none; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; /*animation*/ -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
#header-donate:hover #header-donate-inner { height: 40px; line-height: 40px; }
#header-donate .fa { color: #960209; text-shadow: none; }

The header.php code breaks the website. I just want a button next to the navbar. What am I doing wrong?

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.