• Resolved AndyFromVandy

    (@andyfromvandy)


    I’ve looked through the support logs, FAQs, etc, and don’t think I’ve seen this topic addressed. I’d like to include some text hyperlinks in the header area, say, above the social icons and tagline — or perhaps in between. Essentially, I’d like to create one more level of Nav without dropdowns (simple links such as “Contact,” “Directions,” etc.).

    (In a sense, think of it as something akin to the bottom line of the page, “Designed by Themes & Co”, except at the top.)

    I’m able to inject HTML via widgets into the sidebars and footers, but there’s no header widget.

    I’m reasonably comfortable with HMTL, CSS, but scared to death of touching the PHP for fear of breaking it. Trying brute force, I added the following to the header.php file (right after the header and before the “<?php do_action( ‘__head’); ?>” line. It’s not elegant (or the best way to code!), however, it works…but seems to have “killed” the favicon functionality (the favicon no longer shows).

    <div class="adjheader" align="right">
       <a href="https://www.myurl">Contact Us</a>&nbsp &nbsp &nbsp &nbsp  | &nbsp &nbsp &nbsp
       <a href="mylink2">Careers</a>&nbsp &nbsp &nbsp &nbsp  | &nbsp &nbsp &nbsp
       <a href="mylink3">FAQ</a>&nbsp &nbsp &nbsp &nbsp  | &nbsp &nbsp &nbsp
       <a href="mylink4">Another</a>
    
    </div>

    Any thoughts on how this might be done?

    Thanks. I’m a newb — be gentle.

    (Temporary) Site: https://www.clashedplaid.com

Viewing 14 replies - 1 through 14 (of 14 total)
  • Discussed here.

    Thread Starter AndyFromVandy

    (@andyfromvandy)

    Thanks, ElectricFeet. I overlooked that post. That said, I’m not following it. Any chance you could give me a little guidance on where to edit the PHP? Through the WordPress front end, I created another menu (“topmenu”), but am not 100% sure what code to modify to insert it properly. (I think/hope I can handle the CSS, but am struggling with PHP.)

    Many thanks!

    OK. I’m a php newb too, so I’ll try to work it out so we can learn together. (And perhaps someone like Seahawksean can lend us a hand if we get stuck.)

    First of all, you shouldn’t be scared of messing things up, because you have a full backup, right? On your own PC/Mac? Right? If not, go and install the BackUpWordPress plugin and download a full backup of your site.

    Go into Customiz’it! and switch on the developer tooltips. Clicking around in there tells me that everything that is displayed in the header comes from customizr/parts/class-header-header_main.php.

    Dig out that file from your backup (it’s a good way to make sure your backup is working) or download the file from your ftp client.

    While you’re doing that, I’ll see if I can figure out a bit more…

    Thread Starter AndyFromVandy

    (@andyfromvandy)

    Thank you, ElectricFeet — will do. My plate is full today, but hope to make a run at this within the next 24-48 hours!

    From the first part of the class-header-header_main.php file you can see how the header is laid out. Code excerpt (non-working/not complete):

    //html > head actions
    add_action ( '__before_body'			, array( $this , 'tc_head_display' ));
    add_action ( 'wp_head'     				, array( $this , 'tc_favicon_display' ));
    
    //html > header actions
    add_action ( '__before_main_wrapper'	, 'get_header');
    add_action ( '__header' 				, array( $this , 'tc_logo_title_display' ) , 10 );
    add_action ( '__header' 				, array( $this , 'tc_tagline_display' ) , 20, 1 );
    add_action ( '__header' 				, array( $this , 'tc_navbar_display' ) , 30 );
    
    //body > header > navbar actions ordered by priority
    add_action ( '__navbar' 				, array( $this , 'tc_social_in_header' ) , 10, 1 );
    add_action ( '__navbar' 				, array( $this , 'tc_tagline_display' ) , 20, 1 );

    (Don’t worry about understanding this (I don’t), it’s just the names we’re after.

    You want to insert your menu above the socials and the tagline. So, effectively, above the navbar, but at the same level as the logo.

    If you look at function tc_logo_title_display() (around line 118), you can see that it’s first checking whether there is a logo uploaded or not (<?php if( $logo_src != null) :?>, which means “if the logo is not null”). Then the rest of the if/then/else displays the logo in a <div class="brand span3">. Recall from the Twitter Bootstrap scaffolding that there will be a span9 further
    down to bring the total to span3+span9=span12.

    Sure enough, the next function tc_navbar_display() (around line 162). There is a “navbar-wrapper” which has the class span9, which contains the navbar—both the normal navbar <div class="navbar notresp row-fluid pull-left"> and the responsive navbar <div class="navbar resp"> (the bootstrap makes sure that only one of these will display at any one time, depending on the screen width).

    So you need to insert your menu in the navbar-wrapper, but before the navbar itself. You can also take advantage of navbar-wrapper’s span9, which is what you need.

    Before you can do this, however, you need to go to Appearance > Menus and create yourself another menu. Let’s say you call it my-top-menu.

    Now we turn to Seahawksean’s code in here. For his case, where he needed a small menu (with a member login in it), he suggested the code:

    <div class="member-login span2">
    	<?php wp_nav_menu( array('menu' => 'menu-member' )); ?>
    </div>

    Substituting your menu name, and taking into account that you already have a span9 defined (that is, you don’t need Seahawksean’s span2), your code will become:

    <div class="my-top-menu-class">
    	<?php wp_nav_menu( array('menu' => 'my-top-menu' )); ?>
    </div>

    You should insert this after the line:
    <div class="navbar-wrapper clearfix span9">
    and before the line:
    <div class="navbar notresp row-fluid pull-left">

    That is, as we said above, in the navbar-wrapper, but before the navbar itself.

    You can see my reasoning above, but I stress I’m new to this too. You should put your modified class-header-header_main.php into your child theme’s parts directory. I recommend that you have a pristine copy of class-header-header_main.php on your desktop, ready to overwrite the changes via ftp if anything goes wrong.

    Don’t make the mistake I once made, which was to keep a backup copy of a php file in the theme / child-theme’s folder (!). This will load both the backup and the live version, and they will conflict with each other.

    Now you have a working menu, the next step will be to style it. The code above just creates a vertical list. I think there was another post on this recently, so I’ll see if I can track it down.

    Ah, I see it is the same thread in which @seahawksean explains how to get the menu horizontal.

    You should now be all set.

    Good luck!

    I can’t get the CSS in that thread to work. Maybe someone else can help.

    Thread Starter AndyFromVandy

    (@andyfromvandy)

    ElectricFeet, thank you so much — it’s all working!

    Wonderful!

    Can you tell us the CSS you used to get it all horizontal / with the bars in between etc?

    Thread Starter AndyFromVandy

    (@andyfromvandy)

    I followed the guidance in your prior posts (as well as additional advice linked within them). I didn’t implement with the bars in-between, afterall. THANKS AGAIN!

    Thanks. I wanted to know because I couldn’t get it to work—even following my own guidance ??

    It would be helpful for others to put it all here in one place, if you could.

    p.s. I see that some of your styles are in the Customizr style.css. You should instead set up a child theme to do this so your CSS doesn’t get overwritten. Instructions here.

    Thread Starter AndyFromVandy

    (@andyfromvandy)

    ElectricFeet (et al.), sorry, I figured that given that the guidance had been posted, it wouldn’t make sense to repeat…but you’re right, I’ll post in a consolidated fashion below for all. First, note that my development environment has moved to a different URL. As such, the code that is at clashedplaid.com is outdated — I am NOT updating it. Instead, I now have a separate account and, yes, I’ve created a child theme.

    First, within the Customizr dashboard, I created and populated a new menu (“top menu”). Then, I edited the class-header-header_main.php file. See below. My addition is simply…

    <div class="top-menu-class">
                             <?php wp_nav_menu( array('menu' => 'top-menu' )); ?>
                         </div>

    …see below to see WHERE it goes…

    function tc_navbar_display() {
    		tc__f('rec' , __FILE__ , __FUNCTION__, __CLASS__ );
    		ob_start();
    		?>
    		<?php do_action( 'before_navbar' ); ?>
    	      	<div class="navbar-wrapper clearfix span9">
    
                         <div class="top-menu-class">
                             <?php wp_nav_menu( array('menu' => 'top-menu' )); ?>
                         </div>
             		<div class="navbar notresp row-fluid pull-left">
    .
    .
    .

    Associated changes in the child-theme style.css are:

    /* Create and style top-menu */
    
    .top-menu-class li {
        float: right;  /* horizontal alignment */
        padding-left: 10px;  /* spacing between items */
        padding-right: 10px;  /* spacing between items */
        font-size: 12px;
        font-weight:900;  /* very dark bold */
        background-color:#FFFFFF;  /* ensure white background, just in case */
        list-style: none outside none;  /* removes bullets */
    }
    
    .top-menu-class a {
        color: #686868 !important;  /* make these items grey */
        font-weight:900;  /* very dark bold */
    }

    Wonderful! Thanks ??

    Thanks. I followed all steps of Andy but couldn’t create top menu. Currently I can’t access to admin panel of website. All this happened
    after successfully creating 6 featured pages on front page. Need guidance .I see blank page once I login otherwise website is visible. Unable to understand anything.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Headers (& Favicon Interference)’ is closed to new replies.