Social media on top right Montezuma

Hello again ??

Well, is not so easy to do it. To do that you will have to modify the header.php file, adding all links manually. After that you will need to style them using CSS.

But, you will have a problem. Your theme is responsive. It will be necessary a solution to display (or hide) those icons from your mobile visitors.

Hope it helps.

Evandro

@evandro, it is actually quite easy to do in this theme, as the theme uses virtual template files that are easily accessible from the theme’s options pages. You should try installing the theme to take a look.

@zaralene, which social media plugin are you thinking of using? Lots of developers have been using Shareaholic with Montezuma fairly successfully. If the plugin needs to go into a widget, you can create a widget area in the header.php sub-template (Appearance > Montezuma Options > Sub Templates > header.php). You’ll want to create a widget area by inserting this code line:

<?php dynamic_sidebar( 'Widget Area SOCIAL' ); ?>

Take a look at the page.php Main Template to see how that works. Once you define your new widget area, you’ll be able to drag your social widget into by going to Appearance > Widgets.

Thank you Evandro, I am taking Crouchings advice on this one: I installed Shareaholic and insert the code line into the header.php area where I want them. Then I took a look at the page.php but couldn’t find it there (widget area ONE was present there), what should I look for exactly? First I inserted the code line there as well, but that didn’t give changes and I took it away again.
Then I went to the Widgets in appearance. I can see the new Social widget area there, I can also drag things in there like a picture or a text or something. However not the social media plugins because there is not a special widget for it that I can drag into the social media area.
I have a code for them to insert anywhere, but I have no clue how to add that to this widget. What do I do wrong? I hope my crappy English makes sense.

Update: I added a different social media plugin, acurax, and so I could test how it actually looks. As you can see it doesn’t look okay. For some reason they ends up in places where I don’t want them. When I define outline to either left, center or right it also doesn’t work.
I tried every line in the header but none of them work. They won’t go to the right, I want them about the same location as the widgets, only in the header.
Put them now under breadcrumbs on the right, but also that is not good. ??
https://creacont.nl/

As long as you get it into the general area, you can fine tune it using CSS. Is in the breadcrumbs bar where you want it, or do you want it up above, but to the right, in line with the menu bar?

Yes, I want it in line with the menu bar, above the sidebar. Just above that thin line.

How exactly is the social media buttons being added to the header? Is there a shortcode that you paste in, or did you create a widget area in header.php?

And can you provide a link to the plugin so I can try installing it myself? Is it this one?

Yes that’s the one. But actually I do not have a preference for one specific social media plugin, as long as it works I am fine with it. I just couldn’t get the other one to work that you recommend.
You install the plugin and then adjust the settings. Then you go to the widget area and drag it into the area you want. I chose this one because it has many options for the icons.
I created the widget area in the header.php just like you said. Then I went to the widget area and there it was, so I only had to drag the acurax inside it.

Here is the complete code for the header.php:

<div id=”banner-bg” class=”cf”>
<div id=”banner” class=”row”>
<div id=”logo-area” class=”col5″>

<img src=”https://creacont.nl/wp-content/uploads/2014/03/logo-trendpersmixmedia-web2.png”/&gt;

<<?php bfa_if_front_else( ‘h1’, ‘h3’ ); ?> id=”sitetitle”>
“><?php bloginfo( ‘name’ ); ?></a
<p id=”tagline”><?php bloginfo( ‘description’ ); ?></p>
</<?php bfa_if_front_else( ‘h1’, ‘h3’ ); ?>>
</nav>
<?php wp_nav_menu( array(
‘container’ => ‘nav’,
‘container_class’ => ‘menu-wrapper col7’,
‘container_id’ => ‘menu1-wrapper’,
‘menu_id’ => ‘menu1’,
‘menu_class’ => ‘cf menu’,
‘theme_location’ => ‘menu1’,
‘fallback_cb’ => ‘bfa_page_menu’
) ); ?>
</div>
</div>
<div id=”breadcrumbs1-bg”>
<nav id=”breadcrumbs1″ class=”breadcrumbs lw”>
<?php bfa_breadcrumbs( ‘breadcrumbs1’ ); ?>
<?php dynamic_sidebar( ‘Widget Area SOCIAL’ ); ?>
</div>

Thanks for the code, but can you try again but this time put backticks around it? Otherwise the formatting gets lost. The backtick key should be to the left of the number 1 key on your keyboard, and will have a tilde (~) above it. Or you can also copy the code into a Pastebin and post a link to it here.

