Category: Sydney

Categories
Sydney

Adding Gutenberg Experience to Sydney Theme

Please note that this post is aimed for WordPress-development-savvy users. Do not implement it in your production site. Use this as an experimental purpose to test Sydney theme with Gutenberg editor.

Add a separate function file for Gutenberg in main functions:

/**
 * Gutenberg compatibility functions
 */
require get_template_directory() . '/inc/gutenberg.php';

 

Gutenberg-speficic functions (/inc/gutenberg.php) contains:

<?php
/**
 * Gutenberg functions
 *
 * @package Sydney
 */

function sydney_gutenberg_setup() {

  // Adding support for core block visual styles.
  add_theme_support( 'wp-block-styles' );

  // Add support for full and wide align images.
  add_theme_support( 'align-wide' );

}
add_action( 'after_setup_theme', 'sydney_gutenberg_setup' );

function sydney_gutenberg_scripts() {
  wp_enqueue_style('sydney-butenberg-style', get_template_directory_uri() . '/css/sydney-gutenberg.css');
}
add_action( 'wp_enqueue_scripts', 'sydney_gutenberg_scripts' );

/**
* Enqueue editor styles for Gutenberg
*/
function sydney_editor_styles() {
  $sydney_fonts_url = '';
  wp_enqueue_style( 'sydney-fonts', $sydney_fonts_url, array(), null );
  wp_enqueue_style( 'sydney-editor-style', get_template_directory_uri() . '/css/editor-style.css' );
}
add_action( 'enqueue_block_editor_assets', 'sydney_editor_styles' );

 

Styling for default blocks:

@import "gutenberg/content-area-container";
@import "gutenberg/block-heading";
@import "gutenberg/block-cover-image";
@import "gutenberg/block-dropcap";
@import "gutenberg/block-image";
@import "gutenberg/block-separator";
@import "gutenberg/block-quote";
@import "gutenberg/block-gallery";
@import "gutenberg/block-button";

 

Gutenberg editor styles:

.gutenberg {

  @import "theme-content-frontend";
  @import "sydney-gutenberg";

}

 

Files hierarchy looks like this:

 

Browse complete code

Categories
Sydney

Sydney 1.47 Switches to Elementor

Probably it had been a log wait until we really saw Elementor plugin could gain more user adoption compared to its competitor, SiteOrigin’s. Until now Elementor’s active installation reported on the .org statistics reached a million and more.

Active installations of Elementor

Page Builder by SiteOrigin also has 1+ million active installations, whereas it was born prior to Elementor. SiteOrigin’s install growth rate also appears to be declining — nearly touch 0%.

Install growth of Page Builder by SiteOrigin

Elementor seems going to be a bit better. Besides developer community looks likely more interested to Elementor instead. It’s indicated by growing number of developers who get involved.

Install growth of Elementor

Moreover users community of Elementor on its Facebook page gained ten times more than SiteOrigin’s as seen on the below screenshot. Left is Elementor’s. Right is SiteOrigin’s.

As data proved, in the mid of 2018, Sydney got major update on its code base. All sections in the home page which mostly contains dynamic widget — like Services, Employees and Projects — are altered with Elementor’s block system. It’s resulting that custom post types of Sydney Toolbox no longer needed.

Note that this update only aimed for new users. For existing sites running Sydney with Page Builder won’t loose any applied settings. You’ll still be able to run both page builders — in case you had a separate landing page composed with Elementor.

I found one weakness of this Elementor migration. That is export existing setup with Page Builder to block system of Elementor still undone. I wish there could be a single button in the Customizer or somewhere that might sync existing widget-based content made with Page Builder and instantly transferred to Elementor blocks.

Categories
Sydney

Display Random Projects in Sydney Portfolio Widget

Add this PHP code to child theme's functions or use a functionality plugin like Code Snippets: 
/**
 * Enable random order of projects displayed in the widget
 */
add_action('pre_get_posts', 'sydney_child_change_projects_order', 9999);
function sydney_child_change_projects_order($query) {

  if( !is_admin() && !is_search() && !is_archive() && is_main_query() && $query->query_vars['post_type'] =='projects' ) {
    $query->set('orderby', 'rand'); // Random order
  }

}

This snippet initially posted at Sydney support forum.

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

Disable Permalinks for Registered Custom Post Types of Sydney Toolbox

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

function sydney_child_modify_cpt( $args, $post_type ) {

  $custom_args = array();
  $custom_args['public']              = false;
  $custom_args['has_archive']         = false;
  $custom_args['publicaly_queryable'] = false;
  $custom_args['query_var']           = false;

  switch ($post_type) {
    case 'services':        // Services
    case 'employees':       // Employees
    case 'testimonials':    // Testimonials
    case 'clients':         // Clients
    case 'projects':        // Projects
      $args = array_merge( $args, $custom_args );
      break;
  }

  return $args;

}
add_filter( 'register_post_type_args', 'sydney_child_modify_cpt', 10, 2 );
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;
}