Categories
Gutenberg

Gutenberg, an Iceberg of Prominent Web Content

When I was in junior hight school — about 2002-ish back then — I saw an old typewriter still be used by school’s administration staffs. The typeface was very unique, which had only single type of font and couldn’t be replaced by any. Attaching an image was very limited, even impossible to do. Creative man always got some ways to tackle this problem. He used to leave some spaces and sticked a cut of image taken from other source, like newspaper or physical photo print out. I event didn’t know how tabular data could be inserted.

For the time being, computer were introduced to use in the office. Ms Office program were very popular at that time. This words processor program could produce richer content with multiple variations that visually appealing. At that time, WordArt took my interest. Were you too? 🙂 It was often be used for title of any kind of text. Table and other graphical data — for instance a chart — also can be easily inserted with MS Office. More rich the content, will be more interesting the document will be.

Nowadays, not just desktop application can be used to compose attractive document. Since web programming languages have being developed — become more advanced and advanced from day to day — many online web application can do so as well. Google Docs is one example of them. It really benefits us since our communication working culture mostly be done on the web. It offers flexibility of publication sharing and collaborating with others across continents.

As content creation evolves, web editor does as well. Few years ago, the resonance of Gutenberg heard. What is Gutenberg?

The Gutenberg editor uses blocks to create all types of content, replacing a half-dozen inconsistent ways of customizing WordPress, bringing it in line with modern coding standards, and aligning with open web initiatives. These content blocks transform how users, developers, and hosts interact with WordPress to make building rich web content easier and more intuitive, democratizing publishing — and work — for everyone, regardless of technical ability.
Source

 

Gutenberg is just like an iceberg. The long process and history behind the beauty of mountainous of ice above the sea level will grasp geologists attention. Geologists will discover from the most top to the most bottom of ice sediment, and also its influence to the environment. However there are just some who do so. Common people a.k.a tourists will only enjoy its beauty — no matter whats behind it will be set aside — and will make our eyes orgasm.

Gutenberg means a (visually light) tool for building rich web content without coding knowledge required. The magnificent ice of complexity under the water won’t be seen. Only developers will take effort — dive deeper — to prop the piece of peak appearance that regular users can see.

In the past, building interactive block of content consumes much time to discover and develop. But now they’re just available in a few of clicks with little expense — some of them are 100% free. Imagine that the beauty of web content door is opened widely for all.

As noted above Gutenberg will be the future of web content publishing as promised by the WordPress community.

Starting from now I’ll be exploring Gutenberg deeply and will be writing my findings here in the next posts.

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
Maiyah

Kumpulan Tweet #18TahunKC

Sudah lama ingin hadir di Kenduri Cinta secara langsung. Namun belum juga dapat waktu yang pas karena kesibukan kerja. Saya perlu waktu luang setidaknya 2 hari untuk melingkar di Kenduri Cinta, karena lokasi acara yang jauh di Taman Ismail Marzuki Jakarta. Menurut data Google Map, jaraknya 483,3km dari Demak, kota di mana saya tinggal saat ini.

Beruntung ada akun Twitter yang sudah lama tidak aktif bisa saya manfaatkan untuk menyimak live tweet jamaah yang hadir di lokasi. Boleh di bilang jamaah KC paling aktif ngetweet — melaporkan secara realtime — apa yang mereka simak selama acara belangsung. Saya merasakan timeline begitu meriah waktu itu. Mungkin karena di edisi 8 Juni 2018 kemaren bertepatan dengan hari jadi KC yang ke 18. Selamat! Jejak digital riuh kegembiraan tersebut dapat dilihat kembali pada tagar #18TahunKC di Twitter.

Perseberan informasi tentu ada juga di media sosial lainnya seperti Instagram dan Facebook, namun saya lebih nyaman ndlongopi timeline di Twitter. Kumpulan tweet disimpan di sini supaya mudah ditemukan apabila ingin membacanya lagi di kemudian hari.

https://twitter.com/isman_fmj/status/1005138172605448192

https://twitter.com/Sita_Eliyas/status/1005134469538254848

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