How to add custom post in WordPress

Hi Kids,

If you want to add custom post in wordpress, aside from the default POST and PAGE type posts.
all you have to do is add this piece of code in your functions.php

You have to change the “custompost “variable though.

register_post_type(
 'custompost',
 array(
  'labels' => array(
  'name' => __( 'Custom Post' ),
  'singular_name' => __( 'Custom Post' ),
  ),
  'description' => __('Custom Post'),
  'public' => true,
  'register_meta_box_cb' => 'custompost_meta_boxes',
  'show_ui' => true,
  'supports' => array(
   'title',
   'editor',
   'author',
   'excerpts',
   'custom-fields',
   'revisions',
   'thumbnail'
  )
 )
);

register_taxonomy_for_object_type('category', 'custompost');
register_taxonomy_for_object_type('post-tag', 'custompost');

function custompost_meta_boxes() {
 //add_meta_box( 'testpost_meta', __('TEST POST'), 'testpost_meta_box', 'testposts','normal', 'high' );
}

Alrigh kids,

Ciao!!!

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Injecting String within a String in Javascript (substring)

Hi Kids,

This is how to insert String within a String using Javascript’s Substring.

    $(".footer-icons > .icon-item > a").mouseover(function(e){          
          var currentSrc = $(this).find("img").attr("src");
          var newSrc = currentSrc.substring(0,currentSrc.lastIndexOf('.'));
          newSrc += "-green.jpg";
          $(this).find("img").attr("src",newSrc);            
    });
    $(".footer-icons > .icon-item > a").mouseout(function(e){          
          var currentSrc = $(this).find("img").attr("src");
          var newSrc = currentSrc.substring(0,currentSrc.lastIndexOf('.')-6);
          newSrc += ".jpg";
          $(this).find("img").attr("src",newSrc);            
    });

Drop a comment for your questions Kids.

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Common Techniques for aligning DIVs horizontally

1. Floating

     <div class="floatleft">LEFT</div>
     <div class="floatright">RIGHT</div>
     <div class="clearboth"></div>
    .floatleft{ float:left; }
    .floatright{ float:right; }
    .clearboth{ clear:both; }

2. Inline-Block

     <div class="item">LEFT</div>
     <div class="item">RIGHT</div>
    .item{ display:inline-block; }

3. Using Bootstrap

     <div class="row">
         <div class="md-col-6">Left</div>
         <div class="md-col-6">Right</div>
     </div>

4. Foundation

     <div class="row">
         <div class="medium-6 columns">Left</div>
         <div class="medium-6 columns">Right</div>
     </div>

5. Using Display:Tables

     <div style="display:table-row">
         <div style="display:table-cell">Left</div>
         <div style="display:table-cell">Right</div>
     </div>

If you know other techniques let the kids know.

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Common responsive CSS @media dimensions

common @media dimension for responsive website layout

@media only screen and (min-width: 100px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 320px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 480px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 768px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 960px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
@media only screen and (min-width: 1024px ){
        .header{
        }
        .content{
        }
        .footer{
        }
}
It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Attaching Animation to CSS

I’m not sure if you kids can imagine the output of this css.
But you can drop me a question in the comments below.

to make it simple. its
1. set the attribute.
2. set the transition.
3. set the final attributes.

then you can make jquery or angularjs to the magic for this.

.fadeinfromtop{
    opacity: 0;

    -moz-transition: all 2s ease-out;
    -webkit-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;

    -ms-transform: translate(0px, -100px); / IE 9 /
    -webkit-transform: translate(0px, -100px); / Safari /
    transform: translate(0px, -100px);
}
.fadeinfromtop.in-view{
    opacity: 1;

    -ms-transform: translate(0px, 0px); / IE 9 /
    -webkit-transform: translate(0px, 0px); / Safari /
    transform: translate(0px, 0px);
}

Ciao Kids!

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Foundation 6 vs Bootstrap 4

Zurb’s Foundation 6 fits best for Publisher Websites and Microsites while Twitter’s Bootstrap is best for Web Applications.

Now that I’m gearing towards Asp.Net Core, If you’re going to ask what will be my choice,its a no brainer Kids, it will be Bootstrap ofcouse.

But don’t get me wrong, Foundation 6 is also a nice alternative especially for FrontEnd side, I’m talking about Customer Side Front End and not an Admin Panel Front End.

anyways. Ciao!

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

jQuery Window Scrolling and Css Transform Animation

Here we go, our first tutorial of the year since I my rock n’roll days.

Glad to be back on track.
alright Kids, our first tutorial is using Jquery and Css to animate the size of a DIV on window scrolling.

Step 1: Your Javascript / JQuery snippet

    var $animation_elements = [$('.front-header-div-holder')];
    var $window = $(window);

    $window.on('scroll', check_if_in_view);
    $window.on('scroll resize', check_if_in_view);

    $window.trigger('scroll');

    function scaler(element,i){            
          i = (i/100)+1;          
          $(element).css("-ms-transform", "scale(" + i +")");
          $(element).css("-webkit-transform", "scale(" + i +")");
          $(element).css("transform", "scale(" + i +")");      
    }

    function fader(element,i){  
          i = ((i/100) * -1) +1;                    
          $(element).css("opacity",i);          
    }
    function check_if_in_view() {
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);

      $.each($animation_elements, function() {
           
            if($(this).attr("class")!=undefined){
                 
                  var $element = $(this);
               
                  var element_height = $element.outerHeight();
                  var element_top_position = $element.offset().top;
                  var element_bottom_position = (element_top_position + element_height);

                  //check to see if this current container is within viewport

                  var h = 0;
                  var ename = $(this).attr('class');
                  if(ename == "front-header-div-holder"){
                        h = element_height;
                  }else{                    
                        h = element_height;  
                  }

                  if ((element_bottom_position >= (window_top_position + (h))) && (element_top_position <= (window_bottom_position-(h/2)))) {                        
                        var ename = $(this).attr('class');                        
                        if(ename == "front-header-div-holder"){
                              ename = ename.slice(0, -7);
                              scaler($("." + ename),window_top_position);
                              fader($(".front-header-title"),window_top_position);
                        }
                  } else {                      
                        var ename = $(this).attr('class');                  
                        if(ename == "front-header-div-holder"){
                              ename = ename.slice(0, -7);
                              scaler($("." + ename),window_top_position);
                              fader($(".front-header-title"),window_top_position);
                        }                                              
                  }

            }

           
      });
    }

Step 2: Your HTML

<div class="front-header-div-holder">
     <div class="front-header-div">
          <div class="front-header">
              <!-- your load of BS here -->
          </div>
      </div>
</div>

Step 3: Your CSS
Code as you please.

Drop me a question if you have one. Ciao!

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Welcome to Book 4 of J.B Chronicles

This is the official opening of the Book 4 of J.B Chronicles, where J.B narrows everything down to just Coding Business Solutions and a little bit of Instagram Cycling and Disgusting Images.

J.B lost all contents and has to start from scratch.

The Book will cover mostly J.B’s Asp.net Core Integration with a bit of
Xamarin, Android’s┬áJava and iOS’s Swift.

You may ride eternal, shiny and chrome!!!

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn