WP Beaches https://wpbeaches.com Websites on the Northern Beaches Wed, 22 May 2019 07:17:49 +0000 en-US hourly 1 https://wordpress.org/?v=5.2.1 https://wpbeaches.com/wp-content/uploads/2017/08/cropped-wpb-site-icon-90x90.png WP Beaches https://wpbeaches.com 32 32 Add Navigation Arrows in WooCommerce Product Gallery Slider https://wpbeaches.com/add-navigation-arrows-in-woocommerce-product-gallery-slider/ https://wpbeaches.com/add-navigation-arrows-in-woocommerce-product-gallery-slider/#respond Wed, 22 May 2019 07:17:49 +0000 https://wpbeaches.com/?p=15747 You can add Navigation Arrows in WooCommerce Product Gallery by adding a filter and then some CSS. WooCommerce uses a slider called Flexslider and it has a few more configurable options. In functions.php add add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' ); /** * Filer WooCommerce Flexslider options - Add Navigation Arrows */ function sf_update_woo_flexslider_options( $options ) { $options['directionNav']…

The post Add Navigation Arrows in WooCommerce Product Gallery Slider appeared first on WP Beaches.

]]>
You can add Navigation Arrows in WooCommerce Product Gallery by adding a filter and then some CSS. WooCommerce uses a slider called Flexslider and it has a few more configurable options.

In functions.php add

add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/** 
 * Filer WooCommerce Flexslider options - Add Navigation Arrows
 */
function sf_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

Then style in some CSS

ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}

a.flex-next::after {
	visibility:visible;content: '\f054';
	font-family: 'Font Awesome 5 Free';
	margin-right: 10px;
	font-size: 20px;   
	font-weight: bold;
}
a.flex-prev::before {
    visibility:visible;
    content: '\f053';
	font-family: 'Font Awesome 5 Free';   
	margin-left: 10px;
	font-size: 20px;
	font-weight: bold;
}
ul.flex-direction-nav li a {
	color: #ccc;
}
ul.flex-direction-nav li a:hover {
	text-decoration: none;
}

The flexslider has some more options you can manipulate…

'flexslider'  => apply_filters( 'woocommerce_single_product_carousel_options', array(
    'rtl'            => is_rtl(),
    'animation'      => 'slide',
    'smoothHeight'   => true,
    'directionNav'   => false,
    'controlNav'     => 'thumbnails',
    'slideshow'      => false,
    'animationSpeed' => 500,
    'animationLoop'  => false, // Breaks photoswipe pagination if true.
    'allowOneSlide'  => false,
)),

Ref & Ref

The post Add Navigation Arrows in WooCommerce Product Gallery Slider appeared first on WP Beaches.

]]>
https://wpbeaches.com/add-navigation-arrows-in-woocommerce-product-gallery-slider/feed/ 0
Add Search & Filter Pro with Ajax Reload to Beaver Builder Post Masonry Grid https://wpbeaches.com/add-search-filter-pro-with-ajax-reload-to-beaver-builder-post-masonry-grid/ https://wpbeaches.com/add-search-filter-pro-with-ajax-reload-to-beaver-builder-post-masonry-grid/#comments Fri, 17 May 2019 05:41:29 +0000 https://wpbeaches.com/?p=15726 You can use Search and Filter Pro with Beaver Builders Themer Post Module grid masonry layout with Ajax reload. This guide goes through the tweaks needed and uses a custom post type archive page with a Post Grid module that uses the main query with a masonry layout. Create your Posts Module CPT Archive Page…

The post Add Search & Filter Pro with Ajax Reload to Beaver Builder Post Masonry Grid appeared first on WP Beaches.

]]>
You can use Search and Filter Pro with Beaver Builders Themer Post Module grid masonry layout with Ajax reload.

This guide goes through the tweaks needed and uses a custom post type archive page with a Post Grid module that uses the main query with a masonry layout.

Create your Posts Module CPT Archive Page

