So simple.
include('wp-load.php');
Or whatever the path is to where your WordPress core files live.
Then query away!
So, in it’s simplest page form, it would look something like:
include('wp-load.php');
get_header();
// display the site's title
$title = get_bloginfo('name');
echo '<h1>' . $title . '</h1>';
get_footer();
This will create a filter system with Isotope automatically with your Post and Categories, or a Custom Post Type and a Custom Taxonomy. You’ll just have to fill in YOUR_CUSTOM_POSTTYPE and YOUR_CUSTOM_TAX. This also assumes you have Isotope pulling in correctly.
First, Start the Query:
Finally the jQuery to control the filter:
Anchor with padding so your browser doesn’t cut off the content you’re anchoring to.
CSS:
a.anchor-person {
display: block;
position: relative;
top: -50px;
visibility: hidden;
}
The anchor:
<a class="anchor-person" id="<?php echo $sanitized; ?>"></a> // other stuff for your anchor
Sometimes pages or Custom Post Types use other methods of publishing content to the pages instead of just the content area of the WordPress WYSIWYG. This can be bad and confusing for clients when they see a poor or red rating because to achieve a rating, Yoast compares the content area with the title, url… So if the content is considered blank (by the plugin) it can never receive a good passing rating.
One simple solution without rewriting how a check is done, is to hide it with a function in your theme’s function.php file.
add_action('admin_head', 'remove_wp_seo_score_title');
function remove_wp_seo_score_title() {
echo '<style>
.misc-pub-section .wpseo-score-title {
display: none;
}
</style>';
}
Use the images loaded plugin with Isotope.
Register it like this in your js file:
var $container = $('#container').imagesLoaded( function() {
$container.isotope({
// options
itemSelector: '.item',
masonry: {
gutter: 15
}
});
});
<div id="sociallinks">
<ul>
<?php
// Get the fields
$facebook = get_field('facebook_link','option');
$twitter = get_field('twitter_link','option');
$youtube = get_field('youtube_link','option');
$instagram = get_field('instagram_link','option');
// Create the array
$facebookli = array('class'=>'facebook', 'link'=> $facebook, 'text'=>'Like us on Facebook');
$twitterli = array('class'=>'twitter', 'link'=> $twitter, 'text'=>'Follow us on Twitter');
$youtubeli = array('class'=>'youtube', 'link'=> $youtube, 'text'=>'Watch us on YouTube');
$instagramli = array('class'=>'instagram', 'link'=> $instagram, 'text'=>'Follow us on Instagram');
// If Field is not empty, add it to the array
$sociallinks = array();
if($facebook != '') {
$sociallinks[] = $facebookli;
}
if($twitter != '') {
$sociallinks[] = $twitterli;
}
if($youtube != '') {
$sociallinks[] = $youtubeli;
}
if($instagram != '') {
$sociallinks[] = $instagramli;
}
?>
<?php
// Run your loop to get the links
foreach($sociallinks as $social ) { ?>
<li class="<?php echo $social['class']; ?>">
<a href="<?php echo $social['link']; ?>"><?php echo $social['text']; ?></a>
</li>
<?php } ?>
</ul>
</div><!-- sociallinks -->
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
On hover, open up a hidden div and delay it’s closing.
$('#footerlinks ul li').hover(
function(){
$(this).next('li.footer-hidden').animate({ "max-width": "1000" }, 'fast');
// This only fires if the row is not undergoing an animation when you mouseover it
},
function() {
$(this).next('li.footer-hidden').delay(3000).animate({ "max-width": "0" }, 'fast');
});
Had posted a solution to this before but this one is far superior.
You can download at git hub here or get it from below.
Some html
<div class="blocks-container">
<div class="blocks item-0">
<h2>Lorem ipsum</h2>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
</div>
<div class="blocks item-1">
<h3>Lorem ipsum dolor</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
</div>
<div class="blocks item-2">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel. Nullam odio eros, sagittis vitae lectus id, pretium viverra lectus. Etiam auctor dolor non dui ultricies pulvinar.</p>
</div>
</div>
And add the call to the script in your custom js or whatever…
$('.blocks').matchHeight();
This will spit out a shortcode for Event Espresso for a Event List with multiple categories the user chooses.
// do we show events
$showevents = get_field('show_events');
// Show event list if "yes"
if($showevents == 'Yes') :
// put all values into a variable
$allcategories = implode(', ', get_field('categories'));
// echo out results
echo do_shortcode( '[EVENT_LIST event_category_id=' . $allcategories . ']');
endif;