Skip to main content

Posts

Showing posts with the label wordpress

Lets improve Website speed

 Salam All! Today i have the privilege to do some website analysis. The main objective is to improve the current website speed and performance. Well, tbh there's less sale on the website, however the purpose having it available is for reference. Most of the sale transactions happens on Shopee~   First i ran the GTMetrix performance analysis.  https://gtmetrix.com/reports/4nutz.tk/j42YIXSg/  you can see the report completely! here are some screenshots ! fyi im not using any cdn to do the script and image caching, due to my target audience is in Malaysia itself. And the server i deployed is from Singapore.     Steps that i take to improve the speed! Change to only use Webp images! Ive done this step previously, however didnt cater all images. For homepage lets convert all the visible image to webp! Will update from time to time this post! Troubleshoot file loading time Using browser console we can see which scripts taking long time to load then from there we ...

Automate Letsencrypt Certs renewal for Docker with Multisites Wordpress

 Assalamualaikum,  Well to understand this post you will need to read first how i set multiple Wordpress sites in Docker containers ~   LetsEncrypt Certification Auto Renewal   Ok the trick that i did to automate the renewal process is  1. Create 2 separate docker file I'm not able to create a single line letsencrypt command that can run cert renewal for two different domains, thus this is a hack way. If you have any suggestion let me know please!   ls -l wordpress/docker-compose* -rw-rw-r-- 1 cxx cxx 2421 Jun  7 11:32 wordpress/docker-compose-4nutz.yml -rw-rw-r-- 1 cxx cxx 2442 Jun  7 11:28 wordpress/docker-compose.yml For file docker-compose-4nutz.yml small change made on the certbot definition, where i commented out the volumes for another website / kedaibiskut. Highlighted you can just totally remove it. Ensure the command is correct only for one domain and one path. certbot:     depends_on:       - web...

Create a simple Delivery Calculator

 Assalamualaikum, As previous post , i mentioned that i wanted to create a simple distance calculator for own usage. Of course i didn't do it by myself. I watched this tutorial and download the code to start coding.  And obviously i need to customize and do a little tweaks to get the result that i wanted. Plus i apply the code into Wordpress framework by extending the Child Theme What i did was, i separate the JS function from the html code. Adding the JS script and enqueued it. Steps.  Introduce JS script,  sudo vim assets/js/calculate_distance.js   script content the additional changes that i did was, adding delivery charge calculation for the front end, i create a page template that later loaded in Wordpress page, checkout my previous post the page template content the changes that i made is on the Google Places API key value, include new labels that displays the result after the user submit the form / click "Calculate" button, preset the input value for...

Create Custom Template Page in Wordpress Theme

 Assalamualaikum...     Wanted to create a simple page that can quickly get a delivery quote for my customer~    Issue with Wordpress is most of the time need to fill up the address details before getting full quotation as im using a free plugin that is not so user friendly.    While I have manual quotation request incoming to our 4nutz social medias, i decided to spin up a tool page that help to quickly calculate the pricing.   ok today wanted to share first   How to create a page template in Wordpress theme?   Reason doing so is so that we do changes in the wordpress theme or the best is the child theme. not directly apply in database the code nor hacking the wordpress framework code! that is really hard and headache to maintain!   For those who dont know how to create Child Theme, please refer to this tutorial first!   Step one, create a php page file in Wordpress Theme/ Child Theme vim page-distance-calculator.php Step two,...

Multisites on Docker Container (Wordpress framework)

 Assalamualaikum.   Photo by Domenico Loia on Unsplash   Short story, i want to replicate https://4nutz.tk to https://kedaibiskut.tk  and  i want them to keep running on docker containers. If you haven't know how did I setup the docker infrastructure for https://4nutz.tk you can read first my previous post.   I have to admit that i didn't study nginx proxy first to implement the multisites. this is more like a hack way ~ i'm just going to highlight what is important ya. 1) Created a new database in existing container mysql. dump 4nutz db to kedaibiskut. yeah i m doing this because i totally wants everything retains! later on i ll customize the data. this is due to basic configuration needed i already done all in 4nutz. for more details on  how to dump and retrieve wordpress db data checkout those posts! 2) i created a new wordpress container for the new website, for the content i copied all from 4nutz wordpress and of course change the wp-config....