search & filter Pro Shortcode

Posts Module Masonry

 

Masonry Ajax Main Query

Create your Posts Module layout on the main Post Archive page with Beaver Themer and add in your Search and Filter Pros shortcode. This could be done in 2 columns, a HTML module to house the Search & Filter Pro shortcode and a Post Content Grid Module to show all the posts.

Search & Filter Pro Settings

Masonry Ajax S&f Settings

Example uses ‘lights’ as a custom post type

 

Masonry Ajax S&f Display Results

Load results using Ajax

 

Adding the Javascript to Reload Masonry after Ajax

Next thing to do is load a javascript function that reloads the masonry layout after an S&F Pro filter has been applied to the posts, S&F provides a couple of callbacks at the start and end of the masonry Ajax reload.

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


	// detects the start of an ajax request being made
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){

		console.log("ajax start");
	});


		
	// detects the end of an ajax request being made
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){

		console.log("ajax finish");		
	});
		
});

So on the ajaxfinish callback we add in a javascript function to rebuild the masonry layout, refreshGridLayout(); – which is defined below in the script.

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


	// detects the start of an ajax request being made
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){

		console.log("ajax start");

	});


		
	// detects the end of an ajax request being made
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){

	
		console.log("ajax finish");
		refreshGridLayout();
		
	});



	/**
	 * Public method for refreshing Masonry within an element
	 *
	 * @since 1.8.1
	 * @method refreshGridLayout
	 */
	function refreshGridLayout() {
		
		var $element 		= $( '.fl-module-post-grid' ),
			msnryContent	= $element.find('.masonry'),
			postItem       = $element.find('.fl-post-grid-post');
		
		if ( msnryContent.length ) {
			$element.imagesLoaded(function () {
				msnryContent.masonry('reloadItems');
				msnryContent.masonry('layout');
				postItem.css('visibility', 'visible');
			});
		}
			
	}

});

One issue is the pagination will not work as intended as it does not get reloaded as it sits out of the main masonry grid – the best option here is to override the post-grid BB module and in the frontend.php file move the pagination mark up into the main post grid.

With that done the pagination also needs a bit of CSS work done.

View the code on Gist.

See how to do it without Ajax reload on a Custom Post Type archive here.

The post Add Search & Filter Pro with Ajax Reload to Beaver Builder Post Masonry Grid appeared first on WP Beaches.

]]>
https://wpbeaches.com/add-search-filter-pro-with-ajax-reload-to-beaver-builder-post-masonry-grid/feed/ 1
Temporarily Turn off Modsec filtering https://wpbeaches.com/temporarily-turn-off-modsec-filtering/ https://wpbeaches.com/temporarily-turn-off-modsec-filtering/#respond Mon, 13 May 2019 06:02:38 +0000 https://wpbeaches.com/?p=15713 You can temporarily turn off Modsec filtering by adding a code snippet rule to your .htacces file, this can be helpful if you are triggering a number of rules which are false positives or you are unable to get the rules whitelisted whilst you do your development. Add into .htaccess <IfModule mod_security.c> SecFilterEngine Off SecFilterScanPOST…

The post Temporarily Turn off Modsec filtering appeared first on WP Beaches.

]]>
You can temporarily turn off Modsec filtering by adding a code snippet rule to your .htacces file, this can be helpful if you are triggering a number of rules which are false positives or you are unable to get the rules whitelisted whilst you do your development.

Add into .htaccess

<IfModule mod_security.c>
	SecFilterEngine Off
	SecFilterScanPOST Off
</IfModule>

This should be removed once you have done what you need and the site is subject again to the modsec rules in place.

