Programming - My Awesome Moments

Bootstrap 5 Carousel Caption Outside of Image

By default Bootstrap 5, put the caption on the image and no way you can change the caption position by modifying only the Bootstrap CSS.

You need to change the CSS and add jQuery to do this.

After few tries, I manage to do put the carousel caption outside of images for large screen. For small screen the caption is still on the image.

For small screen, to make the caption outside of image, you can change the CSS by using CSS media screen.

Demo – Bootstrap 5 Carousel Caption Outside Image

How To Change Bootstrap 5 Carousel Caption Position

CSS Not to Display Default Caption Position

.carousel-caption{
    /* not to display caption at its current position */
    display: none !important;
}

.carousel-caption{

/* not to display caption at its current position */

display: none !important;

}

Add CSS to Display New Carousel Caption Position

You can change the CSS to where you want to put your text.

.new-carousel-caption-position{
    position: absolute; 
    top: 20%; 
    left: 50%; 
    background-color: yellow; 
    min-width: 200px;
}

.new-carousel-caption-position{

position: absolute;

top: 20%;

left: 50%;

background-color: yellow;

min-width: 200px;

}

Add jQuery Script to Retrieve Current Caption

   //put carousel caption to new position which is at #newTextPosition
	jQuery( document ).ready(function() {

        //by default show the first slide description
        let html = jQuery('#caption-0').html();
        jQuery('#newTextPosition').html(html);

        jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

            //step - current slide e.g 0, 1, 2
            let step = jQuery(evt.relatedTarget).index(); 
            html = jQuery('#caption-' + step).html();
            jQuery('#newTextPosition').html(html);

        });

    });

//put carousel caption to new position which is at #newTextPosition

jQuery( document ).ready(function() {

//by default show the first slide description

let html = jQuery('#caption-0').html();

jQuery('#newTextPosition').html(html);

jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

//step - current slide e.g 0, 1, 2

let step = jQuery(evt.relatedTarget).index();

html = jQuery('#caption-' + step).html();

jQuery('#newTextPosition').html(html);

});

Add id to each carousel-caption

 <!-- ensure id="caption-0" to be included in order to retrieve text via jQuery -->
<div id="caption-0" class="carousel-caption d-none d-md-block">

1 2	<!-- ensure id="caption-0" to be included in order to retrieve text via jQuery --> <div id="caption-0" class="carousel-caption d-none d-md-block">

Full Source Code

<html>
<head>
<title>Demo - Bootstrap 5 Carousel Caption outside image</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>


<style>

.carousel-caption{
    /* not to display caption at its current position */
    display: none !important;
}

.new-carousel-caption-position{
    position: absolute; 
    top: 20%; 
    left: 50%; 
    background-color: yellow; 
    min-width: 200px;
}
</style>

<script>
    //put carousel caption to new position which is at #newTextPosition
	jQuery( document ).ready(function() {

        //by default show the first slide description
        let html = jQuery('#caption-0').html();
        jQuery('#newTextPosition').html(html);

        jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

            //step - current slide e.g 0, 1, 2
            let step = jQuery(evt.relatedTarget).index(); 
            html = jQuery('#caption-' + step).html();
            jQuery('#newTextPosition').html(html);

        });

    });
</script>
</head>
<body>
<div style="max-width: 500px;">
<div id="carouselExampleCaptions" class="carousel carousel-dark slide" data-bs-ride="carousel">
                            <div class="carousel-indicators">
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                            </div>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                <img src="https://www.awesomegrasp.com/wp-content/uploads/2022/01/7-spice-restaurant.jpeg" class="img-fluid" alt="...">
                                <!-- ensure id="caption-0" to be included in order to retrieve text via jQuery -->
                                <div id="caption-0" class="carousel-caption d-none d-md-block">
                                    <h5>First slide label</h5>
                                    <p>Some representative placeholder content for the first slide.</p>
                                </div>
                                </div>
                                <div class="carousel-item">
                                <img src="https://www.awesomegrasp.com/wp-content/uploads/2022/02/airbnb-meridin-medini-kitchen.jpeg" class="img-fluid" alt="...">
                                <div id="caption-1" class="carousel-caption d-none d-md-block">
                                    <h5>Second slide label</h5>
                                    <p>Some representative placeholder content for the second slide.</p>
                                </div>
                                </div>

                                <div class="carousel-item">
                                <img src="https://www.awesomegrasp.com/wp-content/uploads/2022/01/7-spice-indian-cuisine-johor-bahru-butter-chicken.jpeg" class="img-fluid" alt="...">
                                <div id="caption-2" class="carousel-caption d-none d-md-block">
                                    <h5>Third slide label</h5>
                                    <p>Some representative placeholder content for the third slide.</p>
                                </div>
                                </div>

                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                                </div>
                            </div> 