Error on running Certbot Container on Docker

 ERROR: for certbot  Cannot start service certbot: OCI runtime create failed: container_linux.go:349: starting container process caused "process_linux.go:449: container init caused \"process_linux.go:432: running prestart hook 0 caused \\\"error running hook: exit status 2, stdout: , stderr: fatal error: runtime: out of memory   what a long 3 nights (not that i don't sleep, continued doing and fixing in 3 nights~) that i have been trying to figure out how to solve this problem!  Posting on separate post so that can highlight this issue.  In the beginning i thought it is due to wrong docker-compose.yml setting for certbot! weird because when i first using it for setting up 4nutz.tk there is no such issue! I am rerunning it again to setup for kedaibiskut.tk !   at first my command used was for multiple webroot path. but then i realized naah lets try with a single one! issue still occurs.   i even run with verbose flag to see the error details! ...

(Docker Solved) Post-processing of the image failed likely because the server is busy or does not have enough resources ERROR

Hi All!   Photo by Markus Spiske on Unsplash   Post-processing of the image failed likely because the server is busy or does not have enough resources. Encountered this issue, when uploading media files to my 4nutz.tk website! To solve this issue it might comes from PHP setting and Nginx settings. Thus i took the chance to fix both!   Fix PHP settings First i increased the minimum size file upload in PHP settings by introducing new php.ini / uploads.ini file link to local file to the wordpress container  example in docker.yaml file setting.   wordpress:     depends_on:       - db     image: wordpress:5.1.1-fpm-alpine     container_name: anutz_wordpress     restart: unless-stopped     env_file: .env     environment:       - WORDPRESS_DB_HOST=db:3306       - WORDPRESS_DB_USER=$MYSQL_USER   ...

Dockerize Wordpress Stacks for Easy Migration

  Assalamualaikum,    Photo by Campaign Creators on Unsplash   After using Google Cloud free credit   for 3 months, its time to migrate our Wordpress website! I have launched https://4nutz.tk an e-commerce website that sells our own home-brand Natural Nut Butters!  To save money, development was done on Google Cloud Compute Engine, after 3 months running, putting all the contents there! Tracking our own sales, finally its time to migrate.  At the beginning, i don't want to put so much effort in running it up, used Bitnami image to run the Wordpress. Everything was easy and breezy! But aware of the time limit, yes we need to migrate eventually. Because the Google Cloud pricing is too expensive for me! $20 per month? kidding me.  Running the website on Digital Ocean is much cheaper $5 per month! Register using my referral link ya! you will get free $100 credit for 2 months! gets your hands dirty and start running you own web app / projects~ Ive b...

Restoring Database and Wordpress Site

  Command based Restoring Database and Wordpress Site First you need to have the backup files ready. Visit my recent post on how to backup database and wordpress site .   Photo by Carl Heyerdahl on Unsplash   Restore DB Having the backup files ready, following below steps to restore it properly. Ensure MySQL is installed For Windows users can checkout this tutorial https://dev.mysql.com/doc/refman/8.0/en/windows-installation.html Ensure mysql path is set in the environment For Windows users can checkout this tutorial https://dev.mysql.com/doc/mysql-windows-excerpt/5.7/en/mysql-installation-windows-path.html Run following commands to create db, assign new users, and restore db. Access MySQL by running below command mysql Create the user that you wanted to use / manage the db in wordpress later.  create USER testrestore@localhost IDENTIFIED BY '<the user password>'; Create the database that you wanted to use for wordpress later.  create DATABASE mydatabase...

Create Wordpress Website & MySQL Database Backup then Upload to Gdrive

 It's easy to use plugin, but you only need few commands to run :D Usually Wordpress user will just quickly find a plugin to backup the website and its databases. Is it to daunting to do it by ourselves? Photo by Science in HD on Unsplash     I find plugin is easy in certain way, but for an admin myself, i prefer simple command / script to get the job done.  Create database backup This is the command required to run a simple database backup in mysql.p/s you can change the destination path. I put in /tmp because i want to upload to gdrive later.   If you choose to upload to Gdrive Normally a user might just want to backup the file to its host server. For this case i wanted to upload the backup file(s) to Gdrive. And im using a third party Gdrive command client . You might want to checkout tutorial on how to get it installed in your server~   **Use at your own risk! the third party cli will have access and write permission to your Gdrive files!**   I...

Create a Wordpress Cron Job to Send Reminder

 Hi All,     The following code is sample of how to create a WP Cron and send out email reminder to targeted seller/admin. You may use this as reference and change accordingly. Please read the code comments to understand the flow! This code will check seller users that is not active for 1 month to send reminder to them and delete seller products that is not active for 3 months. To better enhance the code you can actually just set the product as draft instead of deleting it directly.

Populate Whatsapp Link Based on Seller Phone Number WCFM

