jQuery(document).ready(function($){
$(".home container a").prop("href", "http://google.com/");
});

So all you need to do is target <a> element within container and this should do the trick.

Post How to change href value using jQuery je prvi puta viđen na bbird.me.

jQuery(document).ready(function($){
var windowWidth = $(window).width();

$(window).resize(function() {
    if(windowWidth != $(window).width()){
    location.reload();
    return;
    }
});
});

Post Reloading the website on resolution change je prvi puta viđen na bbird.me.

For any advanced change of order, jQuery is a way to go. Specifically, the insertAfter() method. Let me give you a working example:

jQuery(document).ready(function($){

if ($(window).width() < 781) {
   $("#pgc-7-0-0").insertAfter("#pgc-7-0-1");
   $("#pgc-7-1-0").insertAfter("#pgc-7-0-0");
   $("#pgc-7-0-2").insertAfter("#pgc-7-1-0");
}
else {
   //do nothing
}
});

This comes from one of the WordPress websites I’ve worked on – the request was to stack elements differently when on mobile layout (the theme was coded to go into mobile below 781px, hence the condition). Elements were not within the same container, but “scattered”all across the page.

Let’s examine the first line:

$("#pgc-7-0-0").insertAfter("#pgc-7-0-1");

The insertAfter() method is quite self-explanatory, so in this case the HTML element with #pgc-7-0-0 ID will appear after #pgc-7-0-1, regardless on the previous position within the page.

References:

• .insertAfter() method
• CSS display property

Post Changing order of HTML elements using jQuery je prvi puta viđen na bbird.me.

WordPress does have is_page conditional tag which comes handy in many situations, but if you want to include jQuery script on a particular page while using the proper wp_enqueue_script method at the same time, then you would only need to add is_page condition while enqueuing scripts in functions.php. So let’s have a look at the quick snippet which is only one of the ways on how to achieve this:

function bbird_under_test_scripts() {
    if ( is_page(15) ) {	        
        wp_enqueue_script( 'testscripts', get_stylesheet_directory_uri() . '/js/testscripts.js', array('jquery'));
}	
}
add_action( 'wp_enqueue_scripts', 'bbird_under_test_scripts' );

In this case, testscripts.js will work on the page whose ID is 15.

References:

• Function Reference/wp enqueue script
• Function Reference/is page

Post How to add jQuery (or JS…) script on specific WordPress page je prvi puta viđen na bbird.me.

Naturally, I turned to jQuery which offers endless possibilities when it comes to HTML and CSS manipulations. Since the main request was that glowing effect should be permanent, I was required to set a loop of effects which would enable me to achieve this. Naturally, fade in and fade out were the first things that came to my mind. Let’s have a look at the function I implemented into WordPress (hence jQuery(document).ready(function ($) syntax):

jQuery(document).ready(function ($) {
    var $element = $('.fading');

    function fadeInOut() {
        $element.fadeIn(1000, function () {
            $element.fadeOut(500, function () {
                $element.fadeIn(1000, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    }

    fadeInOut();
});

Furthermore, I had this idea to have one button on the front (it would also be a link), while I would also have an exact button behind it (naturally, I used z-index for this). The back button would actually have this glowing effect, while the front button would remain static, without any effect. So let’s have a look at HTML I used:

<div id="boxes">
    <a href="#" style="display:block;">
        <div class="box-button-main">
        </div>
    </a>

    <div class="fading"></div>
</div>

(As you can see, I didn’t bother with CSS classes very much – you’re free to do so. And since you asked – display: block was added to <a> as that turns <div> HTML element into link.)

And here comes the last part – CSS:

.fading {
    width:100px;
    height:100px;
    background-color:#dd3333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index:1;
    position: absolute;
    left:0px;
    -webkit-box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
    -moz-box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
    box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
}
#boxes {
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 100px;
    top:50px;
}
.box-button-main {
    width:100px;
    height:100px;
    background-color:#dd3333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index:99;
    position: absolute;
    left:0px;
}

You can see my idea within this code – as mentioned earlier, I have an exact button below the main one, but I added box-shadow style to it that would, when using fading effect, make our button glowing. And that’s all there is – you can easily use this function to implement your own ideas, especially if you need infinite fading effects.

I’ve also created a jsfiddle where you can see how this works (I hope no one deleted or modified the code on purpose) – check the link within the resources below.

Resources:

• jsfiddle working example

Post Glowing HTML button with jQuery je prvi puta viđen na bbird.me.

First of all, you will need to add “paged” parameter to your custom query:

$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

in order to create a custom loop, we will need to create an array of arguments:

$args = array (
	'post_type'              => 'post',
	'cat'                    => '53',
	'paged' => $paged,	
	'posts_per_page'         => '10'
);

Now let’s create a new instance of WP_Query class using our $args array:

$query = new WP_Query( $args );

Now we have everything we need for our custom loop to work. But before all, let’s see that little tweak that makes wp_pagenavi working – it is adding our $query into pagenavi function:

if(function_exists('wp_pagenavi'))
		{
			wp_pagenavi( array( 'query' => $query ) );
		}

And now it works perfectly and will not display same posts on every page.

So this is how the whole code would look like – you’re free to modify whatever appears within the loop:

<?php
	$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
	
$args = array (
	'post_type'              => 'post',
	'cat'                    => '53',
	'paged' => $paged,	
	'posts_per_page'         => '10',
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
	while ( $query->have_posts() ) {
		$query->the_post();
		get_template_part('parts/blogloop');
		
	}

	
	if(function_exists('wp_pagenavi'))
		{
			wp_pagenavi( array( 'query' => $query ) );
		}
		
	wp_reset_postdata();
		
} else {
	echo 'no posts here';
}
	 ?>

References:

• WP-PageNavi
• Class Reference/WP Query
• WP_Query Generator @ http://generatewp.com/
• Pagination

Post wp_pagenavi working with WP_Query je prvi puta viđen na bbird.me.