Categories
Sydney

Enable Mute/Unmute Button on Video Header of Sydney Theme

Install and activate the TC Custom JavaScript plugin; Then go to Appearance > Custom JavaScript; and apply this JS code:
(function($){

    "use strict";

    $(window).on('load', function () {

      var isMobile = {
          Android: function() {
              return navigator.userAgent.match(/Android/i);
          },
          BlackBerry: function() {
              return navigator.userAgent.match(/BlackBerry/i);
          },
          iOS: function() {
              return navigator.userAgent.match(/iPhone|iPad|iPod/i);
          },
          Opera: function() {
              return navigator.userAgent.match(/Opera Mini/i);
          },
          Windows: function() {
              return navigator.userAgent.match(/IEMobile/i);
          },
          any: function() {
              return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
          }
      };

      var vidContainer = $('#wp-custom-header');
      var video = $('#wp-custom-header').children('video');
      if( vidContainer.length && video.length ) {

          // Enable video sound
          $('.wp-custom-header video').prop('muted', false);

          var muteButton = document.createElement('button');
          muteButton.setAttribute( 'type', 'button' );
          muteButton.setAttribute( 'id', 'mute-button' );
          muteButton.innerHTML = '';

          document.getElementById("wp-custom-header").appendChild(muteButton);

          $('#mute-button').addClass('wp-custom-header-video-button');

          var muted = false;
          muteButton.addEventListener("click", function() {
            if (muted == false) {

              // Mute the video
              $('.wp-custom-header video').prop('muted', true);
              $('#mute-button').addClass('muted');

              muted = true;

            } else {

              // Unmute the video
              $('.wp-custom-header video').prop('muted', false);
              $('#mute-button').removeClass('muted');

              muted = false;

            }
          });

          if( isMobile.iOS() == true ) {
              $('#mute-button').css('opacity', '0');
          }

      }

    });

})(jQuery);
Add this CSS code to Appearance > Customize > Additional CSS:
.wp-custom-header #wp-custom-header-video-button {
  margin-left: -27px;
}

.wp-custom-header #mute-button {
  margin-left: 27px;
}

.wp-custom-header #mute-button.muted .fa:before {
  content: "\f026";
}
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

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;
}