Simplesteps for WordPress

WP CLI power

March 9, 2021 / dimitrios

Omg wp cli

If you have lots of sites to maintain then wp cli is the tool. I am using putty to connect.

Recipes so far ( my wp command is wp-cli )

aliases!

.bashrc

# Check themes, core, plugins for updates 
alias check-all='wp-cli core check-update && wp-cli plugin list --update=available && wp-cli theme list --update=available'

# Update all that it can be updated
alias update-all='wp-cli core update && wp-cli plugin update --all && wp-cli theme update --all'

Woocommerce install sample data

wp-cli plugin install wordpress-importer && wp-cli plugin activate wordpress-importer

crap this does not work 100%, it imports images, products but not variations/attributes, you still have to use the woo importer.

wp-cli import wp-content/plugins/woocommerce/sample-data/sample_products.xml –authors=create

Using custom attributes in menus and taxonomy archives NOT WORKING FOR SOME REASON

September 10, 2020 / dimitrios

This requires some work on your part, and archives must be enabled.

What this means is that you have to open the attribute name and

for some strange reason no one has a freakin image @#$@%^#$^$%^$%^$%^%$^%$

It Gets Better GIF by GIPHY Studios Originals

Make div bigger than parent

September 5, 2020 / dimitrios

The parent should not be positioned!!!!!!!

.child-div {
    position:absolute;
    left:0;
    right:0;
}

https://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css

READ THIS FIRST WordPress 5.5 Master List

August 13, 2020 / dimitrios

https://wordpress.org/support/topic/read-this-first-wordpress-5-5-master-list/#post-13238244

WordPress optimization that works easily and safely.

July 30, 2020 / dimitrios

I see lots of new WP users trying to optimize their sites using the most advanced plugins and methods, DONT!. Most of the times you end up destroying your site and spend many hours debugging. The following plugins will help you without needing to change their default settings or read tutorials.

No 1 thing to keep in mind is to clear your cache regularly to actually see what your visitors see. Using a browser with empty cache just for that is the easiest way.
No 2 , if you use a bloated theme and 100 plugins no need to go the extra mile to optimize your site, it is not possible.

WP Super Cache, really easy to use without having to change the defaults. Plenty of documentation and tutorials. Works with WooCommerce and if you have a good host you can enable the ‘expert’ mode.

Autoptimize, use it for HTML, CSS, JS and images.

Redis Object Cache, caches your database queries, unfortunately you need a good hosting company to support it and it can cause trouble some times 🙂

Sticky FacetWP flyout menu

July 30, 2020 / dimitrios

To make it sticky I used the offsetParent, offsetTop and scrollY properties. I placed the button in a positioned element ( not sticky ) hid it with opacity so I can animate it and get the offsetParent ( does not work with display:none; ) and then used scrollY to change it’s opacity. I added a class ‘.sticky-facetwp’ to the button to target it.

The CSS

button.sticky-facetwp {
	opacity: 0;
	position: absolute;
	z-index: 99;
	color:#000 !important;
	transition-property: opacity;
	transition-duration: 1s;
	transition-delay: 0s;
}

.archive button.fixed-sticky-facetwp {
	opacity: 1;
	position: fixed;
}

The JS


const page = document.querySelector('#content')

// get the filter button
const theFilter = document.querySelector('.sticky-facetwp')
const theFilterTop = theFilter.offsetTop

function stickyfacetwp() {
	if (window.scrollY >= theFilterTop) {
        theFilter.classList.add('fixed-sticky-facetwp');
      } else {
        theFilter.classList.remove('fixed-sticky-facetwp');
      }
}

window.addEventListener('scroll', stickyfacetwp)

offsetHeight of image equals zero

July 23, 2020 / dimitrios

Scripts without async , defer or type="module" attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

To get the offsetHeight when using an inline script you can use an event listener like

window.addEventListener(‘load’, start);

load to wait for all assets OR link the script with ‘src’

to load it after the assets loaded.

The Usual suspects ( how to troubleshoot WordPress )

If you are new to WP, chances are that you will have issues with your site. Do not panic, you can ask for help or google the exact problem/error you have, most of the times you will find many resources with fixes. From my experience 90% of the cases can be diagnosed easily though.