Categories
Web Development

PayPal WooCommerce return URL

Under Website Selling Preferences turn on Auto Return and the url for WooCommerce should be:

https://yourdomain.com/checkout/order-received/?utm_nooverride=1

 

Categories
Web Development

WordPress: Additional Admin Columns with ACF

In functions.php, add the following and change [post_type] for the post type of the table you want to alter.

If you have used ACF,  you can find the post type in the ur e.g.

  • /wp-admin/edit.php?post_type=jobs
// Add the custom columns to the [post_type] post type:
add_filter( 'manage_[post_type]_posts_columns', 'set_custom_edit_[post_type]_columns' );
function set_custom_edit_[post_type]_columns($columns) {
    unset( $columns['author'] );
    $columns['yourFieldKey'] = __( 'yourFieldName', 'your_text_domain' );

    return $columns;
}

// Add the data to the custom columns for the [post_type] post type:
add_action( 'manage_[post_type]_posts_custom_column' , 'custom_[post_type]_column', 10, 2 );
function custom_[post_type]_column( $column, $post_id ) {
    switch ( $column ) {

        case 'yourFieldKey' :
            // Job Store
            if ( 'yourFieldKey' === $column ) {
                $data = get_field('yourFieldKey', $post_id);

                if ( ! $data ) {
                    _e( 'N/A' );
                } else {
                    echo $data->post_title;
                }
            }

        break;
    }
}

// Make Title Clickable
add_filter( 'manage_edit-[post_type]_sortable_columns', '[post_type]_sortable_columns');
function [post_type]_sortable_columns( $columns ) {
    $columns['yourFieldKey'] = 'yourFieldKey';
    return $columns;
}

// Make data sortable
add_action( 'pre_get_posts', 'posts_orderby' );
function posts_orderby( $query ) {
    if( ! is_admin() || ! $query->is_main_query() ) {
        return;
    }

    if ( 'yourFieldKey' === $query->get( 'orderby') ) {
        $query->set( 'orderby', 'meta_value' );
        $query->set( 'meta_key', 'yourFieldKey' );
    }
}

 

Categories
Web Development

Custom posts per page on Archive and Search in WordPress

Add the following to Functions.php in your theme or child-theme amd alter the posts_per_page argument value.

/**
 * Control the number of search results
 */
function custom_posts_per_page( $query ) {
    if ( $query->is_archive() || $query->is_search() ) {
        set_query_var('posts_per_page', 12);
    }
}
add_action( 'pre_get_posts', 'custom_posts_per_page' );

 

Categories
Web Development

Loop and Print Page Children Content in WordPress

This is ideal for when you need to loop through pages to create a list or grid of page content.  Wordpress makes this pretty simple for posts, but it’s not so easy for pages.

In this case I am trying to generate a list of all children of the “Ambassadors” page and create clickable links.

Set up the WP Query

<?php
    // Set up the objects needed
    $my_wp_query = new WP_Query();
    $all_wp_pages = $my_wp_query->query(array('post_type' => 'page', 'orderby' => 'menu_order title'));

    // Get the page as an Object
    $ambassadorPage =  get_page_by_title('Ambassadors');

    // Filter through all pages and find Portfolio's children
    $ambassadorPageChildren = get_page_children( $ambassadorPage->ID, $all_wp_pages );
    $childIds = array();
    // Get the IDs so you can loop through a page as normal
    foreach ($ambassadorPageChildren as $childData) {
        $childIds[] = $childData->ID;

    }
    ?>

Loop through the content

<?php // By using a foreach you can use normal printout fields like the_title() etc.
        foreach ($childIds as $childId) { ?>
            <?php $pageloop = new WP_Query("page_id=" . (int) $childId); ?>
                <?php while ( $pageloop->have_posts() ) : $pageloop->the_post(); ?>
                    <div class="small-12 medium-6 large-3 columns">
                        <article id="post-<?php the_ID(); ?>">
                            <a href="<?= get_the_permalink(); ?>"><img src="<?php echo the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>"></a>
                            <header>
                                <p>Ambassador</p>
                                <h2 class="entry-title"><?php the_title(); ?></h2>
                                <h3><?php echo the_field('ambassador_specialism'); ?></h3>
                            </header>
                            <div>
                                <footer>
                                    <p><a href="<?= get_the_permalink(); ?>">Read More</a></p>
                                </footer>
                        </article>
                    </div>
                <?php endwhile;?>
            <?php wp_reset_postdata(); ?>
        <?php } ?>

 

Categories
Web Development

Releasing Content over Time / Drip Campaign with WordPress

Using the Date Registered field in WordPress you can create a page that releases content over time. In this example we are creating a Drip Campaign for content released in a specific category.

In this example I have set up a category called “Campaigns” and within it I have added subcategories called Week 1, Week 2, Week 3 etc. The goal is that every week a new section will be released, so if the user registered, week 1 is available instantly, then 1 week later week 2 becomes available and so on.

$dateRegistered = strtotime($current_user->user_registered);
$now = date('Y-m-d H:i:s', strtotime('now'));
$categoryId = 99;

$catArgs = array('taxonomy' => 'category', 'parent' => $categoryId, 'hide_empty' => false);
$categories = get_terms($catArgs);
$dripIncrement = 7;
$startNumber = 0;
$counter = 0;
$number = 0;
$weeks = array();

