Pankaj Pawar

CodeIgniter, htaccess, index.php, mod rewrite rule, SEO, url rewrite rule

MySQL Find and Replace text in the entire table

.htaccess

mod_expires

mod_gzip

mod_rewrite

Optimize

page speed

rewrite

WordPress

We all knows we need seo freindly urls for better page ranking in search engine. search engine always try to searve good and accurate content to user which user is searching for.



when you are trying to remove some part from url, what you will exactlly do?



when you are try to remove&nbsp;index.php&nbsp;from url, you are not exactly remove them from from url, you are just hide them by using mod rewrite rules or you will say url rewriting rules.



Here is one example of url rewriting using .htaccess in codeigniter, .htaccess file you need to add or you will find in the root directory of codeigniter setup.



In CI by default, the index.php file will be included in your URLs:



<pre class="wp-block-preformatted">example.com/&lt;b>index.php&lt;/b>/news/article/my_article</pre>



You can easily remove this from url by using a .htaccess file with some simple rules. Here is an example of such a file, using the “negative” method in which everything is redirected except the specified items:



<pre class="wp-block-preformatted">RewriteEngine on RewriteCond $1 !^(index\.php|images|robots\.txt) RewriteRule ^(.*)$ /index.php/$1 [L]</pre>



In the above example, any HTTP request other than those for index.php, images, and robots.txt is treated as a request for your index.php file.



i will give here another example, if you have codeigniter setup in sub-directory under root domain then you need to set&nbsp;<code>RewriteBase</code>&nbsp;path.



Rewrite base path is the path of your sub dirctory from root domain to codeigniter base(root) directory.



<pre class="wp-block-preformatted">&lt;IfModule mod_rewrite.c> RewriteEngine On # !IMPORTANT! Set your RewriteBase here and don't forget trailing and leading # slashes. # If your page resides at # http://www.example.com/mypage/under/sub/directory/ # then use # RewriteBase /mypage/under/sub/directory/ RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php?/$1 [L] &lt;/IfModule> &lt;IfModule !mod_rewrite.c> # If we don't have mod_rewrite installed, all 404's # can be sent to index.php, and everything works as normal. ErrorDocument 404 /index.php &lt;/IfModule></pre>



above mention two htaccess file code you will use to remove index.php from url, some other configuration also needs in config.php file inside application/config folder.



1. Open&nbsp;<code>application/config/config.php</code>&nbsp;from your codeigniter setup. 2. Search for&nbsp;<code>$config['index_page']&nbsp;=&nbsp;'index.php';</code>&nbsp;and remove&nbsp;index.php&nbsp;from that syntax. 3. Search for&nbsp;<code>$config['uri_protocol']&nbsp;=&nbsp;'';</code>&nbsp;and add uri protocol&nbsp;AUTO.



thats it after this small changes you will access your controllers directly without using index.php.



ex.&nbsp;<code>http://example.com/news/article/my_article</code>

Remove index.php from url using .htaccess file in codeIgniter

In most of MySQL&nbsp;task we need to find and replace text with another one maybe that will be&nbsp;URL or any string in your database. You will use mysql find and replace&nbsp;query while you are going to move websites from one domain to another domain or when you want to replace specific&nbsp;text with another one.



Here I am going to mention MySQL find and replace query to replace text in single table.



<pre class="wp-block-preformatted">UPDATE `table_name` SET `table_column_name` = replace(same_table_column_name, 'unwanted_text', 'wanted_text')</pre>



If you want to find and replace string in MySQL&nbsp;database, i will suggest you to download and use Notepad++ or your fav. editor to find and replace string this would be a better than running query.



Note: Before running find and replace query take a backup of your database.

MySQL

<h3 class="wp-block-heading">Why we need wildcard sub-domain and what is the wildcard sub-domain?</h3>



When you are creating multiple network site or you will allow user to create own site for them on your domain, for this automation process you need Wildcard sub-domain.



When you have fixed number of sub-domain that time you really don’t need to create Wildcard Sub-domain. Wildcard Sub-domain is not related to WordPress only, when you are develop any system base on any&nbsp;platform or framework&nbsp;and you want huge number of sub-domains that time you will use Wildcard Sub-domain.



Wildcard Sub-domain is just like&nbsp;<code>*.yourdomain.com</code>&nbsp;When you will try to access any Sub-domain on&nbsp;<code>yourdomain.com</code>&nbsp;that time you are redirected to your main domain directory or to the Document Root you have choose at the time of creating Wildcard Sub-domain.



<h4 class="wp-block-heading">To create wildcard sub-domain following the steps:</h4>



<ol class="wp-block-list">
<li>Login to your hosting control panel.</li>



<li>Find for Sub-domain under Domains section and click on that.</li>



<li>Enter the <code>*</code> in Subdomain text field.</li>



<li>Choose your domain.</li>



<li>Select your Document Root where you have install WordPress or Your application where you want to point Sub-domain.</li>



<li>Click on create.</li>
</ol>



That’s it you have created wildcard Sub-domain.



<h4 class="wp-block-heading">Video demonstration of how to create wildcard sub-domain:</h4>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/r4YEb7JgDkg
</div></figure>

DevOps

Create Wildcard Sub-domain from your hosting panel / cPanel

How to improve page speed or page loading time? This question lots of time ask and search online. Reason behind this question is, today we have used lot’s type of web font, different type CSS to look and feel and in now days CSS Transitions on your website and the vast area cover by java script for animation and other use.



In this situation we can not remove Java Script, CSS or Image from our website. We need to find some solution on this problem. We will solve this problem by caching your CSS, Java Script or images which is not change regularly.



We need to remember When you are writing content or adding images in content, images must be minifyed and content is not more than 250KB as per SEO rules.



Now i will have some code to leverage cache and minify your HTML on the fly.



Keep maximum your Java Script, CSS, Images expiry time this will effect on you Page Load Speed (PageSpeed) and increase by 20%, But keep in mind your uploaded images is always compressed and its not more than 120 kb or 180 kb.



<pre class="wp-block-preformatted">## EXPIRES CACHING ## &lt;IfModule mod_expires.c&gt; ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" &lt;/IfModule&gt; ## EXPIRES CACHING ## &lt;FilesMatch "\\.(js|css|html|htm|php|xml)$"&gt; SetOutputFilter DEFLATE &lt;/FilesMatch&gt; &lt;IfModule mod_gzip.c&gt; mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* &lt;/IfModule&gt;</pre>



Above code will affect on your Java Script, CSS, Image, PHP and on HTML and increase you page speed.



Now Below code is my favorite it will compress your HTML and decrease HTML page loading time.



<pre class="wp-block-preformatted">function sanitize_output($buffer) { $search = array( '/\&amp;gt;[^\S ]+/s', // strip whitespaces after tags, except space '/[^\S ]+\&amp;lt;/s', // strip whitespaces before tags, except space '/(\s)+/s' // shorten multiple whitespace sequences ); $replace = array( '&amp;gt;', '&amp;lt;', '\\1' ); $buffer = preg_replace($search, $replace, $buffer); return $buffer; } ob_start("sanitize_output");</pre>



Place above code in your index.php or the root PHP file which run first when your template or page will be load.

To list hidden files and directories in the current directory in most Unix-based systems (like Linux and macOS), you can use the following command in your terminal:



<pre class="wp-block-code"><code>&#91;root@example ~]# cd /var/www
&#91;root@example /var/www]# ls -lap | grep -v / | egrep "^."</code></pre>



If you want to list only hidden directory/folder then run:



<pre class="wp-block-code"><code>&#91;root@example ~]# cd /var/www
&#91;root@example /var/www]# ls -lap | egrep "^..*/$"</code></pre>



This option shows hidden files along with detailed information such as permissions, owner, file size, and modification date.

Linux

Command to List Hidden Directory And Files In Current Directory – linux

jQuery lazy load images is the opposite of pre-loading images. Lazy load delays loading of images in a long web page. pre-loading images on long web page will take too much time to load web page, instead of this we use lazy load on long web page.



Using lazy load images make web page load faster. lazy load jQuery detect which images is in device view port and load only that images. images outside view port wont be loaded before user scroll to them. some time it will reduce server load.



Here i am going to mention some&nbsp;java script and jQuery to lazy load images on web page:



<h2 class="wp-block-heading">Lazy Load Image Using Java Script</h2>



<pre class="wp-block-preformatted">&lt;img data-src="images/example.jpg" alt="" /&gt; &lt;script&gt; //these handlers will be removed once the images have loaded window.addEventListener("DOMContentLoaded", lazyLoadImages); window.addEventListener("load", lazyLoadImages); window.addEventListener("resize", lazyLoadImages); window.addEventListener("scroll", lazyLoadImages); function lazyLoadImages() { var images = document.querySelectorAll("#main-wrapper img[data-src]"), item; // load images that have entered the viewport [].forEach.call(images, function (item) { if (isElementInViewport(item)) { item.setAttribute("src",item.getAttribute("data-src")); item.removeAttribute("data-src") } }) // if all the images are loaded, stop calling the handler if (images.length == 0) { window.removeEventListener("DOMContentLoaded", lazyLoadImages); window.removeEventListener("load", lazyLoadImages); window.removeEventListener("resize", lazyLoadImages); window.removeEventListener("scroll", lazyLoadImages); } } &lt;/script&gt;</pre>



above script will detect the image tag with&nbsp;<code>data-src</code>&nbsp;attribute inside the&nbsp;<code>#main-wrapper</code>&nbsp;and convert it to lazy load images. If you notice above java script will trigger when your page will finished loading,&nbsp;resize the page also on&nbsp;scroll the web page. script will add src attribute by taking the image source url from data-src and remove data-src attribute.



<h2 class="wp-block-heading">Lazy Load Image Using jQuery</h2>



Here we have use jQuery with the same concept above we have use in java script.



<pre class="wp-block-preformatted">$(window).on('DOMContentLoaded load resize scroll', function () {; var images = $("#main-wrapper img[data-src]"); // load images that have entered the viewport $(images).each(function (index) { if (isElementInViewport(this)) { $(this).attr("src",$(this).attr("data-src")); $(this).removeAttr("data-src"); } }) // if all the images are loaded, stop calling the handler if (images.length == 0) { $(window).off('DOMContentLoaded load resize scroll') } }) function isElementInViewport (el) { var rect = el.getBoundingClientRect(); return ( rect.top &gt;= 0 &amp;&amp; rect.left &gt;= 0 &amp;&amp; rect.bottom &lt;= $(window).height() &amp;&amp; rect.right &lt;= $(window).width() ); }</pre>



<h4 class="wp-block-heading">You will also get free jQuery library online for lazy load images.</h4>



<ol class="wp-block-list">
<li><a href="https://web.archive.org/web/20170617031420/http://sharinginfo.in/lazy-load-images-using-jquery/#jquery-lazy-load">jQuery Lazy Load</a></li>



<li><a href="https://web.archive.org/web/20170617031420/http://sharinginfo.in/lazy-load-images-using-jquery/#jquery-unveil-js">jQuery Unveil&nbsp;Js</a></li>



<li><a href="https://web.archive.org/web/20170617031420/http://sharinginfo.in/lazy-load-images-using-jquery/#jquery-blazy-js">jQuery Blazy Js</a></li>



<li><a href="https://web.archive.org/web/20170617031420/http://sharinginfo.in/lazy-load-images-using-jquery/#jquery-lazy-load-xt">jQuery Lazy Load XT</a></li>
</ol>



<h3 class="wp-block-heading">jQuery Lazy Load</h3>



Lazy load&nbsp;script depend on jQuery so you need to first add jQuery and then lazy load images script in your web page footer area or at the end of file.



After this you must need to alter img tag src attribute with data-original and add img path in data-original attribute.



<pre class="wp-block-preformatted">&lt;img class="lazy" data-original="img/example.jpg" width="640" height="480"&gt;</pre>



You will init lazy load image jQuery by



<pre class="wp-block-preformatted">$(function() { $("img.lazy").lazyload(); });</pre>



some customize option available for lazy load jquery plugin.



Threshold



Threshold option use to pre-load image before they appear on screen .



<pre class="wp-block-preformatted">$("img.lazy").lazyload({ threshold : 200 });</pre>



Events



In lazy load script two events available&nbsp;<code>click</code>&nbsp;and&nbsp;<code>mouseover</code>. &nbsp;you will also create the custom events to call lazy load.



<pre class="wp-block-preformatted">$("img.lazy").lazyload({ event : "click" });</pre>



events allow you to override default settings of lazy load initialization, lazy load default perform when user scroll window. if you use click event this will override default scroll to click event when you will click, images will be load.



<pre class="wp-block-preformatted">$(function() { $("img.lazy").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000); });</pre>



Effects



In default script they have just call&nbsp;<code>show()</code>&nbsp;function, this event you will be override by calling effect option.



<pre class="wp-block-preformatted">$("img.lazy").lazyload({ effect : "fadeIn" });</pre>



for more information and option please visit:&nbsp;<a href="https://web.archive.org/web/20170617031420/http://www.appelsiini.net/projects/lazyload">appelsiini jQeury lazy load</a>.



<h3 class="wp-block-heading">jQuery Unveil Js</h3>



jQuery Unveil lazy load have some options like as jQuery lazy load plugin. unveil lazy load have additional option for retina display, you can also load high definition images on retina display different form normal images.



In unveil jQuery plugin you will mention retina img by passing data-src-retina attribute to img tag.



you will initialize unveil script by calling



<pre class="wp-block-preformatted">$(document).ready(function() { $("img").unveil(); });</pre>



You can see the options available for unveil lazy load on:&nbsp;<a href="https://web.archive.org/web/20170617031420/http://luis-almeida.github.io/unveil/">Unveil Lazy Load images</a>.



<h3 class="wp-block-heading">jQuery Lazy Load XT</h3>



Initialization and alter attribute of img tag is the same as jQuery lazy load images plugin.



The&nbsp;most important and interesting part of jquery lazy load xt is, plugin not only limited to img tag, you will also use this jquery to lazy load your&nbsp;<code>&lt;</code>audio&gt;,&nbsp;<code>&lt;embed&gt;</code>,&nbsp;<code>&lt;frame&gt;</code>,&nbsp;<code>&lt;iframe&gt;</code>,&nbsp;<code>&lt;img&gt;</code>,&nbsp;<code>&lt;video&gt;</code>,&nbsp;<code>&lt;input&nbsp;type="image"&gt;</code>&nbsp;tags.



there is a lots of customization option available with animation effects would you like to add into your web page.



read more about jQuery lazy load XT on:&nbsp;<a href="https://web.archive.org/web/20170617031420/https://github.com/ressio/lazy-load-xt">Ressio&nbsp;@&nbsp;Github</a>

WordPress .htaccess file – SEO optimized

CodeIgniter, htaccess, index.php, mod rewrite rule, SEO, url rewrite rule

MySQL Find and Replace text in the entire table

Recommended from Sharing Info

remove-index-php-from-url-using-htaccess-file-in-codeigniter

mysql-find-and-replace-text-in-the-entire-table

create-wildcard-sub-domain-from-your-hosting-panel-cpanel

codeigniter-htaccess-index-php-mod-rewrite-rule-seo-url-rewrite-rule

command-to-list-hidden-directory-and-files-in-current-directory-linux

lazy-load-images-using-jquery