Posts Tagged with
adding search box to header.php We would like to add that search field in the upper right area of the site, so what theme file do you think we might target to make modifications? That’s right, we’ll need to open up the header.php file and figure out a way to add some search functionality. We can do this with the built-in get_search_form() function, and also adding just a bit of CSS styling rules to the style.
How to display a different favicon in dark or light mode ?
I have my Macbook set up to automatically switch between dark and light mode.
I built a new website and I realized that I used a white image as favicon, and in light mode it was almost invisible!
So I started searching for possible ways to add a favicon in dark mode and a different one in light mode.
Using CSS it’s pretty easy to apply changes if the system is in dark mode, using the prefers-color-scheme media feature.
Today I wanted to change images on my website according to the theme chosen. If the user prefer dark mode, dark theme will be enabled but I want to show a dark-mode images instead of the default light-mode ones.
what is lazy-loading Lazy-loading means load this element on demand. We use the lazyloading technique to speed up the web page load time.
using lazyloading with images Sample code for image element with lazy loading enabled.
<img width="" height="" loading="lazy" src="" alt="" /> The loading="lazy" is to load the image on demand. width="200" and height="400" to save the space for the loading image. src="" for the image url. alt="" to give a description for the image for accessibility purposes.
HTML stands for HyperText Markup Language. HTML5 is the fifth version of HTML. HTML is the markup language of the browser. It is the main pillar in the web technology. It structures all the webpages. So it is IMPORTANT!
Minimal Page <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- content here --> </body> </html> Head <head> <title>Title</title> <base href="base-url" /> <link href="style.