The post Temporarily Turn off Modsec filtering appeared first on WP Beaches.

]]>
https://wpbeaches.com/temporarily-turn-off-modsec-filtering/feed/ 0
Conditional Check if Custom Post Type Posts Are Published https://wpbeaches.com/conditional-check-if-custom-post-type-posts-are-published/ https://wpbeaches.com/conditional-check-if-custom-post-type-posts-are-published/#respond Sun, 07 Apr 2019 03:36:56 +0000 https://wpbeaches.com/?p=15614 You can check on the existence of published Custom Post Types by using a new WP_Query loop with an if/else statement, as the CPT is already registered it is difficult to use a conditional check without checking the loop of posts. add_filter('wp_nav_menu_primary-menu_items', 'wpb_add_menu_item', 10, 2); // Add to primary menu based on CPT existence function…

The post Conditional Check if Custom Post Type Posts Are Published appeared first on WP Beaches.

]]>
You can check on the existence of published Custom Post Types by using a new WP_Query loop with an if/else statement, as the CPT is already registered it is difficult to use a conditional check without checking the loop of posts.

add_filter('wp_nav_menu_primary-menu_items', 'wpb_add_menu_item', 10, 2);
// Add to primary menu based on CPT existence
function wpb_add_menu_item( $items, $args ) {
    global $post;
    // Arguments, adjust as needed
    $args = array(
        'post_type' => 'job', // Swap to your CPT
    );

    // Use $loop, a custom variable we made up, so it doesn't overwrite anything
    $loop = new WP_Query( $args );

    if ( $loop->have_posts() ) : // Test if any CPT posts exist

        // If CPT posts exist do this
        $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page">
                    <a href="/jobs">Jobs</a></li>';
        
        return $items;
        
    else:  
        // If CPT posts don't exist do this
        return $items; 
        
    endif;

    wp_reset_postdata();
}

So this example is using a filter that adds items to the menu, but I only want to add the menu item if a certain CPT has posts published.

A new WP_Query loop is created and assigned to a CPT, the loop is run and if the posts exist then the menu item is added otherwise the default content is returned. Reset the loop at the end of the function.

The same logic can be applied to any filter or action.

The post Conditional Check if Custom Post Type Posts Are Published appeared first on WP Beaches.

]]>
https://wpbeaches.com/conditional-check-if-custom-post-type-posts-are-published/feed/ 0
Add Search Toggle Icon at End of Menu in WordPress https://wpbeaches.com/add-search-toggle-icon-at-end-of-menu-in-wordpress/ https://wpbeaches.com/add-search-toggle-icon-at-end-of-menu-in-wordpress/#respond Sun, 07 Apr 2019 00:16:19 +0000 https://wpbeaches.com/?p=15604 In WordPress, you can add a search toggle field at the end of a menu using the filter wp_nav_menu_items or a similar menu filter by which you can append menu items at the end of the targetted menu, add a slideToggle with jQuery for the show/hide effect and a bit of CSS. Targetting the Menu…

The post Add Search Toggle Icon at End of Menu in WordPress appeared first on WP Beaches.

]]>
In WordPress, you can add a search toggle field at the end of a menu using the filter wp_nav_menu_items or a similar menu filter by which you can append menu items at the end of the targetted menu, add a slideToggle with jQuery for the show/hide effect and a bit of CSS.

Add Search Toggle End Menu

Targetting the Menu

View the code on Gist.

So in the above snippet, you can target the menu based on a theme location, however sometimes this is not possible, there is a variant filter which uses the actual menu ID name so that can be targetted directly.

View the code on Gist.

So in the above, the filter name is modified to be wp_nav_menu_primary-menu_items after the primary-menu CSS ID.

Both snippets use the FontAwesome 5 for the search icon, the actual div that holds the search form is initially set to hide as jQuery slideToggle function will be used to reveal it.

jQuery slideToggle to Reveal Search Form

View the code on Gist.

As well as the search form be set to slideToggle on click, a second function will dismiss the search form if the ESC key is clicked.

Style the Search Form

View the code on Gist.

Style the search form to your hearts content.

Modify the Search Form’s Content

You may want to modify the search forms content such as the placeholder text, this is possible with the get_search_form filter.

View the code on Gist.

So above I am just changing the placeholder value to something different from the default.

The post Add Search Toggle Icon at End of Menu in WordPress appeared first on WP Beaches.

]]>
https://wpbeaches.com/add-search-toggle-icon-at-end-of-menu-in-wordpress/feed/ 0
Set Up Valet on macOS for Local WordPress Development https://wpbeaches.com/setting-up-valet-on-macos-for-local-wordpress-development/ https://wpbeaches.com/setting-up-valet-on-macos-for-local-wordpress-development/#comments Mon, 01 Apr 2019 03:41:16 +0000 http://wpbeaches.com/?p=14637 This is a guide on how to set up Laravel Valet on macOS for a WordPress local development environment. Using Valet as a WordPress local development solution has the main benefits of speed, being lightweight and using fewer configurations to go wrong than say a solution like Vagrant. Valet runs only on macOS and runs…

The post Set Up Valet on macOS for Local WordPress Development appeared first on WP Beaches.

]]>
This is a guide on how to set up Laravel Valet on macOS for a WordPress local development environment. Using Valet as a WordPress local development solution has the main benefits of speed, being lightweight and using fewer configurations to go wrong than say a solution like Vagrant.

Valet runs only on macOS and runs directly on top of the operating system, not in a virtual container.

The key software components needed are Homebrew; a package manager and Laravel; a PHP framework.

Valet itself has an Nginx, PHP 7.2, MariaDB or MySQL, DnsMasq and by default uses the .test domain name. Once the software is all installed Valet itself will launch automatically on startup.

Set Up Local Development Environment

Install Homebrew

First up is to install Homebrew so the key parts of the web stack such as PHP and MySQL/MariaDB  can get installed easily.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

This will install the Homebrew package manager and Xcode command line tools if not already installed.

Install composer with Homebrew

brew install composer

Get PHP and MySQL set up

Install PHP

brew install homebrew/core/php

Install MySQL/MariaDB – background service works after restart

brew install mariadb

Start it as background service

brew services start mariadb

MySQL/MariaDB installs as user root with no password.

Get Laravel and Valet set up

Install Laravel

composer global require "laravel/installer"

Install Valet with composer

composer global require laravel/valet

Make sure your macOS shell path has the following location, this will allow you to easily use valet commands on the command line – if you don’t include it you will need to prefix all valet commands with ~/.composer/vendor/bin/

~/.composer/vendor/bin

Install valet

valet install

Now it will install dnsmasq and set up Nginx and PHP and start valet, some basic valet commands below…

valet stop
valet restart
valet --version
ping blah.test for 127.0.0.1

A responding ping will verify dnsmasq and the other components have been successfully set up.

To update Laravel Valet

composer global update
valet install
valet restart

Webroot & park

Probably the best method for a webroot directory is to use the Sites folder in your home, this was a traditional webroot in the past of the macOS user account filing system – if one is not there either make one in the Finder or via the Terminal

mkdir ~/Sites

Register the Sites folder with Valet, so any top level folders will be treated as a serving site – use the park command

cd ~/Sites
valet park

There is also a valet link command that allows a directory somewhere else in the filing system to serve its content as a webroot, it does so by putting a symbolic link in the park directory – Sites.

To set up new Laravel project sites you can use the command

laravel new sitename

The first site created this wat takes a while with a number of downloads when it is done a new http://sitename.test is viewable in the browser – but what about with an actual WordPress install?  – see next.

 

WordPress and Valet

So the best code to serve up ready made WordPress sites is wp-cli-valet-command it can spin up sites very quickly and can be further enhanced taking advantage of bash scripting.

First of all, you need to have wp-cli installed, this guide can cover that process.

Increase your PHP memory size, especially if you installed PHP with Homebrew – otherwise, a fatal error will occur when installing wp-cli-valet-command package, find your PHP memory limits .ini config file

php --ini
nano /usr/local/etc/php/7.2/conf.d/php-memory-limits.ini

Change limits to 512M in all 3 places

Also, make sure your MySQL or mariadb is running…

brew services start mariadb

Once you have wp-cli add the wp-cli-valet-command package

wp package install git@github.com:aaemnnosttv/wp-cli-valet-command.git

Once this is installed you are ready to create some WordPress sites…

To install a new site, move into your Sites folder and run a wp valet command

cd ~/Sites
wp valet new newsitename

This will set up https://newsitename.test ready to go WP-Admin defaults are admin/admin for username and password.

All new sites are by default set up with https – to set one up just as http – run…

wp valet new newsitename --unsecure

To remove a site…

wp valet destroy newsitename

For more commands and options check out the GitHub repo for wp-cli-valet and also you can create custom sites with a certain theme, plugins, etc by rolling your own bash scripts.

phpMyAdmin

To deal with MySQL via phpmyAdmin – create a new site

cd ~/Sites
wp valet new phpmyadmin

So now you have a https://phpmyadmin.test – remove all the WordPress files and download and move into the folder the latest phpmyadmin files – if your MySQL install is no password then change the config file as prompted to AllowNoPassword. Now all your databases are easily accessible.

You can take WordPress site installation further with Valet by adding a bash script that includes further refining the install with plugins and themes tailoring – see the next article on Valet, wp-cli and bash scripting.

References

Install valet

Install wp-cli-valet-command

Install wp-cli

Install Homebrew

The post Set Up Valet on macOS for Local WordPress Development appeared first on WP Beaches.

]]>
https://wpbeaches.com/setting-up-valet-on-macos-for-local-wordpress-development/feed/ 4
Filter CPT Archive by Custom Taxonomy with Isotope https://wpbeaches.com/filter-cpt-archive-by-custom-taxonomy-with-isotope/ https://wpbeaches.com/filter-cpt-archive-by-custom-taxonomy-with-isotope/#respond Tue, 19 Mar 2019 05:33:02 +0000 https://wpbeaches.com/?p=15559 The Isotope JS library allows for some instant filtering of posts from a taxonomy without page reloading. Below is a template file which uses a CPT Archive page and a Custom Taxonomy called ‘my_category‘. Since it’s a CPT Archive page it uses WordPress native loop, there is some specific CSS class markup for the posts…

The post Filter CPT Archive by Custom Taxonomy with Isotope appeared first on WP Beaches.

]]>
The Isotope JS library allows for some instant filtering of posts from a taxonomy without page reloading. Below is a template file which uses a CPT Archive page and a Custom Taxonomy called ‘my_category‘.

Since it’s a CPT Archive page it uses WordPress native loop, there is some specific CSS class markup for the posts that is used and in this instance it uses ‘cpt‘.

The Isoptope library is loaded to the archive page as well as an isotope-init file and also imagesloaded is called which comes bundled with WordPress.

View the code on Gist.

Lot of stuff going on, the custom taxonomy ‘my_category‘ has its terms output in a loop which will serve as the links to filter the CPTs, then the native loop is run with another ‘my_category’ loop that outputs the name of the term as a CSS class in the posts class attribute values. This does the filtering Isotope, then the rest of the loop – in this case just the featured image and the title of the post.

And then isotope-init.js file which does its magic, read up on the parameters and values here.

View the code on Gist.

The post Filter CPT Archive by Custom Taxonomy with Isotope appeared first on WP Beaches.

]]>
https://wpbeaches.com/filter-cpt-archive-by-custom-taxonomy-with-isotope/feed/ 0
Output a Custom Taxonomy Loop in WordPress https://wpbeaches.com/output-a-custom-taxonomy-loop-in-wordpress/ https://wpbeaches.com/output-a-custom-taxonomy-loop-in-wordpress/#respond Mon, 18 Mar 2019 22:25:58 +0000 https://wpbeaches.com/?p=15553 Here is a custom taxonomy loop code snippet, which allows you to output a set of custom taxonomy terms using the get_terms object and a foreach loop. View the code on Gist. In the above, a custom taxonomy named custom_taxonomy_name is assigned to the variable $terms and then used in a foreach loop to output…

The post Output a Custom Taxonomy Loop in WordPress appeared first on WP Beaches.

]]>
Here is a custom taxonomy loop code snippet, which allows you to output a set of custom taxonomy terms using the get_terms object and a foreach loop.

View the code on Gist.

In the above, a custom taxonomy named custom_taxonomy_name is assigned to the variable $terms and then used in a foreach loop to output as a plain html unordered list. One of the parameters passed in is to hide any terms which have no linked posts with the hide_empty value, more parameters can be found at https://developer.wordpress.org/reference/classes/wp_term_query/__construct/

The post Output a Custom Taxonomy Loop in WordPress appeared first on WP Beaches.

]]>
https://wpbeaches.com/output-a-custom-taxonomy-loop-in-wordpress/feed/ 0
Fix FOUC ‘flash of unstyled content’ on WordPress https://wpbeaches.com/fix-fouc-flash-of-unstyled-content-on-wordpress/ https://wpbeaches.com/fix-fouc-flash-of-unstyled-content-on-wordpress/#comments Thu, 14 Mar 2019 08:35:59 +0000 https://wpbeaches.com/?p=15540 FOUC aka ‘flash of unstyled content’ is a bit of a pain after a layout has been put together but does not load without that flash of odd content jumbled up on load. Using a snippet of jQuery by adding and later removing a CSS class of hidden to the html element but then showing…

The post Fix FOUC ‘flash of unstyled content’ on WordPress appeared first on WP Beaches.

]]>
FOUC aka ‘flash of unstyled content’ is a bit of a pain after a layout has been put together but does not load without that flash of odd content jumbled up on load.

Using a snippet of jQuery by adding and later removing a CSS class of hidden to the html element but then showing it all when the document is ready is a good way to combat FOUC.

add_action('wp_head', 'fouc_protect_against');
/**
 * Combat FOUC in WordPress
 * @link https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content
 */
function fouc_protect_against () {
    ?>
        <style type="text/css">
            .hidden {display:none;}
        </style>
        <script type="text/javascript">
         jQuery('html').addClass('hidden');
	            
	 jQuery(document).ready(function($) {		            
	    $('html').removeClass('hidden');	            
	 });  
        </script>
    <?php

}

Add in your functions.php

The post Fix FOUC ‘flash of unstyled content’ on WordPress appeared first on WP Beaches.

]]>
https://wpbeaches.com/fix-fouc-flash-of-unstyled-content-on-wordpress/feed/ 3
Add a CSS class on a current active menu item https://wpbeaches.com/add-a-css-class-on-a-current-active-menu-item/ https://wpbeaches.com/add-a-css-class-on-a-current-active-menu-item/#respond Thu, 14 Mar 2019 08:06:12 +0000 https://wpbeaches.com/?p=15535 With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS. (function($){ $(function() { // Document Ready activeMenu(); }); // Functions // @link https://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu function activeMenu() {…

The post Add a CSS class on a current active menu item appeared first on WP Beaches.

]]>
With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS.

(function($){

    $(function() { // Document Ready
        
        activeMenu();
        
    });

    // Functions
    // @link https://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu
    
function activeMenu() {

    var url = window.location.pathname, 
        // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
        // now grab every link from the navigation
        $('.menu a').each(function(){ // Swap to your menu CSS Class or ID
            // and test its normalized href against the url pathname regexp
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).addClass('current'); // Add CSS Class 'current' to active link tag
            }
        });   
    }

})(jQuery);

Enqueue the script and target your menu to where you need the current active menu item to have the CSS class.

The post Add a CSS class on a current active menu item appeared first on WP Beaches.

]]>
https://wpbeaches.com/add-a-css-class-on-a-current-active-menu-item/feed/ 0