itzikbenh

/*
Create package.json and install all packages:

1. npm init
2. npm install -g gulp
3. npm install gulp gulp-babel babel-preset-es2015 gulp-concat gulp-csso gulp-rename gulp-sass gulp-uglify gulp-watch browser-sync --save-dev

Expected file structure:

./css/src/*.scss 

itzikbenh

//Just a random file for loading your posts to see that the infinite scroll works. 
<?php get_header(); ?>

<div class="col-md-6 col-md-offset-3">
	<div class="post-container">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
			<div class="page-header post">
				<h1><?php the_title(); ?></h1>
				<p><?php the_excerpt(); ?></p>
			</div>

itzikbenh

(function($) {
    //Handles the infinite-scroll part and adds new content to sessionStorage so we can return user to the same position
    //when he hits the back button
    $(window).scroll(function() {
        var url = $('.nav-links .next').attr('href');
        if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 150) {
            //To avoid repeating calls we set the paginate container to hold only text and we remove the links.
            //that way url variable would be empty, thus if statement would return false and not continure to the get call.
            $('.navigation').text("Fetching more posts..."); //You can optionally load an icon-loader or something.
            $(".loader").removeClass("hidden"); //Show the loader icon

itzikbenh

function theme_styles()
{
    wp_enqueue_style( 'boostrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' );
    wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/css/theme.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

function theme_js()
{

itzikbenh

<div class="posts-container">
    <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div>
            <?php
                //Here we group events by event_date and put the date at the top.
                $event_date =  get_post_meta( $post->ID, 'event_date', true );
                if ( $event_date != $date )
                {
                    $event_date_formatted = date( 'l, F jS, Y', strtotime( $event_date ) );
                    echo "<p class='page-header'><strong>$event_date_formatted</strong></p>";

itzikbenh

Before you go over the snippets I will summarize which functions are being used.

media_handle_upload('image', 0);

That's it! one function that would insert the image into the DB, create four copies with different sizes, and upload to the uploads directory. Regarding the arguments:

'image' is what holds all the data about the image. It comes from the POST request. In the JS file you will see what I mean.

'0' This is the $post_id. I set it to zero, because i'm not asigning this image to any post at the moment. In order for this function to work we need to add above it:

itzikbenh

<button class="delete-post" id="<?php echo $post->ID ?>" type="button" name="button">
	Delete Post
</button>

itzikbenh

<button class="ath-btn ath-btn-default">
    DEFAULT
</button>
<button class="ath-btn ath-btn-info">
    INFO
</button>
<button class="ath-btn ath-btn-primary">
    PRIMARY
</button>
<button class="ath-btn ath-btn-success">

itzikbenh

<?php

class Ath_DB
{
    protected static $table = null;

    function __construct()
    {
        global $wpdb;
        $this->db     = $wpdb;

itzikbenh

<?php

class Ath_DB
{
    protected static $table = null;

    function __construct()
    {
        global $wpdb;
        $this->db     = $wpdb;