CrouchingBruin,

Definitely I will install this theme to check it out… Thanks for the tip ??

Evandro

<div id="banner-bg" class="cf">
	<div id="banner" class="row">
        		<div id="logo-area" class="col5">
           <a href="https://www.creacont.nl">
<img src="https://creacont.nl/wp-content/uploads/2014/03/logo-trendpersmixmedia-web2.png"/>
</a>
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
            				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a
            <p id="tagline"><?php bloginfo( 'description' ); ?></p>
             		</<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
				          </nav>
          <?php wp_nav_menu( array(
			'container' => 'nav',
			'container_class' => 'menu-wrapper col7',
			'container_id' => 'menu1-wrapper',
			'menu_id' => 'menu1',
			'menu_class' => 'cf menu',
			'theme_location' => 'menu1',
			'fallback_cb' => 'bfa_page_menu'
		) ); ?>
  </div>
</div>
<div id="breadcrumbs1-bg">
        	<nav id="breadcrumbs1" class="breadcrumbs lw">
       <?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
      <?php dynamic_sidebar( 'Widget Area SOCIAL' ); ?>
  	</div>

I hope this will work then.

Great, that’s perfect. I forgot to tell you that you needed to put a DIV around the call to dynamic_sidebar().

Anyway, give this code a try:

<div id="banner-bg" class="cf">

   <div id="banner" class="row">
      <div id="logo-area" class="col12">
         <a href="https://www.creacont.nl">
            <img src="https://creacont.nl/wp-content/uploads/2014/03/logo-trendpersmixmedia-web2.png"/>
         </a>
         <<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
            <a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
            <p id="tagline"><?php bloginfo( 'description' ); ?></p>
         </<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
      </div>
   </div>

   <div id="rowNav" class="row">
      <?php wp_nav_menu( array(
         'container' => 'nav',
         'container_class' => 'menu-wrapper col7',
         'container_id' => 'menu1-wrapper',
         'menu_id' => 'menu1',
         'menu_class' => 'cf menu',
         'theme_location' => 'menu1',
         'fallback_cb' => 'bfa_page_menu'
         ) ); ?>

      <div id="widgetarea-social" class="col5">
         <?php dynamic_sidebar( 'Widget Area SOCIAL' ); ?>
      </div>
  </div>
</div>

<div id="breadcrumbs1-bg">
   <nav id="breadcrumbs1" class="breadcrumbs lw">
       <?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
   </nav>
</div>

The header is arranged in three different rows. The first row has an id of banner and contains the logo, the site title, and the tag line.

The second row has an id of rowNav. Remember from the documentation in Appearance > Montezuma Options > CSS Settings > Editing CSS that the theme is based on a 12 column grid in order to make it responsive. What that means is that elements that are within the same row have to line up on column widths that add up to 12 in order for the responsiveness to work correctly. So in this row, there is the menu on the left and the widget area on the right. You’ll see that the nav menu has a class of col7 assigned to it, meaning that it will span across 7 columns, while the new Social widget area is enclosed by a DIV with an id of widgetarea-social and a class of col5, so it spans across 5 columns (again, apologies for not letting you know that the widget area needed to be enclosed within a DIV). If the widths of either area need to be adjusted, you would do it by changing the col# class that’s assigned to it, so if your menu needs to be wider, you can set it to col8 or col9 and then make a corresponding change by shrinking the social widget area to col4 or col3.

The last row is the breadcrumbs row.

You may also need to add a float: left; to #menu1-wrapper in your CSS.

By the way, I really like your menu icons, very creative.

I still don’t understand where every column is. I try to make a picture of it for myself but so far no luck. I mean, where is col12 and where is col 1? I do understand the 3 rows and I also understand that left is 217px, center 594px and right 149px.
It would be helpful if there was a picture/drawing of how the grid is build up.
Anyways, I made all the changes you said and it is already much better! You are a gem to help me out so much. I put the social media on col4 instead of 5. How can I lower it until it’s on the same level of the menu titles (home, contact etc).

By the way, i get this message all the time:
“Your theme needs to be fixed for plugins to work. To fix your theme, use the Theme Editor to insert <?php wp_head(); ?> just before the </head> line of your theme’s header.php file.”

So I had a look in my header.php and cannot find this </head>. Do you have any clue?

As for the menu icons, thanks for the compliment. I am a Photoshop specialist with an experience of 14 years. If I can help you with something design wise just let me know. I will be happy to make something for you in exchange for all the help you already have given me.