Categories
Sydney

Add a Search Form to the Main Menu

This short tutorial will tell you how to add a search form to your Sydney site — and put it to the main menu.

Add this PHP code to child theme’s functions or use a functionality plugin like Code Snippets:

/*
 * Add a search form to menu navigation
 */
add_filter('wp_nav_menu_items', 'sydney_child_add_serch_from_to_nav', 10, 2);
function sydney_child_add_serch_from_to_nav($items, $args){

  if ($args->theme_location == 'primary') {
      $items .= '<li class="top-search-menu">'.get_search_form(false).'</li>';
  }
  return $items;

}

 

Then add this CSS code Additional CSS under theme customizer (Appearance > Customize) or use child theme’s stylesheets:

.top-search-menu .search-submit{
  display: none;
}

.top-search-menu label{
  position: relative;
}

.top-search-menu label:before{
  font-family: FontAwesome;
  content: '\f002';
  display: inline-block;
  display: block;
  width: 26px;
  height: 26px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 5px;
}

.top-search-menu .search-field{
  height: 26px;
  padding: 3px 5px 3px 23px;
  font-weight: normal;
}

.top-search-menu label:before{
 color: #fff;
}

.top-search-menu.input-expanded label:before{
 color: #333;
}

.top-search-menu input{
  opacity: 0;
  width: 0;
}

.top-search-menu.input-expanded input{
  opacity: 1;
  width: 140px;
}

 

Add the below jQuery code with TC Custom JavaScript plugin:

(function($){

    "use strict";

    var $searchArea = $('.top-search-menu');

    $searchArea.click(function(){
      $(this).addClass('input-expanded');
    });

    $(document).mouseup(function (e){

        var container = $(".top-search-menu");

        if (!$searchArea.is(e.target) && $searchArea.has(e.target).length === 0){
          $searchArea.removeClass('input-expanded');
        }

    });

})(jQuery);

 

Categories
Sydney

Add Phone Number to Header Area

Want to add a phone number to header area of your Sydney website? You can follow this simple steps:

Create a new Custom Links menu item to your current active menu in Appearance > Menus; enter your phone number to the Navigation Label box; to make it dial-able, enter tel:{phone number} to URL box.

Add this jQuery code with TC Custom JavaScript plugin.

;(function($) {

   'use strict'

   if( $('.phone-menu').length ) { 
   
    var phone = $('.phone-menu').html();

    $('.site-header .col-md-8').prepend('<div class="call-us">'+phone+'</div>');

  }

})(jQuery);

 

Then add this CSS code to Additional CSS of your site (Appearance > Customize).

.menu .phone-menu {
  display: none;
}

.call-us {
  text-align: right;
  font-size: 30px;
  font-weight: bold;
  padding-right: 10px;
}

.call-us a {
  color: #ff0000; 
}  

.call-us a:hover {
  color: #fff000; 
}  

@media only screen and (min-width:768px) and (max-width:1024px) {
  
  .call-us {
    margin-right: -10px;
  }
  
}

@media only screen and (max-width:767px) {
  
  .call-us {
    text-align: center;
  }
  
}

 

Categories
Sydney

Display Social Profile Icons on the Main Menu

Install and activate the Menu Icons plugin.

Add new menu items to your main menu from Appearance > Menus. In the menu administration you’ll have a Menu Icons Settings to enable icon type.

Use Custom Links menu; enter your social profile URL to URL field. Type any label as desired to Navigation Label box. Then choose related icon.

To remove the default menu label, apply the following CSS code to going to Customize > Additional CSS:

.menu-item  i._mi + span{
    display: none;
}

The default size given by the plugin’s style is too small. You may want it a bit larger. To enlarge it, add this CSS code:

.menu-item  i._mi{
    font-size: 30px;
}
Categories
Sydney Pro

4 Fresh Sydney Pro Demos

Click on the image to see the live demo

Tasty

Yoga

Finance

Band

These 4 new demos are child themes for Sydney Pro. Replicating the demo can be done easily with a single under Appearance menu.

aThemes is offering 10% off to celebrate this new designs launch which is only valid for next 48 hours. Purchase now and use SYDNEY10 voucher code at checkout to get this special price.

Categories
Sydney

Display Logo + Site Title + Description on Sydney Theme

Add this PHP code to child theme’s functions or use a functionality plugin like Code Snippets:

/**
  * Get site title and tagline
 */
add_action( 'wp_enqueue_scripts', 'sydney_child_site_info', 9999 );
function sydney_child_site_info() {

  $site_info = array(
    'name'        => get_bloginfo('name'),
    'description' => get_bloginfo('description')
  );

  wp_localize_script( 'sydney-scripts', 'site_info', $site_info );

}

 

Add the below jQuery code with TC Custom JavaScript plugin:

(function($){

  $('.site-header .col-md-4').append('<h1 class="site-title">'+site_info.name+'</h1><h2 class="site-description">'+site_info.description+'</h2>');

})(jQuery);

 

Then add this CSS code Additional CSS under theme customizer (Appearance > Customize) or use child theme’s stylesheets:

.site-header .col-md-4 > a {
  float: left;
}

.site-header .site-title,
.site-header .site-description {
  color: #fff;
}