Wednesday, 7 December 2016

Shortcode output appearing on top of content in WordPress

The problem is actually very simple. The function executed by shortcode should return the output instead of echoing it.
Example of a shortcode using echo to display output:

function bad_shortcode_function($atts, $content = null) {
    echo '<p>This is the output of shortcode</p>';
}
add_shortcode('bad-shortcode', 'bad_shortcode_function');

The correct way to use shortcodes is to use return. Like this:
function good_shortcode_function($atts, $content = null) {
    $string = '<p>This is the output of shortcode</p>';
    return $string;
}
add_shortcode('good-shortcode', 'good_shortcode_function');  

To view more Visit: https://sabza.org/shortcode-output-appearing-top-post-content-wordpress/

Thursday, 24 November 2016

Solved: 404-page not found error in windows hosting

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="index.php" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Wednesday, 19 October 2016

Set today and tomorrow date in jQuery datepicker

In the change function of the first datepicker, create a date object, set the date one day forward, and set the date of the second datepicker to that date. You can use minDate to make sure any date earlier than the set date can not be picked.
$(function () {
    $("#arrival").datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 1,
        yearRange: ":2016",
        minDate: "dateToday",
        onClose: function (selectedDate) {
            var myDate = $(this).datepicker('getDate'); 
                myDate.setDate(myDate.getDate()+1); 
            $('#departure').datepicker('setDate', myDate);
        }
    });

    $("#departure").datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 2,
        yearRange: ":2016",
    });

    $("#arrival").datepicker("setDate", "0");
    $("#departure").datepicker("setDate", "1");
});
See on Fiddle

Friday, 14 October 2016

Redirect automatically after short delay on Error 404 page in wordpress

You should use a client side redirection method to apply the proper delay. 
If you want to support browsers with disabled JavaScript, just paste a META refresh into a 
noscript element. It is better to place it inside a noscript element because search engines 
give a penalty for usual META refresh links.

If the redirect is permanent, I suggest you to use the canonical tag too to keep 
the link-juice of missing pages.

Use Below code on 404.php of your current theme


<link rel="canonical" href="https://example.com/"/>
<noscript>
    <meta http-equiv="refresh" content="5;URL=https://example.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://example.com/";
    var delay = "5000";
    window.onload = function ()
    {
        setTimeout(GoToURL, delay);
    }
    function GoToURL()
    {
        if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
        {
            var referLink = document.createElement("a");
            referLink.href = url;
            document.body.appendChild(referLink);
            referLink.click();
        }
        else { window.location.replace(url); } // All other browsers
    }
</script>

Thursday, 22 September 2016

Change bootstrap active tab using jquery

1. Paste this html code
<div id="click-me-div">Click Me</div>

 <ul class="nav nav-tabs">
    <li class="active"><a href="#fruits" data-toggle="tab">I like Fruits</a></li>
    <li><a href="#veggies" data-toggle="tab">I like Veggies Too</a></li>
    <li><a href="#samosas" data-toggle="tab">But Samosa's Rock</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="fruits">Apple, Kiwi, Watermellon</div>
    <div class="tab-pane" id="veggies">Kale, Spinach, Pepper</div>
    <div class="tab-pane" id="samosas">Awesome, Spine Tingling, Explosive</div>
</div>

2. Add below jquery
<script type="text/javascript">
$(document).ready(function() {
    $("#click-me-div").click(function() {
        alert('yes, the click actually happened');
        $('.nav-tabs a[href="#samosas"]').tab('show');
    });
});
</script>

Live Demo

Sunday, 11 September 2016

Remove Script & Stylesheet Versions in Wordpress

put below code in your themes function.php

add_filter( 'script_loader_src', 'remove_version' );
add_filter( 'style_loader_src', 'remove_version' );
function remove_version ( $src ) {
  global $wp_version;
  $version_str = '?ver='.$wp_version;
  $version_str_offset = strlen( $src ) - strlen( $version_str );
  if( substr( $src, $version_str_offset ) == $version_str )
    return substr( $src, 0, $version_str_offset );
  else
    return $src;
}

Saturday, 27 August 2016

Change the height of the Revolution Slider in wordpress

Please add this code in Customize -> Custom -> CSS:

.rev_slider_wrapper, .rev_slider, .tp-fullwidth-forcer, .rev_slider .tp-bgimg.defaultimg {
    max-height: 400px !important;

}

Hope it helps.