Hi all, Image from Pexels Today I'm going to share, how to populate WhatsApp link based on the seller number. My example today is based on Malaysia's phone number. The registration input doesn't have an input validator for the phone number, however, these are the most common number registered by users. 1) starting with 6 at front 2) starting with +6 at front 3) normal number without country code eg : 014xxxxxx Full code on how to populate whatsapp link for seller number basically, I introduced a simple pattern that has 2 groups. "#(^[6]\w*$)|(^[+][6]\w*$)#"; The patterns must have a delimeter added for PHP, in my case i use a `#`. You can use other delimiter that supported by PHP . The first pattern (^[6]\w*$) Checks whether the seller phone number starts with number 6 and followed with other characters. If it is matched, do nothing as the format is already correct. The second pattern (^[+][6]\w*$) Checks whether the seller phone ...

Adding Custom Field for Vendor Settings in WCFM

Hi all, just a quick sharing. How to add Custom Field for Vendor Settings in WCFM Image by Clker-Free-Vector-Images from Pixabay I wanted to add a custom field for Vendor Settings in WCFM . The field will be a checkbox with a label of "Verified". This field can only be filled by an admin. The purpose tells is to tell whether this vendor is verified or not and data is stored in `wp_usermeta` table. Okay, of course, if I use the paid extension for WCFM plugin this feature already included. But come on! I just want to add this simple function without paying any penny :P Thus I decided to DIM (Do it Myself). I was lucky that previously other WCFM users did a custom field for Vendor Settings and shared his solution on the WCFM forum. Aha. So I tested out, in the beginning, it was not working. The working code I included here for your reference. I also added the admin user check to ensure the field is only loaded for admin view :D. This code needed to be in...

Easily include Seller Bank details in On-hold Order Email WCFM

Do you have a scenario when using WCFM , you would want to allow buyer to directly pay to seller bank account by bank transfer? Well I do. This is due our Marketplace offered free service to sellers. At the beginning we charge them some commission fees, but that does not really work. As the job to handle the delivery is more troublesome with our limited resources and our sellers are not coming from big companies who are willing to pay higher commission fees. I'm going to share with you how easily you can add the Seller account details on the Customer on-hold order email template. I'm adding this in an extended child-theme ..okay. Never write in the original Woocommerce plugin module, nor the parent theme module. That is 100% wrong, as LATER on, you will have trouble to manage and upgrade the theme and plugins to the latest version. Add the Woocommerce template directory in child theme Create the directory for Woocommerce emails and copy the file over. Update the c...

The right way to load Javascript and CSS files in Wordpress.

The way we load Javascript and CSS files in Wordpress is different from the normal HTML way. First of all, we need to identify where do we want to load the scripts. Is it in our theme or plugin?. Lets say we want to load it to  our theme, we can easily create a new folder in our child theme and place the scripts in it. for example Then we can load it in our child theme functions.php file. Ok when we load, we need to understand the parameters that we want to pass in... for wp_enqueue_styles is quite straight forward. but for wp_enqueue_script.. Pay attention on deps parameter. whether the script that we want to load has dependencies with other scripts / jquery. Same goes to in_footer parameter, do we want to load in header or before the body closing tag. If we do not define properly. Our scripts might not be loaded properly. Pay attention on those two parameters.

Get all meta keys of wp_usermeta using sql query

To get all meta keys of wp_usermeta we can easily group field of meta_key and meta_value. For example: select group_concat(meta_key) as meta_keys from wp_usermeta group by user_id limit 1 \G; Results: *************************** 1. row *************************** meta_keys: nickname,first_name,last_name,description,rich_editing,syntax_highlighting,comment_shortcuts,admin_color,use_ssl,show_admin_bar_front,locale,wp_capabilities,wp_user_level,dismissed_wp_pointers,show_welcome_panel,wp_dashboard_quick_press_last_post_id,wc_last_active,wp_user-settings,wp_user-settings-time,_previous_login,_current_login...

Get the last active time from users in woocommerce using sql query

To easily get the last active time from users (under Woocommerce extended plugin) we can easily query from database using the meta_key of "wc_last_active" example query: select user_id, meta_value from wp_usermeta where meta_key= "wc_last_active" and user_id in (11111,112222); results: +-------------+------------------+ | user_id    | meta_value | +-------------+-------------------+ |   11111   | 1556755200 | |   112222 | 1566518400 |

hiddenInput issue when integrating intl-tel-input in Woocommerce custom gateway plugin

Checkout my full post here.. on the workaround. If you have any question. please drop a comment, i ll will reply https://github.com/jackocnr/intl-tel-input/issues/1020 for those who are having issue on woocommerce ajax checkout update call, **i faced this when using Woocommerce deposit, i updated to check if there's any post data on form initialization, if yes, i will reassigned the variable value. Example: