Posts

How to style style ordered list numbers?

Image
Today I would like to show how to add background-color, border-radius and color to ordered list. if you make your look at nice on your website so it easy way to to like below: 1. HTML <ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> 1. CSS <style>     body { counter-reset: item; } ol { list-style: none; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; } </style> Working Demo

Fixed FTP credentials for WordPress to connect to my local server

Image
I try to update WordPress or download plugins in I am directed to a page asking for the following information: Connection Information To perform the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not remember your credentials, you should contact your web host. Here is solution how to fix it define('FS_METHOD','direct'); to wp-config.php

WordPress: Fixed the Exceeds the Maximum Upload Error

Some host set the default upload size for WordPress to 2MB which is extremely low. This can cause an error when you try to upload files that are larger than this size.  After you locate the php.ini file you just need to change two values. Search for these two parameters below and set the value to be 32M and save. upload_max_filesize = 32M post_max_size = 32M

Creating a sticky header bar using jQuery

Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport. This tutorial show you sample code jQuery create Sticky Header. 1.HTML <div class="wrapper">     <div class="header_placeholder"></div>     <header id="header"></header> </div> 2. CSS <style> #header {     min-height: 85px;     background-color: #fff;     border-bottom: 8px solid #005bac;     position: relative; } #header .is-sticky {     position: fixed;     top: 0;     left: 0;     width: 100%;     z-index: 100; } </style> (function(){ var stickyHeader = { onReady: function () { this.doScroll(); }, doScroll:function() { $(window).scroll(function () { stickyHeader.doSticky(); }); }...

Custom Excerpt Function WordPress

By default WordPress excerpts are set to 55 words and there is an  excerpt_length filter   which allows you to change this default value to your length of choice. But what if you wanted a different excerpt length on your post type or somewhere in page you need create custom function for set limit. function get_excerpt($limit) { $excerpt = explode(' ', get_the_excerpt(), $limit); if (count($excerpt)>=$limit) { array_pop($excerpt); $excerpt = implode(" ",$excerpt).'...'; } else { $excerpt = implode(" ",$excerpt); } $excerpt = preg_replace('`[[^]]*]`','',$excerpt); return $excerpt; } function get_content($limit) { $content = explode(' ', get_the_content(), $limit); if (count($content)>=$limit) { array_pop($content); $content = implode(" ",$content).'...'; } else { $content = implode(" ",$content); } $content = preg_replace('/[.+]/','', $content);...

Hiding the Spinner arrow key on Input Type Number on Firefox and Chrome

Firefox input[type=number] {-moz-appearance: textfield;} Chrome ::-webkit-inner-spin-button { -webkit-appearance: none;margin:0;} ::-webkit-outer-spin-button { -webkit-appearance: none;;margin:0;}

Display custom fields on order details page in Woocommerce

You can use WordPress function " get_post_meta " to echo out your custom field in "order-details.php" template. <?php echo get_post_meta( $order->id, 'custom-field-name', true ); ?>