</div>
<div id="newTextPosition" class="new-carousel-caption-position">

</div>

</body>
</html>

<html>

<head>

<title>Demo - Bootstrap 5 Carousel Caption outside image</title>

<style>

.carousel-caption{

/* not to display caption at its current position */

display: none !important;

}

.new-carousel-caption-position{

position: absolute;

top: 20%;

left: 50%;

background-color: yellow;

min-width: 200px;

}

</style>

//put carousel caption to new position which is at #newTextPosition

jQuery( document ).ready(function() {

//by default show the first slide description

let html = jQuery('#caption-0').html();

jQuery('#newTextPosition').html(html);

jQuery("#carouselExampleCaptions").on('slide.bs.carousel', function(evt) {

//step - current slide e.g 0, 1, 2

let step = jQuery(evt.relatedTarget).index();

html = jQuery('#caption-' + step).html();

jQuery('#newTextPosition').html(html);

});

</script>

</head>

<body>

</div>

<h5>First slide label</h5>

<p>Some representative placeholder content for the first slide.</p>

</div>

<h5>Second slide label</h5>

<p>Some representative placeholder content for the second slide.</p>

</div>

<h5>Third slide label</h5>

<p>Some representative placeholder content for the third slide.</p>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</div>

</body>

</html>

WordPress add wp media

I want to add a media screen to upload photos to a custom post type. I did search the internet but found the solutions were bit an pieces.

What I plan to do – Add Media Screen to Custom Post Type

1) When click on the Add Media – media screen will apppear
2) User can select a photo and when a photo is selected, it will replace the previous photo.

wordpress - add wp media screen to a custom post type — when click on the add media button, a media screen will appear

wordpress - media screen appear on custom post type — media screen appears after clicking on the button.

wordpress - select new photo — wordpress – select new photo

wordpress - new photo replaced the previous one — wordpress – new photo replaced the previous one

How To Do It?

1) Add below javascript

(function () {
    window.addEventListener('DOMContentLoaded', function () {
        var frame;

        // Open or create the the media frame
        document.querySelector('#media-handler').addEventListener('click', function (event) {
            event.preventDefault();

                
            //if frame has been create, reopen it.
            if (frame) {
                frame.open();
                return;
	        }
            /**
             * Please attach all the code below to a button click event
             **/

            //create a new Library, base on defaults
            //you can put your attributes in
            var insertImage = wp.media.controller.Library.extend({
                defaults :  _.defaults({
                        id:        'insert-image',
                        title:      'Insert Sizing Chart',
                        allowLocalEdits: true,
                        displaySettings: true,
                        displayUserSettings: true,
                        multiple : true,
                        type : 'image'//audio, video, application/pdf, ... etc
                }, wp.media.controller.Library.prototype.defaults )
            });

            //Setup media frame
            frame = wp.media({
                button : { text : 'Select' },
                state : 'insert-image',
                states : [
                    new insertImage()
                ]
            });

            //on close, if there is no select files, remove all the files already selected in your main frame
            frame.on('close',function() {
                var selection = frame.state('insert-image').get('selection');
                if(!selection.length){
                    // #remove file nodes
                    // #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
                    // #...
                }
            });


            frame.on( 'select',function() {
                var state = frame.state('insert-image');
                var selection = state.get('selection');
                var imageArray = [];

                if ( ! selection ) return;

                // #remove file nodes
                // #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
                // #...

                //to get right side attachment UI info, such as: size and alignments
                //org code from /wp-includes/js/media-editor.js, arround `line 603 -- send: { ... attachment: function( props, attachment ) { ... `
                selection.each(function(attachment) {
                    var display = state.display( attachment ).toJSON();
                    var obj_attachment = attachment.toJSON()
                    var caption = obj_attachment.caption, options, html;

                    // If captions are disabled, clear the caption.
                    if ( ! wp.media.view.settings.captions )
                        delete obj_attachment.caption;

                    display = wp.media.string.props( display, obj_attachment );

                    options = {
                        id:        obj_attachment.id,
                        post_content: obj_attachment.description,
                        post_excerpt: caption
                    };

                    if ( display.linkUrl )
                        options.url = display.linkUrl;

                    if ( 'image' === obj_attachment.type ) {
                        html = wp.media.string.image( display );
                        _.each({
                        align: 'align',
                        size:  'image-size',
                        alt:   'image_alt'
                        }, function( option, prop ) {
                        if ( display[ prop ] )
                            options[ option ] = display[ prop ];
                        });
                    } else if ( 'video' === obj_attachment.type ) {
                        html = wp.media.string.video( display, obj_attachment );
                    } else if ( 'audio' === obj_attachment.type ) {
                        html = wp.media.string.audio( display, obj_attachment );
                    } else {
                        html = wp.media.string.link( display );
                        options.post_title = display.title;
                    }

                    //attach info to attachment.attributes object
                    attachment.attributes['nonce'] = wp.media.view.settings.nonce.sendToEditor;
                    attachment.attributes['attachment'] = options;
                    attachment.attributes['html'] = html;
                    attachment.attributes['post_id'] = wp.media.view.settings.post.id;

                    //do what ever you like to use it
                    //in my case, I update the previous image with new image
                    //#image-sizing-chart-url is an <img/> tag
                    jQuery('#image-sizing-chart-url').attr('href', attachment.attributes.sizes.large.url);
                    jQuery('#image-sizing-chart').attr('src', attachment.attributes.sizes.thumbnail.url);
                    jQuery('#image-sizing-chart').attr('width', 150);
                    jQuery('#image-sizing-chart').attr('height', 150);
                    jQuery('#image-sizing-chart-id').attr('value', attachment.attributes.id);

    
                });
            });

          

            //now open the popup
            frame.open();
              
        });//click


     
    });//event listener
})(); //dom ready then execute

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

(function () {

window.addEventListener('DOMContentLoaded', function () {

var frame;

// Open or create the the media frame

document.querySelector('#media-handler').addEventListener('click', function (event) {

event.preventDefault();

//if frame has been create, reopen it.

if (frame) {

frame.open();

return;

}

/**

* Please attach all the code below to a button click event

**/

//create a new Library, base on defaults

//you can put your attributes in

var insertImage = wp.media.controller.Library.extend({

defaults : _.defaults({

id: 'insert-image',

title: 'Insert Sizing Chart',

allowLocalEdits: true,

displaySettings: true,

displayUserSettings: true,

multiple : true,

type : 'image'//audio, video, application/pdf, ... etc

}, wp.media.controller.Library.prototype.defaults )

});

//Setup media frame

frame = wp.media({

button : { text : 'Select' },

state : 'insert-image',

states : [

new insertImage()

]

});

//on close, if there is no select files, remove all the files already selected in your main frame

frame.on('close',function() {

var selection = frame.state('insert-image').get('selection');

if(!selection.length){

// #remove file nodes

// #such as: jq("#my_file_group_field").children('div.image_group_row').remove();

// #...

}

});

frame.on( 'select',function() {

var state = frame.state('insert-image');

var selection = state.get('selection');

var imageArray = [];

if ( ! selection ) return;

// #remove file nodes

// #such as: jq("#my_file_group_field").children('div.image_group_row').remove();

// #...

//to get right side attachment UI info, such as: size and alignments

//org code from /wp-includes/js/media-editor.js, arround `line 603 -- send: { ... attachment: function( props, attachment ) { ... `

selection.each(function(attachment) {

var display = state.display( attachment ).toJSON();

var obj_attachment = attachment.toJSON()

var caption = obj_attachment.caption, options, html;

// If captions are disabled, clear the caption.

if ( ! wp.media.view.settings.captions )

delete obj_attachment.caption;

display = wp.media.string.props( display, obj_attachment );

options = {

id: obj_attachment.id,

post_content: obj_attachment.description,

post_excerpt: caption

};

if ( display.linkUrl )

options.url = display.linkUrl;

if ( 'image' === obj_attachment.type ) {

html = wp.media.string.image( display );

_.each({

align: 'align',

size: 'image-size',

alt: 'image_alt'

}, function( option, prop ) {

if ( display[ prop ] )

options[ option ] = display[ prop ];

});

} else if ( 'video' === obj_attachment.type ) {

html = wp.media.string.video( display, obj_attachment );

} else if ( 'audio' === obj_attachment.type ) {

html = wp.media.string.audio( display, obj_attachment );

} else {

html = wp.media.string.link( display );

options.post_title = display.title;

}

//attach info to attachment.attributes object

attachment.attributes['nonce'] = wp.media.view.settings.nonce.sendToEditor;

attachment.attributes['attachment'] = options;

attachment.attributes['html'] = html;

attachment.attributes['post_id'] = wp.media.view.settings.post.id;

//do what ever you like to use it

//in my case, I update the previous image with new image

//#image-sizing-chart-url is an <img/> tag

jQuery('#image-sizing-chart-url').attr('href', attachment.attributes.sizes.large.url);

jQuery('#image-sizing-chart').attr('src', attachment.attributes.sizes.thumbnail.url);

jQuery('#image-sizing-chart').attr('width', 150);

jQuery('#image-sizing-chart').attr('height', 150);

jQuery('#image-sizing-chart-id').attr('value', attachment.attributes.id);

});

//now open the popup

frame.open();

});//click

});//event listener

})(); //dom ready then execute

2) Enqueue the script

<?php
add_action( 'admin_enqueue_scripts', 'custom_media_modal_scripts', 20 );


function custom_media_modal_scripts(){
    //I name my script as media.js
    wp_register_script( 'custom-media-modal-script', plugins_url() . '<location to your javascript file>/js/media.js', array( 'jquery', 'editor', 'media-upload' ), '1.0.0', true );
    wp_enqueue_script( 'custom-media-modal-script' );
}
?>

<?php

add_action( 'admin_enqueue_scripts', 'custom_media_modal_scripts', 20 );

function custom_media_modal_scripts(){

//I name my script as media.js

wp_register_script( 'custom-media-modal-script', plugins_url() . '<location to your javascript file>/js/media.js', array( 'jquery', 'editor', 'media-upload' ), '1.0.0', true );

wp_enqueue_script( 'custom-media-modal-script' );

}

3) Add this PHP code to your plugin

<?php

//can ignore this, as this is standard way to insert meta box in a post type
add_action("add_meta_boxes", "add_sizing_chart_meta_box");

//can ignore this, as this is standard way to insert meta box in a post type
function add_sizing_chart_meta_box(){
    add_meta_box("catalogue-sizing-chart-meta-box", "Sizing Chart", "sizing_chart_meta_box_markup", "hdf_catalogue");//, "side", "high", null); 
}


function sizing_chart_meta_box_markup(){
    //the Add Media button
    echo '<button type="button" id="media-handler" class="button"><span class="wp-media-buttons-icon"></span> Add Media</button>';
  
    //hidden input to store the selected image ID
    echo '<input type="hidden" id="image-sizing-chart-id" name="image-sizing-chart-id" value="0" />';

    //the <img> tag where the selected photo will be displayed
    echo '<img src="" id="image-sizing-chart" width="0" height="0" />'; 
}
?>

<?php

//can ignore this, as this is standard way to insert meta box in a post type

add_action("add_meta_boxes", "add_sizing_chart_meta_box");

//can ignore this, as this is standard way to insert meta box in a post type

function add_sizing_chart_meta_box(){

add_meta_box("catalogue-sizing-chart-meta-box", "Sizing Chart", "sizing_chart_meta_box_markup", "hdf_catalogue");//, "side", "high", null);

}

function sizing_chart_meta_box_markup(){

//the Add Media button

echo '<button type="button" id="media-handler" class="button"><span class="wp-media-buttons-icon"></span> Add Media</button>';

//hidden input to store the selected image ID

echo '<input type="hidden" id="image-sizing-chart-id" name="image-sizing-chart-id" value="0" />';

//the <img> tag where the selected photo will be displayed

echo '<img src="" id="image-sizing-chart" width="0" height="0" />';

}

Code Explanation

All the codes are self explanatory and with comments. I just want to highlight which code you can change the title of the media screen.

wordpress - wp media change its default title — wordpress – wp media change its default title

var insertImage = wp.media.controller.Library.extend({
                defaults :  _.defaults({
                        id:        'insert-image',
                        title:      'Insert Sizing Chart', //<< will change the media title screen
                        allowLocalEdits: true,
                        displaySettings: true,
                        displayUserSettings: true,
                        multiple : true,
                        type : 'image'//audio, video, application/pdf, ... etc
                }, wp.media.controller.Library.prototype.defaults )
            });