foreach ($categories as $category) {

    if ($counter != 0) {
        $number = $number + $dripIncrement;
    }
    $weeks[$category->term_id] = date('Y-m-d H:i:s', strtotime('+' . $number . ' day', $dateRegistered));
    $counter++;
}

$listStyle = '';
foreach ($weeks as $weekId => $releaseDate) {

    // If is enabled
    if ($now >= $releaseDate) {
        $listStyle .= '
            li.cat-item.cat-item-'. $weekId .',
            li.cat-item.cat-item-'. $weekId .' a
             {
                color: green;
            }
        ';
    } else {
        $listStyle .= '
            li.cat-item.cat-item-'. $weekId .',
            li.cat-item.cat-item-'. $weekId .' a {
                color: red;
                pointer-events: none;
                cursor: default;
            }
        ';
    }
}

The above create a loop for for the subcategories in my Category Id, and using an increment of 7 days it will add one type of css if the registered date is within range and another if it is not. We then take the following and add it before the tag.

<style type="text/css">
    <?= $listStyle ?>
</style>

Finally, we use the WordPress list categories function to print a list of all the subcategories, the $args variable allows to tweak things like printing a title, printing if the subcategory has no content, etc.

<?php
    // List subcategories of Campaign
    $args = array(
        'child_of'            => $categoryId, // 10 Week Plan ID
        'title_li'            => false, // Hide Title
        'hide_empty'          => false
    );
?>

<?php wp_list_categories($args) ?>
Categories
Web Development

Integrating Zurb Foundation with Sass into WordPress

1. Installing WordPress locally with a Child Theme.

The first step is to install WordPress locally and setup a child theme. For more information on how to install and setup WordPress check out This Post. Both the style.css and functions.php files should look like the following:

style.css

/*
 Theme Name: Twenty Sixteen Child
 Author: Mammoth
 Author URI: http://www.elegantthemes.com
 Template: twentysixteen
 Version: 1.0.0
*/

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
 //wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

As you can see in functions.php the get parent-style has been commented out as we don’t want to inherit any styling.

2. Copy over the ZURB template into WordPress.

Copy all of the root files and drop them into the themes folder. This may take a while dependant on how large the ZURB build is. Once copied the next stage is to move over the dist folder into the child theme you created in step 1, during this stage you can rename the folder to whatever you like in our example we we renamed the dist folder to zurb as you can see in the screenshot below:

screen-shot-2016-09-21-at-15-39-28

To ensure ZURB compiles the project we need to edit the config.yml dist path. In this case we have changed the dist path to the following:

# Gulp will reference these paths when it copies files
PATHS:
 # Path to dist folder
 dist: "twentysixteenchild/zurb"

Now if you run foundation watch within the themes root folder you will see the the project compile.

3. Getting WordPress to load our Zurb files.

The first file we would like to load is our app.css file. To do this navigate to header.php within your child theme and add the following link:

<link rel='stylesheet' href="/wp-content/themes/twentysixteenchild/zurb/assets/css/app.css">

Carry out this process for both your .js files and img files. Now if you open the link for you WordPress build your zurb project should be loaded.

4. Additional Thoughts

Once the process is complete the editing of the design can be carried out by editing the src files located in the root of your themes folder, this would then require you to copy across any html changes within the dist folder to the corresponding .php files.

In addition if you would like to compile just the .css .js and img files and not compile pages or html files, navigate to the gulpfile.babel.js and remove pages from the following:

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
 gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));

In addition to this deletion you also need to comment out the following located at the bottom of the gulpfile.babel.js:

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
 gulp.watch(PATHS.assets, copy);
 //gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
 //gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
}
Categories
Web Development

WordPress: Multiple layouts in single.php, depending on post category

This snippet allows you to server different views depending on post category.

if($wp_query->query['category_name'] == 'categoryname1') {
	include_once( 'template1.php' );
} else if($wp_query->query['category_name'] == 'categoryname2') {
	include_once( 'template2.php' );
} else {
	include_once( 'template3.php' );
}

 

Categories
Web Development

Setting up WordPress

  1. Download and install WordPress
  1. Transfer the WordPress files to your local host
  • Open MAMP and turn on the servers
  • Go to Applications/MAMP/htdocs
  • Create a new folder called ‘My WordPress’ and transfer the downloaded files into this folder
  1. Create database
  • In your browser, go to localhost/phpMyAdmin
  • Open the ‘database’ tab and create a new database.

  1. New User
  • Still in PhpMyAdmin open the database you just created

Make sure you have selected the correct database as this

  • Open the ‘privileges’ tab
  • Click ‘add user’ and enter your information
  • Make sure ‘localhost’ is selected in the host dropdown box
  • Once information is inputted click ‘go’
  1. Accessing wordpress
  • In your browser search for ‘example.ld’
  • And then follow the instructions to install WordPress
Categories
Web Development

Correct WordPress Folder & File Permissions

In terminal, use the following code to set the file and folder permissions:

chown www-data:www-data -R *          # Let apache be owner
find . -type d -exec chmod 755 {} \;  # Change directory permissions rwxr-xr-x
find . -type f -exec chmod 644 {} \;  # Change file permissions rw-r--r--

source: http://stackoverflow.com/questions/18352682/correct-file-permissions-for-wordpress