Sticking An Element To The Top Of The Browser After Scroll
You can stick an element to the head of the browser after a user has scrolled past it with either pure CSS or jQuery with the help of Waypoints and Sticky Elements. CSS You can actually do this with a simple CSS property position:sticky You would apply some CSS to an element that you want…
Read MoreAdd WooCommerce MyAccount Page Login/Logout to Menu
This code adds a login/logout link to your WordPress primary menu to log the user into the WooCommerce My Account page and then also log out to the same or different page. It differs from the referred article as that adds the WordPress default login/logout page. The menus need to be registered via register_nav_menu and positioned with theme_location,…
Read MoreDisplay CSS Animations When In Browser Viewport
CSS Animations can be easily applied to elements in HTML and viewed in the browser, but when the animation is lower down on the page it may have animated already before the user has scrolled to it. Here’s where Waypoints can solve the problem. (This example is done using WordPress). Waypoints allows you to run…
Read MoreAdd Javascript and CSS files to the Head and Footer in WordPress
Getting it right in the head As a hack every now and then I used to add in javascript or CSS files with links hardcoded directly into the header.php or footer.php template files of a WordPress theme. This really is a no no! as this can result in script conflicts or duplications or just downright badness, there…
Read MoreInstall and Configure wget on macOS
macOS Mojave, Sierra, and earlier versions come with the command line utility called ‘curl‘ which is a network transfer tool, it does not come with the popular ‘wget‘, in fact, ‘curl‘ can probably get you by just fine, check man curl at the command line to see its usage. Otherwise, let’s look at getting ‘wget‘… this can…
Read MoreAdd Link Tag to Whole Column in Beaver Builder Layout
To add a link to a whole column in a Beaver Builder layout you need to use some jQuery to add the link tag markup to make the whole column clickable. This post has 2 solutions the first is the simpler one with no CSS just some jQuery – the second one is more long…
Read MoreChange Default Values in Beaver Builder Themes Customizer Settings
The Beaver Builder Themes default values in the Customizer can be changed with the fl_theme_add_panel_data filter. These are the values when you click on the default button that return a value set from the original code. The filter is found bb-theme/classes/class-fl-customizer.php and takes 2 parameters $key and $data, the former being the customizer panel and…
Read MoreChanging the Customizer Values & Presets for the Beaver Builder Theme
Here is a quick way to override the active preset that comes with the Beaver Builder Theme in the Customizer. This may come in handy if you need to start off with your own preset settings and perhaps remove all the other presets so the theme cannot be drastically changed. You can obviously override the preset…
Read MoreOutput The Featured Image in a Loop as a Linked Media Image
Instead of linking a featured image to a post permalink in a loop – here is how you can link to its original image of itself. View the code on Gist. So above, the title and featured image is output of a post – the title has a link to the post whilst the image…
Read MoreFiltering Posts with Custom Fields Using meta_query
You can further refine a list of posts by filtering any custom fields that the post has for a certain set of conditions, this is possible with WP_Meta_Query, which allows you to target custom fields as known as post meta. There are a couple of ways to use the WP_Meta Query class, the meta_query array is…
Read More