var insertImage = wp.media.controller.Library.extend({

defaults : _.defaults({

id: 'insert-image',

title: 'Insert Sizing Chart', //<< will change the media title screen

allowLocalEdits: true,

displaySettings: true,

displayUserSettings: true,

multiple : true,

type : 'image'//audio, video, application/pdf, ... etc

}, wp.media.controller.Library.prototype.defaults )

});

References:

https://stackoverflow.com/questions/21540951/custom-wp-media-with-arguments-support

Google reCaptcha v2 Doesn’t Work using PHP on my Website

My website is a WordPress website. I wanted to create a form with a reCaptcha protection using Google reCaptcha v2 (tick box). Surprisingly it doesn’t work even though it works on my other website using same PHP code.

After Ticking the reCaptcha

It doesn’t work if use file_get_contents

$data = array('secret' => 'your-secret', 'response' => $_POST['g-recaptcha-response']);

$url = 'https://www.google.com/recaptcha/api/siteverify?secret='
               .$data['secret'] . '&response=' . $data['response'];
$result = file_get_contents($url);
$result = json_decode($result);


if(!$result->success):
 echo 'error';
 return;
endif;

echo 'success';

$data = array('secret' => 'your-secret', 'response' => $_POST['g-recaptcha-response']);

$url = 'https://www.google.com/recaptcha/api/siteverify?secret='

.$data['secret'] . '&response=' . $data['response'];

$result = file_get_contents($url);

$result = json_decode($result);

if(!$result->success):

echo 'error';

return;

endif;

echo 'success';

Google reCaptcha keeps sending me error.

It works if using curl

$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array('secret' => 'your secret key', 'response' => $_POST['g-recaptcha-response']);

$verify = curl_init();
curl_setopt($verify, CURLOPT_URL, $url);
curl_setopt($verify, CURLOPT_POST, true);
curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($verify);

$responseData = json_decode($response);
if($responseData->success):
 // your success code goes here
// echo 'success';
     return true;
                  
     else:
        // return error to user; they did not pass
        // echo 'fail';

        return false;
endif;

$url = 'https://www.google.com/recaptcha/api/siteverify';

$data = array('secret' => 'your secret key', 'response' => $_POST['g-recaptcha-response']);

$verify = curl_init();

curl_setopt($verify, CURLOPT_URL, $url);

curl_setopt($verify, CURLOPT_POST, true);

curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));

curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($verify);

$responseData = json_decode($response);

if($responseData->success):

// your success code goes here

// echo 'success';

return true;

else:

// return error to user; they did not pass

// echo 'fail';

return false;

endif;

PHP is not running on MacOS Monterey on Apple Macbook Pro M1

PHP is removed when I upgraded my Macbook Pro M1 from Big Sur to Monterey. Apache web server is still running though.

This solution doesn’t work! I blog it as reference for others that it doesn’t work so they can try another solution.

I’m still figuring it out. 🙂

My phpMyAdmin is showing its PHP Code

phpMyAdmin shown in plaintext in macos monterey

Install Rosetta2

/usr/sbin/softwareupdate --install-rosetta --agree-to-license

1	/usr/sbin/softwareupdate --install-rosetta --agree-to-license

Install PHP

arch -x86_64 brew install php@8.0

1	arch -x86_64 brew install php@8.0

Link the PHP

brew link php

1	brew link php

Check if PHP is installed

php -v

php -v

if correctly installed, you will see

PHP 8.0.13 (cli) (built: Nov 19 2021 09:05:44) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.13, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.13, Copyright (c), by Zend Technologies

PHP 8.0.13 (cli) (built: Nov 19 2021 09:05:44) ( NTS )

Zend Engine v4.0.13, Copyright (c) Zend Technologies

with Zend OPcache v8.0.13, Copyright (c), by Zend Technologies

Location of php.ini

 /usr/local/etc/php/8.0/

1	/usr/local/etc/php/8.0/

Edit Apache httpd.conf

nano /etc/apache2/httpd.conf

1	nano /etc/apache2/httpd.conf

Change These Settings inside httpd.conf

# Apache stops working when load php module. If comment the php module it 
# works again.
# I tried load 2 php module which the path n file exists but still fail
LoadModule php_module /usr/local/opt/php/lib/httpd/modules/libphp.so
# LoadModule php_module /usr/local/opt/php@8.0/lib/httpd/modules/libphp.so

<FilesMatch \.php$>
        SetHandler application/x-httpd-php
</FilesMatch>

<IfModule dir_module>
    DirectoryIndex index.php index.html
</IfModule>

# Apache stops working when load php module. If comment the php module it

# works again.

# I tried load 2 php module which the path n file exists but still fail

LoadModule php_module /usr/local/opt/php/lib/httpd/modules/libphp.so

# LoadModule php_module /usr/local/opt/php@8.0/lib/httpd/modules/libphp.so

SetHandler application/x-httpd-php

</FilesMatch>

DirectoryIndex index.php index.html

</IfModule>

References:

https://laracasts.com/discuss/channels/servers/php-shown-as-plaintext-mac-monterey

https://getgrav.org/blog/macos-monterey-apache-multiple-php-versions

https://stackoverflow.com/questions/64963370/error-cannot-install-in-homebrew-on-arm-processor-in-intel-default-prefix-usr

WordPress How To Change Page Title Programmatically

If you want to change your page title dynamically which change the title tag <title>, check whether your theme has this code under functions.php

/*
 * Let WordPress manage the document title.
 * By adding theme support, we declare that this theme does not use a
 * hard-coded <title> tag in the document head, and expect WordPress to
 * provide it for us.
 */
add_theme_support( 'title-tag' );

* Let WordPress manage the document title.

* By adding theme support, we declare that this theme does not use a

* hard-coded <title> tag in the document head, and expect WordPress to

* provide it for us.

add_theme_support( 'title-tag' );

If yes, if you want to change the page title dynamically, you must call below filter.

add_filter( 'pre_get_document_title', 'change_browser_page_title');


function change_browser_page_title () {
     return "Custom title";
}

add_filter( 'pre_get_document_title', 'change_browser_page_title');

function change_browser_page_title () {

return "Custom title";

}

Check that your theme header.php doesn’t contain any title tag. It only contains wp_head()

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<?php wp_head(); ?>
</head>

<head>

<?php wp_head(); ?>

</head>

I spent so much time finding this solution, maybe I didn’t typed the right keywords in search engine.

WordPress media_handle_sideload error message of Specified file failed upload test.

I got error “Specified file failed upload test.” when I try to upload image file using media_handle_sideload(). It took me several hours just to solve this. Haha

My HTML Form

<form class="row g-3 needs-validation" action="" method="post" enctype="multipart/form-data">< 
    <input type="file" class="form-control" name="filename">
    <button type="submit" class="btn btn-primary">Save</button>>
</form>

<form class="row g-3 needs-validation" action="" method="post" enctype="multipart/form-data"><

</form>

My PHP

$media_id = media_handle_sideload($_FILES, 0, 'file description');

1	$media_id = media_handle_sideload($_FILES, 0, 'file description');

The error is not really verbose, it should say empty file found rather then failed test. My mistake I forgot to put the index ‘filename’ as in my form.

Solution

$media_id = media_handle_sideload($_FILES['filename'], 0, 'file description');

1	$media_id = media_handle_sideload($_FILES['filename'], 0, 'file description');

WordPress wp_title Hook Filter Not Working

When I use wp_title filter hook, the title on the browser doesn’t change. To solve this ensure at your theme header.php, there is wp_title() at the title tag.

<title><?php wp_title(); ?></title>
<?php wp_head(); ?>

1 2	<title><?php wp_title(); ?></title> <?php wp_head(); ?>

Then you can use the wp_title filter.

add_filter( 'wp_title', 'wpdocs_filter_wp_title');

function wpdocs_filter_wp_title( $title ) {
    return 'prefix '.$title.' suffix';
}

add_filter( 'wp_title', 'wpdocs_filter_wp_title');

function wpdocs_filter_wp_title( $title ) {

return 'prefix '.$title.' suffix';

}

Bootstrap version 5 Text On Image When Hover or Static Text

I couldn’t find an easy tutorial how to do text on image for Bootstrap version 5 when you mouse hover an image or a static text on the image.
So I have to try few solutions before get it right.

The solution is using purely CSS without any Javascript

The CSS

.text-on-image {
    position: relative;
}

.text {
    position: absolute;   
    bottom: 0;
    left: 0;
    display: none;
}

.text-active{
    position: absolute;   
    bottom: 0;
    left: 0;
    display: block;
    background: white;
    width: 100%;
    height: 20%;
}

.text-on-image:hover .text {
    display: block;
    background: blue;
    width: 100%;
    height: 20%;
}

.text-on-image {

position: relative;

}

.text {

position: absolute;

bottom: 0;

left: 0;

display: none;

}

.text-active{

position: absolute;

bottom: 0;

left: 0;

display: block;

background: white;

width: 100%;

height: 20%;

}

.text-on-image:hover .text {

display: block;

background: blue;

width: 100%;

height: 20%;

}

How To Use It

Wrap the image in a div with class=”text-on-image”
Under the div wrapper,include a text div with class=”text”
You can add link or button

Demo on JSFiddle

Macbook M1 MacOS Big Sur Error MySQL PhpMyAdmin When Login

I login to MySQL using phpMyAdmin with root account and it produced this error.

The server requested authentication method unknown to the client
mysqli_real_connect(): The server requested authentication method unknown to the client [caching_sha2_password]
mysqli_real_connect(): (HY000/2054): The server requested authentication method unknown to the client

The server requested authentication method unknown to the client

mysqli_real_connect(): The server requested authentication method unknown to the client [caching_sha2_password]

mysqli_real_connect(): (HY000/2054): The server requested authentication method unknown to the client

Login root via terminal

I was able to login using my root password means something configuration is not correct.

When I googled, I found 2 solutions. I tried the first one but fail. So I documented the one that works with Macbook M1 MacOS Big Sur.

Update root Password via Terminal

mysql -u root -p

mysql&gt; ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'YouCanUseBackYourPassword';

mysql -u root -p

mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'YouCanUseBackYourPassword';

Login Again At Your phpMyAdmin

It should work by now using root and the updated password.

WordPress How To Get Variable from Rewrite Rules

I was scratching my head on how to get the variable from WordPress rewrite rules. In one of Stackoverflow post, it was mentioned we could use $_GET and in some posts proposed to use get_query_var() but when I tried both were emptied.

echo 'my var '.$_GET['myvariablename'];

//return empty value

echo 'my var '.$_GET['myvariablename'];

//return empty value

The Correct Way To get Get Variable from Rewrite Rules

But some conditions must be fulfilled. Please read on.

get_query_var('myvariablename');

1	get_query_var('myvariablename');

If Using get_query_var is still Empty means you use non standard variable name

Here is the list of standard query vars that you can use.

Register Your Variable Name

If you use your custom variable, you must add the variable as below.

add_filter( 'query_vars', function add_query_vars($qvars){
		$qvars[] = "myvariablename";} );

1 2	add_filter( 'query_vars', function add_query_vars($qvars){ $qvars[] = "myvariablename";} );

Ensure Your Regex Has ^ at the beginning and $ at the end

If not, WordPress standard rewrite rules will be executed first and you can ‘t get your variable value.

add_rewrite_rule('^jemputan-kahwin/([-a-z0-9]+)/?$',
 'index.php?pagename=jemputan-kahwin&amp;advertiser_slug=$matches[1]',
  'top');

add_rewrite_rule('^jemputan-kahwin/([-a-z0-9]+)/?$',

'index.php?pagename=jemputan-kahwin&advertiser_slug=$matches[1]',

'top');

The Full Code

Make sure you press save at Settings -> Permalinks.

function add_rewrite_rules(){
   add_rewrite_rule('^jemputan-kahwin/([-a-z0-9]+)/?$',
  'index.php?pagename=jemputan-kahwin&amp;advertiser_slug=$matches[1]',
  'top');
}

add_action( 'init', 'add_rewrite_rules'), 0 );

add_filter( 'query_vars', function add_query_vars($qvars){
		$qvars[] = "myvariablename";} );

function add_rewrite_rules(){

add_rewrite_rule('^jemputan-kahwin/([-a-z0-9]+)/?$',

'index.php?pagename=jemputan-kahwin&advertiser_slug=$matches[1]',

'top');

}

add_action( 'init', 'add_rewrite_rules'), 0 );

add_filter( 'query_vars', function add_query_vars($qvars){

$qvars[] = "myvariablename";} );