tag:blogger.com,1999:blog-36737020478180529622024-03-06T04:21:37.683+05:30Tweaks in WordPressSolution for all WordPress related issuesJitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comBlogger19125tag:blogger.com,1999:blog-3673702047818052962.post-61956734890426826292015-10-08T22:55:00.001+05:302015-10-08T22:55:38.134+05:30Speedup your WordPress site<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
INTRO: WHY SPEED MATTERS </h2>
<div>
<br /></div>
<div>
A faster site will lead to increased revenue, through a combination of improved user retention and better SEO results. </div>
<div>
<br /></div>
<div>
Studies have been performed by many entities including Google, Bing and Yahoo, giving us conclusive evidence that users prefer fast sites. This preference is important enough that speed is now a relevant factor when Google ranks sites in their search results. </div>
<div>
<br /></div>
<div>
WordPress provides some particular challenges when it comes to speed. WordPress is dynamic, meaning users are regularly contributing content and pages are always changing. For this reason we can not just cache everything and call it a day. We need to get creative. What follows is a comprehensive guide as to how to speed up your WordPress site. If you follow everything in this guide you will see noticeable speed improvements right away. Have fun :)<br />
<br /></div>
<div>
<h2 style="text-align: left;">
1. Server</h2>
<div>
It all starts at the server. Many of the methods we’ll be recommending depend on a good server setup. </div>
<div>
<br /></div>
<div>
Imagine you have a slow computer. You can try optimizing it all day, but the most impactful thing you can do is simply to buy a faster computer. Same with your server. There is no getting around it, your website is hosted on physical hardware and it is limited by the same constraints as a computer, including processor speed, memory, and other factors. If you’re using cheap shared hosting, your site is going to be slow no matter what you do. If you move your WordPress site to a powerful, dedicated server, you will have fixed half of your speed issues with just this one change. </div>
<div>
<br /></div>
<div>
So how do you choose a server company? Below are our recommendations, depending on your needs.<br />
<br /></div>
<h3 style="text-align: left;">
KnownHost </h3>
<div>
<br />
KnownHost offers an ideal balance of speed, price and ease of use, and has worked great hosting. They use managed virtual private servers (VPS) which offer the benefits of a full private server but at a substantially lower price, along with fantastic technical support and virtually 100% up</div>
<div>
time in our experience. </div>
<h3 style="text-align: left;">
<br /></h3>
<h3 style="text-align: left;">
Rackspace </h3>
<div>
<br />
Another popular option is Rackspace. If your primary concern is speed over all else, and you don’t mind a somewhat steep learning curve to get there, Rackspace is an ideal choice. You won’t get much out of the box - no phpMyAdmin, no cPanel, just an empty server that you need to configure. But what you do get is an incredible infrastructure that will scale as you grow, and will be super fast right out the box. They have incredible support as well, both phone and live chat. </div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
WPEngine </h3>
<div>
<br /></div>
<div>
In many ways, WPEngine is the opposite of Rackspace. They don’t let you configure much, in fact their environment is quite restricted. However what they do offer is easy configuration and management. Anyone can figure out their interface, which is designed specifically to host WordPress sites. It’s reasonably fast and the support is good, and they have a terrific daily backup system. If you expect you will need to customize your server setup at all, this is not for you. But if you want a reliable server setup with minimal effort, and support that is specific to WordPress, this may be your best choice. </div>
</div>
<div>
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
2. Object Caching</h2>
<div>
<br /></div>
<h3 style="text-align: left;">
Page Caching vs Object Caching</h3>
<h3 style="text-align: left;">
</h3>
<div>
Due to the dynamic nature of WordPress, page caching of HTML is not possible as it will cause content that is supposed to be updated in real-time to go stale. However we can still cache the PHP that is used to assemble those pages via Object Caching, which will reduce the amount of requests to your server and lead to noticeable gains in performance. Object Caching is built into WordPress, you just need to enable it on your server. </div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
How to enable APC Object Cache</h3>
<div>
<br /></div>
<div>
If you’re on shared hosting this will not be possible, as the change is set across the entire server. You’ll need to follow our advice in the Server section first. </div>
<div>
<br /></div>
<div>
Once you have moved your site to a dedicated server, contact your web host and request that they install the “APC” caching technology on your server. APC stores the cached content in RAM, which is why I recommend at least 2GB of RAM for ideal server performance. Once your web host has confirmed that APC is installed and working, you will then need to enable it for WordPress with a plugin.My recommended method is with the APC Object Cache Backend plugin: </div>
<div>
<a href="https://wordpress.org/plugins/apc/">https://wordpress.org/plugins/apc/</a>.<br />
<br />
This is not a true plugin, but rather a “drop-in” file. As such, you do not actually activate the plugin. You just need to copy the object-cache.php file directly into your /wp-content/ directory. To confirm that it’s working, you can type this into your browser while logged in as a WordPress admin:</div>
<div>
<br /></div>
<div>
<a href="http://www.yourdomain.com/wp-admin/plugins.php?plugin_status=dropins">http://www.YOURDOMAIN.com/wp-admin/plugins.php?plugin_status=dropins</a></div>
<div>
<br /></div>
<div>
It should show APC Object Cache as a drop-in plugin. You should begin seeing performance improvements.<br />
<h2 style="text-align: left;">
<span style="font-size: large;"><br /></span></h2>
<h2 style="text-align: left;">
<span style="font-size: large;">3. Enable GZIP</span></h2>
<div>
<span style="font-size: large;"><br /></span></div>
Your website needs to send files to your visitors’ browsers, and those files can sometimes be large. Using GZIP, you can compress your web pages and assets by as much as 70%, resulting in noticeable speed gains during page load.<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Enabling GZIP is simple. You just need to contact your web host and request that they enable GZIP on your server. Now your web pages will download quickly as compressed files. To confirm GZIP is working correctly, enter your site’s address here: <a href="http://checkgzipcompression.com/">http://checkgzipcompression.com/</a></div>
<h2 style="text-align: left;">
<span style="font-size: large;"><b><br /></b></span></h2>
<h2 style="text-align: left;">
<span style="font-size: large;"><b>4. Content Delivery Network (CDN)</b></span></h2>
<div>
<br /></div>
<h3 style="text-align: left;">
<b>What is a CDN?</b></h3>
<div>
<b><br /></b></div>
A content delivery network (CDN) is a distributed network of servers around the globe that serve your site’s assets, including images, stylesheets, and JavaScript files. You can easily sync WordPress to a CDN so that your site assets are automatically offloaded to the CDN.<br />
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Why use a CDN?</h3>
<div>
<br /></div>
<div style="text-align: left;">
When someone loads a page from your website, the majority of the browser re-quests are for content assets that are loading directly from your server, and with a moderate amount of traffic they will queue up and slow down your site’s per-formance. Additionally, they have to be delivered from your server’s physical lo-cation to your visitor, and if your server is in Los Angeles and your visitor is in the Philippines for example, this will cause a delay. With a CDN your visitor may get most of your site’s files delivered from a server located in nearby Manila, result-ing in a noticeable speed improvement.</div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Setting up a CDN with WordPress</h3>
<div>
<br /></div>
The first step is to purchase your CDN package. I recommend using MaxCDN as they are reliable, inexpensive, and easily integrate with several WordPress plug-ins. Some hosts such as Rackspace offer their own CDNs as well. Once you have correctly configured your CDN “zone” make sure to note down the CDN URL.<br />
<br />
Next, download the plugin “CDN Linker” from Github (look for the “Down-load ZIP” button):<br />
<a href="https://github.com/wmark/CDN-Linker">https://github.com/wmark/CDN-Linker</a><br />
<br />
Install and activate the plugin on your website.<br />
<br />
Go to Settings > CDN Linker in your WordPress dashboard. Then add your CDN URL that you noted earlier in the “CDN URL” field. If you’re using MaxCDN, it will look something like this:<br />
<br />
<a href="http://yourzone.youraccount.netdna-cdn.com/">http://yourzone.youraccount.netdna-cdn.com</a><br />
<br />
Save your settings. Your site should now be loading all assets via the CDN. To confirm, you can view your page source in a browser and you should see links (like stylesheets and JavaScript files) using the new CDN URL structure.<br />
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
5. Minify and Com-bine CSS</h2>
<div>
<br /></div>
Your website is likely to be loading many CSS stylesheets, perhaps twenty or more. These come from your theme as well as the plugins you are using. Each stylesheet needs to be downloaded separately by your browser, causing a no-ticeable speed impact. Additionally, the stylesheets contain a lot of empty white-space which contributes to larger files sizes and more work for the browser to read through them.<br />
<br />
Minifying is the process of removing all of the whitespace, leaving you with tiny compressed stylesheets. Then we can combine all of your stylesheets, with the end result being just one compressed stylesheet for the entire website! This will lead to speed improvements, especially noticeable on mobile devices.<br />
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Better WordPress Minify</h3>
</div>
</div>
<div>
<br /></div>
<div>
<div>
With Better WordPress Minify, it is very easy to automate the whole process of minifying and combining CSS files. First, install and activate Better WordPress Minify:</div>
<div>
<br /></div>
<div>
<a href="https://wordpress.org/plugins/bwp-minify/">https://wordpress.org/plugins/bwp-minify/</a></div>
<div>
<br /></div>
<div>
Then go to BWP Minify > General Options. Check the box for “Minify CSS files automatically?” and set “For cache buster, use” to the option “Cache folder’s last modified time” so your compressed stylesheets get regenerated when you update any theme or plugin.</div>
<div>
<br /></div>
<div>
All of your stylesheets should be minified and combined now. To confirm, you can view your page source in a browser and you should see every stylesheet combined into one file. Look for the extension “.CSS”. Click to view the file, and you will see all whitespace has been removed.</div>
</div>
<div>
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
6. Minify and Combine Javascript</h2>
<div>
<br /></div>
<div>
If you read the previous section about CSS, this will be very familiar.</div>
<div>
<br /></div>
<div>
Your website is likely to be loading many JavaScript files, perhaps twenty or more. These come from your theme as well as the plugins you are using. Each script needs to be downloaded separately by your browser, causing a noticeable speed impact. Additionally, the scripts contain a lot of empty whitespace which contributes to larger files sizes and more work for the browser to read through them.</div>
<div>
<br /></div>
<div>
Minifying is the process of removing all of the whitespace, leaving you with tiny compressed Javascript files. Then we can combine all of your scripts, with the end result being just one compressed Javascript file for the entire website! This will lead to speed improvements, especially noticeable on mobile devices. </div>
</div>
<div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Better WordPress Minify</h3>
<div>
<br /></div>
<div>
With Better WordPress Minify, it is very easy to automate the whole process of minifying and combining JavaScript files. First, install and activate Better Word-Press Minify:</div>
<div>
<br /></div>
<div>
<a href="https://wordpress.org/plugins/bwp-minify/">https://wordpress.org/plugins/bwp-minify/</a></div>
<div>
<br /></div>
<div>
Then go to BWP Minify > General Options. Check the box for “Minify JS files automatically?” and set “For cache buster, use” to the option “Cache folder’s last modified time” so your compressed scripts get regenerated when you update any theme or plugin. All of your Javascript files should be minified and combined now. To confirm, you can view your page source in a browser and you should see every script combined into one file. Look for the extension “.js”. Click to view the file, and you will see all whitespace has been removed.</div>
</div>
<div>
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
7. Compress site images</h2>
<div>
<br /></div>
<div>
One thing often overlooked is the size of images uploaded into your media directory, both by admins and the members of your community. If a user uploads a 1GB image to your site, whenever someone views that page they will have to download a 1GB file. And if you have a page with 10 images like this, the page size will get enormous. This can lead to considerable speed delays, especially for mobile devices and slower internet connections.</div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
TinyPNG</h3>
<div>
<br /></div>
<div>
The solution we recommend is TinyPNG: https://tinypng.com/Despite the name, it will actually compress both PNG and JPG file types, often by 70% or more. Even if you compress your images first in Photoshop, you will still see noticeable gains by running it through TinyPNG, with virtually no loss in quality.</div>
</div>
<div>
<div>
<br /></div>
<div>
You can manually upload any image to the service and it will output a com-pressed version for you, but the real magic is in their fantastic WordPress plugin:</div>
<div>
<br /></div>
<div>
<a href="https://wordpress.org/plugins/tiny-compress-images/">https://wordpress.org/plugins/tiny-compress-images/</a></div>
<div>
<br /></div>
<div>
The plugin will retroactively compress your site’s entire media library, and will then automatically compress every new image that is uploaded into it. The catch? You have to pay for the service. The first 500 images per month are free, the next 9,500 are at $0.009 per image, and after that it’s $0.002 per image. Sign up for your API here:</div>
<div>
<br /></div>
<div>
<a href="https://tinypng.com/developers">https://tinypng.com/developers</a></div>
</div>
<div>
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
8. Deactivate slow plugins</h2>
<div>
<br /></div>
<div>
The WordPress ecosystem is enormous and it can be tempting to run every plugin that looks interesting. But this can come at a cost as some plugins will slow down your site. Every plugin is adding more code that must be executed when you load a page.</div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
P3 Plugin Profiler</h3>
<div>
<br /></div>
<div>
Often times it just one plugin, or maybe a couple of plugins that are causing your site to slow down. You will need to diagnose the situation to figure out what is causing the problem. A fast method is just to disable all plugins, and re-enable them one by one until you find an obvious slowdown. However a more sophisticated solution exists. We recommend using the plugin “P3 Plugin Profiler” avail-able here:</div>
<div>
<br /></div>
<div>
<a href="https://wordpress.org/plugins/p3-profiler/">https://wordpress.org/plugins/p3-profiler/</a></div>
</div>
<div>
<br /></div>
<div>
This plugin creates a profile of your plugins’ performance by measuring their impact on your site's load time. Using this, you can narrow down which specific plugins are causing slow load times and remove them. Go to Tools > P3 Plugin Profiler and click “Scan Now”.</div>
<div>
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
9. Clean up your database</h2>
<div>
<br /></div>
<div>
Over time your database can grow to be full of redundant and unused content, which can lead slow PHP queries during page loads. It is possible to maintain a cleaner database using a plugin, which can lead to faster load times both on the front-end and in the WordPress dashboard.</div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
WP Optimize</h3>
<div>
<br /></div>
<div>
We recommend using the plugin “WP Optimize” available here: </div>
<div>
<br /></div>
<div>
<a href="https://word-press.org/plugins/wp-optimize/">https://word-press.org/plugins/wp-optimize/</a></div>
<div>
<br /></div>
<div>
This plugin will clean up your database in various ways. For example, every time you edit a post WordPress saves your edit as a revision. If on average you edit each post 10 times, and your site has 2000 posts, you may actually have 20,000 post revisions in your database. This plugin will remove all of the stale re-visions resulting in a dramatically smaller and more efficient database. It will per-form other various scheduled tasks as well.</div>
</div>
<div>
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
10. Test, Test, Test</h2>
<div>
<br /></div>
<div>
It’s important to test your site speed before and after implementing changes, so you know you’re having a positive impact and not just relying on anecdotal evidence. There are two fantastic, free web tools that you can use to test your site.</div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Google Page Speed Insights</h3>
<div>
<br /></div>
<div>
For figuring out what to optimize, we recommend using Google PagenSpeed In-sights, available here: </div>
<div>
<br /></div>
<div>
<a href="https://developers.google.com/speed/pagespeed/in-sights/">https://developers.google.com/speed/pagespeed/in-sights/</a></div>
<div>
<br /></div>
<div>
Enter your page URL and click “Analyze” and it will score your site and provide suggestions to speed it up. If you’ve followed the rest of this guide, you have already implemented many of the most important suggestions.</div>
</div>
<div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Pingdom Website Speed Test</h3>
<div>
<br /></div>
<div>
For determining your site’s actual page load times, we recommend using the Pingdom Website Speed Test available here: </div>
<div>
<br /></div>
<div>
<a href="http://tools.pingdom.com/">http://tools.pingdom.com</a></div>
<div>
<br /></div>
<div>
Enter your page URL and click “Test Now” and it will display the load time along with a visual waterfall showing which elements of your site are taking the most time to load. There may be a specific resource or two that are contributing to slow load times.</div>
</div>
<div>
<br /></div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.com0tag:blogger.com,1999:blog-3673702047818052962.post-3208651663445958122014-12-22T21:10:00.000+05:302014-12-22T21:33:21.962+05:30Adding a Scroll to Top button<div dir="ltr" style="text-align: left;" trbidi="on">
Scroll-to-top button is a very important part of a website. It prevents users from scrolling once they go to the bottom and want to go to the top. Now-a-days many themes provides this functionality. But if your theme does not provide this functionality then you need to go through the document and add the following codes so that you can add a scroll-to-top button in your site.<br />
<a name='more'></a>It requires File Level customization. So make sure you are using a Child Theme for that.<br />
<br />
You need to go to Appearance > Editor > header.php and add this code above the </head> there:<br />
<br />
<div class="box1" style="height: 390px; width: 710px;">
<script><br />
jQuery(document).ready(function() {<br />
var offset = 220;<br />
var duration = 500;<br />
jQuery(window).scroll(function() {<br />
if (jQuery(this).scrollTop() > offset) {<br />
jQuery('.tiwp-top').fadeIn(duration);<br />
} else {<br />
jQuery('.tiwp-top').fadeOut(duration);<br />
}<br />
}); <br />
jQuery('.tiwp-top').click(function(event) {<br />
event.preventDefault();<br />
jQuery('html, body').animate({scrollTop: 0}, duration);<br />
return false;<br />
})<br />
});<br />
</script></div>
<br />
Then you need to go to your Custom CSS and add this there:<br />
<br />
<div class="box1" style="height: 480px; width: 710px;">
/*-------------Scroll to top-------------*/<br />
<br />
.tiwp-top {<br />
background-color: rgba(41, 178, 107, 0.4);<br />
border-radius: 50px;<br />
bottom: 20px;<br />
color: #000000;<br />
cursor: pointer;<br />
display: none;<br />
font-size: 30px;<br />
font-weight: 700;<br />
height: 50px;<br />
line-height: 55px;<br />
position: fixed;<br />
right: 20px;<br />
text-align: center;<br />
text-decoration: none;<br />
width: 50px;<br />
}<br />
.tiwp-top:hover {<br />
background-color: #D298F9;<br />
}</div>
<br />
Then finally go to Appearance > Editor > footer.php and add the below code there to show the button:<br />
<br />
<div class="box1" style="height: 20px; width: 710px;">
<a href="#" class="tiwp-top">^</a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi32RbuP6IwaEvrwd_zyW2MbYO3V0MV8ImHdmn5Gq1WO-6XmlMVZiYTjqIVxon4K7qXCuKCFprAwKkGgm15zeCVb6Dx45f5H3mgpd8Aauk9Doas8pOzpkho-sffekYXiev_fUJWxAj_O-k/s1600/2014-12-22+21-18-04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi32RbuP6IwaEvrwd_zyW2MbYO3V0MV8ImHdmn5Gq1WO-6XmlMVZiYTjqIVxon4K7qXCuKCFprAwKkGgm15zeCVb6Dx45f5H3mgpd8Aauk9Doas8pOzpkho-sffekYXiev_fUJWxAj_O-k/s1600/2014-12-22+21-18-04.png" height="110" width="320" /></a></div>
<br />
This will add a sweet Scroll-to-top button in your site. You can enjoy with the button.</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-56763453284616620482014-12-19T00:11:00.002+05:302014-12-19T23:28:03.372+05:30Show Sidebar at the top of Content in Mobile Devices<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
If you are using a Responsive theme, then you must be familiar with the stacked layout of your theme in mobile devices starting from iPad and other small devices than that. In smaller devices the Content part displays full width below your header and then the sidebar below that.</div>
<div style="text-align: justify;">
<br />
<a name='more'></a></div>
<div style="text-align: justify;">
Some of you might have an interest for adding the sidebar to the top of the content in the smaller screens so that your audience will not miss some useful things you have for them in the sidebar after reading a long content. So you need them to go through the sidebar first and then the content.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
There is a very easy process you need to follow for doing that. This process requires editing core files. So please make sure to use <a href="http://tweaksinwp.blogspot.in/2014/11/child-themes.html" target="_blank">Child Theme</a> before doing that.</div>
<div style="text-align: justify;">
<br /></div>
<br />
<div style="text-align: justify;">
If you need to do the same for the pages then you need to go to Appearance > Editor > page.php.</div>
<div style="text-align: justify;">
If you need to do the same for the posts then you need to go to Appearance > Editor > single.php. </div>
<div style="text-align: justify;">
If you need to do the same for the categories then you need to go to Appearance > Editor > archive.php/category.php.</div>
<div style="text-align: justify;">
If you need to do the same for the Search Page then you need to go to Appearance > Editor > search.php. </div>
<div style="text-align: justify;">
If you need to do the same for the Blog Page then you need to go to Appearance > Editor > archive.php.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
and look for this line at the bottom of the file:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div class="box1" style="height: 20px; width: 710px;">
<?php get_<span class="searchlite">sidebar</span>(); ?> </div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
You need to remove that line from there and add that just under:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div class="box1" style="height: 20px; width: 710px;">
<?php get_header(); ?></div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
After all that over, please go to your <a href="http://tweaksinwp.blogspot.in/2014/10/adding-custom-css.html" target="_blank">Custom CSS</a> field and add this there:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div class="box1" style="height: 63px; width: 710px;">
#page {<br />
clear:none;<br />
}</div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
This will move your sidebar before the content in small screens.</div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-4699780774530400942014-11-28T19:10:00.001+05:302014-12-19T23:27:48.791+05:30Display Category Description in Theme<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
This is a least used WordPress function. It is called <b>Category Description</b>. It is not very popular in themes. Most of themes also don't even support that. Category Description means you can add some details/description of your category in the category page. So that when some one visits your category page, they will see the description at the top of your category page before the category posts. By default most themes does not support this feature. So that when you visit the category page, you just see the posts in that category. Not the descriptions.</div>
<a name='more'></a>In this topic you can find out how to add a category description to your site. By default the Twenty fourteen theme supports Category Description.<br />
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHYQ1ely9otJCuMU-8c3_wkl58FQEXHS8kYEiN5-qiXrB-gidTn7vYLNjzEaS8wlcWfhndfiykq6DPEPmaBG_4gIw56F85aa4t-Ni2LjSd0cwueonR_duxgukuacmlfIfqWoZwXmIp-nI/s1600/Uncategorized+-+Always+smile+2014-11-28+18-33-52.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHYQ1ely9otJCuMU-8c3_wkl58FQEXHS8kYEiN5-qiXrB-gidTn7vYLNjzEaS8wlcWfhndfiykq6DPEPmaBG_4gIw56F85aa4t-Ni2LjSd0cwueonR_duxgukuacmlfIfqWoZwXmIp-nI/s1600/Uncategorized+-+Always+smile+2014-11-28+18-33-52.png" height="160" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Category Description below the Category title</td></tr>
</tbody></table>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Follow these steps for adding Description to your Category page: </div>
<ul style="text-align: left;">
<li>For adding category description, you need to go to <b>Dashboard > Posts > Categories</b>.</li>
</ul>
<ul style="text-align: left;">
<li>Here you can see all your categories listed there.</li>
</ul>
<ul style="text-align: left;">
<li>Go to your category you want to add Description and edit that. There you can find a Description box. You need to add your text there which you want to display at the top of your category and Update that change.</li>
</ul>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5SRTmWzIsrtp304iwTiRVZGEYCMcMNnP4bQB9hCJW_AdBo9EMbx-J0YUtuFoGA78bVeSxmh6Hp54AZpbSsLWy2FQWEddGihRrrcujdR_-tzoR0eM57SnPoGyt_jHaDYd4esR5qniMXY/s1600/Edit+Category+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-28+19-04-23.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5SRTmWzIsrtp304iwTiRVZGEYCMcMNnP4bQB9hCJW_AdBo9EMbx-J0YUtuFoGA78bVeSxmh6Hp54AZpbSsLWy2FQWEddGihRrrcujdR_-tzoR0eM57SnPoGyt_jHaDYd4esR5qniMXY/s1600/Edit+Category+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-28+19-04-23.png" height="282" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Here is how you can add category Description</td></tr>
</tbody></table>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
After that if your theme supports Category Description, then you can see category when you visit the category page. But if your theme does not support Category Description then you need to do a little file level Customization for achieving that.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
For that please go to <b>Appearance > Editor > archive.php/category.php</b> and add this code wherever you want to show the Category Description: </div>
<div style="text-align: justify;">
<br />
<div class="box1" style="height: 25px; width: 710px;">
<?php echo category_description( $category_id ); ?></div>
</div>
<br />
Now your description is ready. You can see that in your site.</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-12739934294902831192014-11-17T23:34:00.000+05:302014-12-19T23:27:39.067+05:30Adding Featured Image<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Featured image is a measured thing in your site for representing your post in a blog page, or any excerpt related things. So it is an important task to add Featured image in your posts to make it more attractive.<br />
<br />
<a name='more'></a><br />
<br />
Generally WordPress provides inbuilt feature to add Featured image to posts. It does not require any coding or development knowledge for doing that. Please follow these steps for adding a featured image in your post:<br />
<br />
1. Please go to Dashboard > Posts.<br />
2. Edit the Post where you want to add Featured image.<br />
3. Scroll to the very bottom of the page. On the right side you can see a place for adding Featured image.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZejR3FaR7-exHwAJSJ_bG-ZDqz6HEFOiugosaNIhD0TXEejpfMxuds9IkkD3eAfbgsXozoqmhcKM8yphDe6Q5fCgUoyx97xSS6AUIbImmxWVxut9tOtZ5zy0KKJMI8OkAjd0RKnfXaA/s1600/Edit+Post+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-17+23-25-55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZejR3FaR7-exHwAJSJ_bG-ZDqz6HEFOiugosaNIhD0TXEejpfMxuds9IkkD3eAfbgsXozoqmhcKM8yphDe6Q5fCgUoyx97xSS6AUIbImmxWVxut9tOtZ5zy0KKJMI8OkAjd0RKnfXaA/s1600/Edit+Post+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-17+23-25-55.png" /></a></div>
4. Here you can Click on the <b>Set Featured Image</b>. It will take you to the pop up for uploading image.</div>
<div style="text-align: justify;">
5. You can choose your option for uploading image and Save that image.<br />
6. Here is now what you want. Your Featured image is ready for your post.</div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-2028877795951457552014-11-14T19:03:00.000+05:302014-12-19T23:27:19.775+05:30Adding Search Box in your site<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Search box is an important aspect for a site. WordPress generally provides a default Search Box widget with its package which you can use in any Widget area by going to <b>Appearance > Widgets</b> and Drag the <b>Search</b> Widget from the <b>Available Widgets</b> section to any widget based area provided by your Theme.</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><br />
<br />
<div style="text-align: justify;">
But sometimes a situation comes where you want to add a search box in a default place but there is no option there for that. Mostly in some themes like in header, footer where there is no widgets provided by theme.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Don't worry about that. You can add your search box any where you want by editing the core files to get the look of your site what you think with the Search box. But first of all make sure you are using a <i><a href="http://tweaksinwp.blogspot.in/2014/11/child-themes.html" target="_blank">Child Theme</a></i> for this so that you won't lose any customization when you update your theme in future.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
There are generally 2 methods you can add search box in your site. <i> </i></div>
<div style="text-align: justify;">
i) By adding the code directly in the theme files.</div>
<div style="text-align: justify;">
ii) By adding shortcode.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
By adding the code directly in the theme files.</h3>
<h3 style="text-align: justify;">
</h3>
<div style="text-align: justify;">
If you want to add your buttons directly into a specific field like header, footer, category page, blog page (which files you can find directly in the theme files) then you can directly add the complete code there by editing the theme file in a Child Theme. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
First of all please locate the place where you want to add the search box in theme files and then edit the theme file by going to Appearance > Editor and edit the required file where you want to add the Search box and locate the place for adding.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Then you need to add the code there and save the changes:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div class="box1" style="height: 200px; overflow: scroll; width: 710px;">
<pre><form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form></pre>
</div>
</div>
<h3 style="text-align: justify;">
</h3>
<h3 style="text-align: justify;">
By adding shortcode.</h3>
<h3 style="text-align: justify;">
</h3>
<div style="text-align: justify;">
If you need to add Search box in specific Page/Post, then you need to add a shortcode for that. For achieving that you need to go to your functions.php by going to Appearance > Editor and at the very bottom you need to add this below code above the ?> tag:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div class="box1" style="height: 23px; width: 710px;">
add_shortcode('wpbsearch', 'get_search_form');</div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Then you need to go to your specific pages/post and add the short code in the page/post editor directly like this:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>[wpbsearch]</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Then you need to add style to your search box as per your requirement and enjoy with your search box.<br />
<br />
For more details please refer: <i><a href="http://codex.wordpress.org/Function_Reference/get_search_form" target="_blank">Codex</a></i></div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-5910905294786767662014-11-09T00:05:00.000+05:302014-12-19T23:27:07.221+05:30Adding Description to Menu Item<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
WordPress menu system has a built-in
feature where you can add descriptions with menu items. However, this
feature is hidden by default. Even when enabled, displaying them is not
supported without adding some code. Most themes are not designed with
menu-item descriptions in mind. In this article we will show you how to
enable menu descriptions in WordPress and how to add menu descriptions
in your WordPress themes.</div>
<div style="text-align: justify;">
<br /></div>
<a name='more'></a><div style="text-align: justify;">
</div>
<h2 style="text-align: justify;">
Why you would like to add menu description: </h2>
<div style="text-align: justify;">
1. It will help with SEO.</div>
<div style="text-align: justify;">
2. To offer a better user experience.</div>
<div style="text-align: justify;">
3. It tell visitors what they will find if they clicked on a menu item.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
There are 3 ways we can achieve Menu Descriptions. </div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
Step 1</h2>
<div style="text-align: justify;">
1. Log in to your WordPress admin panel.</div>
<div style="text-align: justify;">
2. Go to <b>Appearance > Menus</b>.</div>
<div style="text-align: justify;">
3. At the top right corner you can see a tab called <b>Screen Options</b>. Click on it.</div>
<div style="text-align: justify;">
4. Check the <b>Description</b> check box there like mentioned here:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim38jQhyphenhyphen_1CaxRF5MiqmJsIrT8is_-O_kfaah2wwquEiHiCHWavJRTV1EtFHC0oDCMzD37k58T-HWBdVNxu-c3Vvwjck1ymAId0KnD3dIO3kd-QoZ4Ar2gttoHdvC2K7TAWSks1QbxvuM/s1600/Menus+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-08+23-51-29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim38jQhyphenhyphen_1CaxRF5MiqmJsIrT8is_-O_kfaah2wwquEiHiCHWavJRTV1EtFHC0oDCMzD37k58T-HWBdVNxu-c3Vvwjck1ymAId0KnD3dIO3kd-QoZ4Ar2gttoHdvC2K7TAWSks1QbxvuM/s1600/Menus+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-08+23-51-29.png" height="92" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Note:</b> Some
themes support this natively, so first try adding a description to your
menu by selecting one of your menus and opening it, you should now see a
description box. Add a description and save. Then go to your site and
press control F5 to clear cache on your browser and see if the
description appears.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-vLyKd7ymmagYPhC2s5u0PTCDmAaPlXD2NUb1Gl297f8t3hTuKuJVeCg8fwrpWULtg8LC7o1bHLOOs802XbAUhRm12Y2zYMehNKx-VxYHv1qhTmqbgQgeG1wfI_aQSQVywj70xtIUFZw/s1600/Menus+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-08+23-55-28.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-vLyKd7ymmagYPhC2s5u0PTCDmAaPlXD2NUb1Gl297f8t3hTuKuJVeCg8fwrpWULtg8LC7o1bHLOOs802XbAUhRm12Y2zYMehNKx-VxYHv1qhTmqbgQgeG1wfI_aQSQVywj70xtIUFZw/s1600/Menus+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-08+23-55-28.png" height="340" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
If nothing Appears proceed to step 2</h3>
<h2 style="text-align: justify;">
Step 2</h2>
<div style="text-align: justify;">
Please go to your functions.php file by going to Appearance > Editor > functions.php</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Paste this code in and save. </div>
<div style="text-align: justify;">
<pre class="brush:php"><div class="box1" style="height: 320px; overflow: scroll; width: 710px;">
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( " ", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
// get user defined attributes for thumbnail images
$attr_defaults = array( 'class' => 'nav_thumb' , 'alt' => esc_attr( $item->attr_title ) , 'title' => esc_attr( $item->attr_title ) );
$attr = isset( $args->thumbnail_attr ) ? $args->thumbnail_attr : '';
$attr = wp_parse_args( $attr , $attr_defaults );
$item_output = $args->before;
// thumbnail image output
$item_output .= ( isset( $args->thumbnail_link ) && $args->thumbnail_link ) ? '<a' . $attributes . '>' : '';
$item_output .= apply_filters( 'menu_item_thumbnail' , ( isset( $args->thumbnail ) && $args->thumbnail ) ? get_the_post_thumbnail( $item->object_id , ( isset( $args->thumbnail_size ) ) ? $args->thumbnail_size : 'thumbnail' , $attr ) : '' , $item , $args , $depth );
$item_output .= ( isset( $args->thumbnail_link ) && $args->thumbnail_link ) ? '</a>' : '';
// menu link output
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
// menu description output based on depth
$item_output .= ( $args->desc_depth >= $depth ) ? '<br /><span class="sub">' . $item->description . '</span>' : '';
// close menu link anchor
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
add_filter( 'wp_nav_menu_args' , 'my_add_menu_descriptions' );
function my_add_menu_descriptions( $args ) {
$args['walker'] = new Menu_With_Description;
$args['desc_depth'] = 0;
$args['thumbnail'] = true;
$args['thumbnail_link'] = false;
$args['thumbnail_size'] = 'nav_thumb';
$args['thumbnail_attr'] = array( 'class' => 'nav_thumb my_thumb' , 'alt' => 'test' , 'title' => 'test' );
return $args;
}</div>
</pre>
</div>
<div style="text-align: justify;">
This script will rebuild your menu to include your description for themes that don’t naively support it.</div>
<h2 style="text-align: justify;">
</h2>
<h2 style="text-align: justify;">
Step 3</h2>
<div style="text-align: justify;">
Some CSS to get you going, I can’t make a set piece of CSS because every blog will be different but this should get you started.</div>
<div style="text-align: justify;">
<pre class="brush:css"> </pre>
<pre class="brush:css"><div class="box1" style="height: 100px; width: 710px;">
.sub {
font-size: 10px;
} </div>
</pre>
</div>
<h2 style="text-align: justify;">
Final step</h2>
<div style="text-align: justify;">
Well that’s its really, you might need to do some styling.</div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-62342280891785930982014-11-07T23:50:00.000+05:302014-12-19T23:26:47.156+05:30Custom Page Template<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Your <a href="http://codex.wordpress.org/Using_Themes" title="Using Themes">Theme files</a> should include a default page template (named: <tt>page.php</tt>) or your Theme may also have one or more custom page templates, for instance, to display content in wider columns. But if you need to make a different layout other than that the theme's layout then you can try making Custom Page Templates and make the layout as per your requirement other than that your theme provides.</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
You can select the page template by going to Pages > Edit page > On the right side you can see Page Attributes > Under That from the templates drop down you can select the required template.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim76ZYINGgaAKj7_KGRf6sBhNa3bBrrTlgmTxpFYZExwIlgamFUszVt_2hWne8W40vfa2AzOo9LdDQ7gxR11rk2kG2IgxrBNefSui1T2BvcKFX9f61NaxNf5L_8hOiJsi6ouiwn5n46tQ/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim76ZYINGgaAKj7_KGRf6sBhNa3bBrrTlgmTxpFYZExwIlgamFUszVt_2hWne8W40vfa2AzOo9LdDQ7gxR11rk2kG2IgxrBNefSui1T2BvcKFX9f61NaxNf5L_8hOiJsi6ouiwn5n46tQ/s1600/Untitled.png" height="320" width="270" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
By selecting template for page, your page will behave the layout and styles as per that template. But what about a custom layout of your choice rather than then theme's inbuilt ones?</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span class="mw-headline" id="Custom_Page_Template">Creating Custom Page Template</span></h3>
<h3 style="text-align: justify;">
<span class="mw-headline" id="Custom_Page_Template"> </span></h3>
<div style="text-align: justify;">
A Custom Page Template can be used by multiple Pages (see <a href="http://codex.wordpress.org/Page_Templates#Selecting_a_Page_Template">Selecting a Page Template</a> above). To create a custom page template make a new file starting with a Template Name inside a PHP comment. Here's the syntax:</div>
<div style="text-align: justify;">
<div class="box1" style="height: 100px; width: 710px;">
<pre><?php
/*
Template Name: My Custom Page
*/
</pre>
</div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Once you upload the file to your Theme's folder, the template name,
"My Custom Page", will list in the Edit Page screen's Template dropdown.
(The select list has a maximum width of 250px, so longer names may be
cut off.) </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
A quick, safe method for making a new Page template is to use with a copy of your <tt>page.php</tt>: This way you start off with the HTML structure of your other pages, then you can edit as needed.
</div>
<div style="text-align: justify;">
A custom page template file <i>can</i> be in a sub-folder, or, if using a <a href="http://tweaksinwp.blogspot.in/2014/11/child-themes.html" target="_blank" title="Child Themes">Child Theme</a>, in its Parent Theme's folder. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
You need to place this in a PHP file called mycustomepage.php (say) inside the theme folder and in the file you can add the custom layout of your requirement and then just select the layout under Pages > Edit page > On the right side you can see Page Attributes so that that page will follow the layout what you have designed in the file.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrnfZzXwuOYb3wru6519Pihs2OEiH0AX_OIdrVw03gHOWGIdCkN-NhuCjeo-JZcVqvA17X1tYVlaZ7XeHyz4j-4btTGPTkZTsXj-8Vjn1o5lOQKaA3ZD4CQjmAqgobNIsBG7wc6UzpEGY/s1600/Untitled1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrnfZzXwuOYb3wru6519Pihs2OEiH0AX_OIdrVw03gHOWGIdCkN-NhuCjeo-JZcVqvA17X1tYVlaZ7XeHyz4j-4btTGPTkZTsXj-8Vjn1o5lOQKaA3ZD4CQjmAqgobNIsBG7wc6UzpEGY/s1600/Untitled1.png" height="320" width="271" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Now enjoy with your own template irrespective of the theme and its layout.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
For more information please refer: <i><a href="http://codex.wordpress.org/Page_Templates" target="_blank">Codex</a></i></div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-90052247846699144502014-11-07T19:12:00.001+05:302014-12-19T23:26:38.784+05:30Define HomePage<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
How to define a home page in WordPress:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Per the WordPress Codex <a href="http://codex.wordpress.org/Creating_a_Static_Front_Page" target="_blank" title="http://codex.wordpress.org/Creating_a_Static_Front_Page">http://codex.wordpress.org/Creating_a_Static_Front_Page</a>:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
“By default, WordPress shows your most recent posts on the front page
of your site. But many WordPress users want to have a static front page
or splash page as the front page instead. This “static front page” look
is common for those who wish to not have a “blog” look to their site,
giving it a more CMS (content management system) feel.”</div>
<div style="text-align: justify;">
<br /></div>
<a name='more'></a><div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
“When you create a static front page for your site, you must also
create a way for WordPress to show your most recent posts in a “virtual
directory” called blog, news, or whatever else you choose to call it.
This is true whether or not you are actually using Posts in WordPress. ”</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
“The static front page is a customized Page that displays static
content. It can be customized to direct people to featured content, or
highlight posts, articles, categories, or contributors. ”</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
1. Create two WordPress Pages from the “Add New Page” panel. If you
will not be using WordPress blogging functionality, you can skip the
second page.</div>
<ul style="text-align: justify;">
<li>Title the first page “Home” (or another name) as your “static” front page.
<ol>
<li>Add content you would like to see within the content area of the “Home” page.</li>
<li>Publish the Page.</li>
</ol>
</li>
<li>Title the second page “Blog” (or you could call it “News”,
“Articles”, etc.). This page will be a place-holder for showing the
Posts on your site.
<ol>
<li>DO NOT add content to the Blog Page. Leave it blank. Any content here will be ignored — only the Title is used.</li>
<li>Publish the Page.</li>
</ol>
</li>
</ul>
<div style="text-align: justify;">
2. Go to Administration > Settings > Reading panel.</div>
<ul style="text-align: justify;">
<li>Set ‘Front page displays:’ to ‘a static page’ and choose the first
page you created above for ‘Front page.’ If your WordPress site will
contain a blog section, set ‘Posts page’ to the page you created for
this above. Otherwise, leave this blank.</li>
<li>Click Save Changes.</li>
</ul>
<div style="text-align: justify;">
3. Enable “Permalinks” to show the “page title” in the address, since
/index.php?p=423 defeats the purpose of making a static front page.
While we are calling this a “static front page,” you can change the
content on that web page at any time by editing the Page.</div>
<ul style="text-align: justify;">
<li>By default WordPress uses web URLs which have question marks and
lots of numbers in them; however, WordPress offers you the ability to
create a custom URL structure for your permalinks and archives. This can
improve the aesthetics, usability, and forward-compatibility of your
links.</li>
<li>In your <a href="http://codex.wordpress.org/Administration_Panels" target="_blank" title="WordPress Administration Panels">WordPress Administration Panels</a> go to Settings > Permalinks > Permalink Settings
<ol>
<li>Under Common Settings select “Post name”</li>
<li>Click Save Changes</li>
</ol>
</li>
</ul>
<div style="text-align: justify;">
4. Create a Primary Menu. By default if you do not set up a menu, all
of the pages you’ve created will show in you Navigation Menu. To have
more control and to prevent any issues it’s recommended that you create
your own menu.</div>
<ul style="text-align: justify;">
<li>In your <a href="http://codex.wordpress.org/Administration_Panels" target="_blank" title="WordPress Administration Panels">WordPress Administration Panels</a> go to Settings > Appearance > Menus
<ol>
<li>To the left you should see “Pages”, “Links”, “Categories”, “Tags”,
and possibly other options depending on your theme like “Slides”,
“Portfolio”, “Carousel”, etc.</li>
<li>At the top you should see two tabs. “Edit Menus” and “Manage
Locations”. The options in “Manage Locations” depends on the theme you
are using. If you are using iFeature Pro, you will probably have two
Theme Locations. “Primary Menu” and “Footer Menu”.</li>
<li>To the right of that is where you create and edit your custom menus.
If you haven’t created a custom menu, you should just see a plus “+”
symbol.</li>
<li>Click the “+” plus symbol or find the click-able text “<span style="color: blue;">create a new menu</span>” to the right of the “Select a menu to edit” option at the top.</li>
<li>Enter a name for your new menu. Something like “Main Menu” will suffice.</li>
<li>Click Create Menu</li>
</ol>
</li>
<li>Now you’ll customize your menu.
<ol>
<li>To the left Look for the “Pages” option. Select “View All”.</li>
<li>Look for any page that you may have created earlier.</li>
<li>Select it and click “Add to Menu”</li>
<li>Look for any other “Pages” that you’ve created like “Blog” and add them to the menu.</li>
<li>Arrange them anyway you like, by dragging and dropping them into the
desired location. You can create sub-menu items where needed by
dragging the menu item slightly to the right forming a menu hierarchy.</li>
<li>Click “Save Menu”</li>
</ol>
</li>
</ul>
<div style="text-align: justify;">
Please note:</div>
<ul style="text-align: justify;">
<li style="text-align: justify;">Now, the “Home” page settings will be configurable only from editing the actual “Home” page settings from under Pages.</li>
<li style="text-align: justify;">Now, the “Blog” page settings will be configurable only from editing the Blog options in your theme options.</li>
<li style="text-align: justify;">This is also the root cause of “Slider Not Working” issues. In your
theme options, this ONLY controls the blog/posts page slider. If you
you’ve setup a slider on any Page, this is only configurable by editing
that page.</li>
</ul>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-79354342496272471322014-11-07T19:08:00.001+05:302014-12-19T23:26:28.046+05:30How to use Permalinks<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
By default WordPress uses web URLs which have question marks and lots
of numbers in them; however, WordPress offers you the ability to create
a custom URL structure for your permalinks and archives. This can
improve the aesthetics, usability, and forward-compatibility of your
links.</div>
<a name='more'></a><div style="text-align: justify;">
<br /></div>
<ol style="text-align: justify;">
<li style="text-align: justify;">In your <a href="http://codex.wordpress.org/Administration_Panels" target="_blank" title="WordPress Administration Panels">WordPress Administration Panels</a> go to Settings > Permalinks > Permalink Settings.</li>
<li style="text-align: justify;">Under Common Settings select “Post name”.</li>
<li style="text-align: justify;">Click Save Changes.</li>
</ol>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-73180715149228560092014-11-07T18:01:00.001+05:302014-12-19T23:26:14.494+05:30Adding New Themes<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: justify;">
Adding New Themes from the WordPress Admin area</h3>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The initial install is done from your admin menu:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Appearance > Themes > Install Themes > Upload > Navigate to the theme zip file you downloaded > Install and activate.</div>
<a name='more'></a><div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
(if you’ve purchased a bundle, make sure to unzip this first).</div>
<div style="text-align: justify;">
(if you’re getting an error, you need to delete out the previous version
first which can also be done under Appearance > Themes by switching
to a different theme (temporarily) and then deleting out your theme in
order to install the new version).</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Adding New Themes Manually (FTP/SFTP)</h3>
<h3 style="text-align: justify;">
</h3>
<div style="text-align: justify;">
To add a new Theme to your WordPress installation, follow these basic steps:</div>
<ol style="text-align: justify;">
<li>Go to <a href="https://wordpress.org/themes/">https://wordpress.org/themes/</a> and choose a suitable theme for you.</li>
<li>Download the Theme archive to your personal computer/Mac and extract
the files it contains. To be on the safe side it is recommended that
you extract the contents from the .zip file. Do not just Open the file
and drag the contents. Sometimes that will work, other times it will
not. It will be more reliable if you extract the content. Depending on
your operating system, you may be able to right click or control+click
the .zip file and select Extract, Extract With, or Open With. Usually
that will use or direct to your utility that’s used for extracting.
Extract the files to somewhere that’s easy to locate, eg: desktop.</li>
<li>Using an FTP/SFTP client (like FileZilla <a href="http://filezilla-project.org/" target="_blank" title="http://filezilla-project.org/">http://filezilla-project.org/</a>)
to access your host web server, FTP/SFTP (upload) the folder contents
to the wp-content/themes directory provided by WordPress. For example, a
Theme named Twenty Fourteen should be in wp-content/themes/twentyfourteen.
Follow the instructions below for selecting the new Theme.</li>
<li>Log in to the <a href="http://codex.wordpress.org/Administration_Panels" target="_blank" title="WordPress Administration Panels">WordPress Administration Panel</a>.</li>
<li>Go to Appearance > Themes</li>
<li>From the available themes section (Manage Themes), click on the
Theme title (or Theme screenshot) for the Theme you wish to activate.</li>
<li>A preview of the Theme will be shown.</li>
<li>To activate the Theme click “Save & Activate” “Theme Name” link
in the top left. Your selection should immediately become active.</li>
</ol>
<div style="text-align: justify;">
Note: If the Theme preview is blank, do not activate the new Theme
without investigating further. Your site may not be displayed correctly
or you may have a corrupt download.</div>
<div style="text-align: justify;">
Or while in the Themes panel, just select “Activate” under the corresponding theme that you wish to use.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Reference</div>
<div style="text-align: justify;">
<a href="http://codex.wordpress.org/Using_Themes" target="_blank" title="http://codex.wordpress.org/Using_Themes">http://codex.wordpress.org/Using_Themes</a></div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-64806106485169513672014-11-06T13:39:00.000+05:302014-12-19T23:25:59.446+05:30How to Use Menu System<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
The Appearance > Menus option enables a user to create custom navigation menu in place of a theme’s default menu.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In your <a href="http://codex.wordpress.org/Administration_Panels" target="_blank" title="WordPress Administration Panels">WordPress Administration Panels</a> go to Appearance > Menus.</div>
<div style="text-align: justify;">
<br /></div>
<a name='more'></a><div style="text-align: justify;">
<b>Screen Options</b> is located at the very top right section of your Menus page.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The Screen Options allow you to choose which modules are displayed, or
not displayed, in the underlying Screen. Clicking on the Screen Options
tab shows a list of the possible modules and options with a check-box
next to each. Check the box for each module or option you want
displayed, or uncheck the box to not display that module. Click the
Screen Options tab again to close the Screen Options.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Certain modules, like Posts are hidden by default. Hence the reason
this is mentioned first. If you believe something is missing from this
page, please check here to make sure everything needed is checked.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZYzo2HUYRpD56xoSnsyGZJI1krzGbz5j2ZLFOX7HmU2C9Vde7r1S8wQqLWCiTSWsYLRCeKMaLNCqABZRJmob0IWmrE3XXEbeK5o6HB1Zm4H-puUOVWkol675zFRnhm7kIKXg2k3pbLQ/s1600/Menus_Screen_Options_Tab.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZYzo2HUYRpD56xoSnsyGZJI1krzGbz5j2ZLFOX7HmU2C9Vde7r1S8wQqLWCiTSWsYLRCeKMaLNCqABZRJmob0IWmrE3XXEbeK5o6HB1Zm4H-puUOVWkol675zFRnhm7kIKXg2k3pbLQ/s1600/Menus_Screen_Options_Tab.png" height="108" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Create a Primary Menu. By default if you do not set up a menu, all of
the pages you’ve created will show in your Navigation Menu. There will
be no organization, no sub-menus, etc. To have more control and to
prevent any issues it’s recommended that you create your own menu.</div>
<div style="text-align: justify;">
<br /></div>
<ul style="text-align: justify;">
<li>In your <a href="http://codex.wordpress.org/Administration_Panels" target="_blank" title="WordPress Administration Panels">WordPress Administration Panels </a>go to Settings > Appearance > Menus
<ol>
<li>To the left you should see “Pages”, “Links”, “Categories”, “Tags”,
and possibly other options depending on your theme like “Slides”,
“Portfolio”, “Carousel”, etc. </li>
<li>At the top you should see two tabs. “Edit Menus” and “Manage
Locations”. The options in “Manage Locations” depends on the theme you
are using. </li>
<li>To the right of that is where you create and edit your custom menus.
If you haven’t created a custom menu, you should just see a plus “+”
symbol.</li>
<li>Click the “+” plus symbol or find the click-able text “<span style="color: blue;">create a new menu</span>” to the right of the “Select a menu to edit” option at the top.</li>
<li>Enter a name for your new menu. Something like “Main Menu” will suffice.</li>
<li>Click Create Menu</li>
</ol>
</li>
<li>Now you’ll customize your menu.
<ol>
<li>To the left Look for the “Pages” option. Select “View All”.</li>
<li>Look for any page that you may have created earlier.</li>
<li>Select it and click “Add to Menu”</li>
<li>Look for any other “Pages” that you’ve created like “Blog” and add them to the menu.</li>
<li>Arrange them anyway you like, by dragging and dropping them into the
desired location. You can create sub-menu items where needed by
dragging the menu item slightly to the right forming a menu hierarchy.</li>
<li>Click “Save Menu” </li>
</ol>
</li>
</ul>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHqKrJ3P_-2EsS-Gqnf8iTkg2yqaKh-pEyBfRkoBXsxQ060xdg1SyCLXuCyJdetCUB02R_9UhC6U9CI_nWuuZVqyLM2TQrIX2k3SJgPz1hAdpmLKOMX2eEGcPNuUM44Lt_cRWD8aRdG4w/s1600/Menus+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-07+17-25-38.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHqKrJ3P_-2EsS-Gqnf8iTkg2yqaKh-pEyBfRkoBXsxQ060xdg1SyCLXuCyJdetCUB02R_9UhC6U9CI_nWuuZVqyLM2TQrIX2k3SJgPz1hAdpmLKOMX2eEGcPNuUM44Lt_cRWD8aRdG4w/s1600/Menus+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-07+17-25-38.png" height="640" width="547" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The “Links” option allows you to create menu items that aren’t
defined or fit in any of your available options like “Pages”,
“Categories”, “Posts”, etc.</div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<ul style="text-align: justify;">
<li>In the “Links” box you can create your custom menu item
<ol><ol>
<li>URL – This is the URL of the Page/Post/Item. Just place the URL of
where you want the user to go when they click the menu item here. (TIP:
To make this item a container only disabling the link, place one of the
following here):
<ul>
<li>javascript: void(0);</li>
<li>#</li>
</ul>
</li>
</ol>
</ol>
<br />
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidwKoB8aREWoTbXtBZXhfGWNfuFvbpZzqKw6AoWJGVlTP559qgawJnBB01qta80ytDQfsJzDhYPyW0nsfhjxkFfI7F16b0DODXFztxa1gDSJ2A2BveKNqqKzUw2Jn8HZa_3spDfIXSIMY/s1600/Menus+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-07+17-31-41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidwKoB8aREWoTbXtBZXhfGWNfuFvbpZzqKw6AoWJGVlTP559qgawJnBB01qta80ytDQfsJzDhYPyW0nsfhjxkFfI7F16b0DODXFztxa1gDSJ2A2BveKNqqKzUw2Jn8HZa_3spDfIXSIMY/s1600/Menus+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-11-07+17-31-41.png" height="196" width="400" /> </a></div>
<div class="separator" style="clear: both;">
<br /></div>
<ol>
<li>Link Text – The name of Menu Item. Please try not to use one that is already being used.</li>
<li>Click “Add to Menu”</li>
<li>Please note that if you’re very creative you might me able to come
up with some unique menu arrangements with this feature. Use it wisely.</li>
</ol>
</li>
</ul>
<div style="text-align: justify;">
To make the menu item (button) open in a new window, make sure that
the “Link Target” option is checked in the Screen Options at the top.
The select the menu item that you want to open in a new window. Look for
the “Open link in a new windowtab” option and place a check in the box
by clicking it.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
If you want to give the menu item a “nofollow” attribute, especially
useful for external links, make sure the “Link Relationship (XFN)”
option is checked in the Screen Options at top. Then select the menu
item that you would like to add the “nofollow” attribute to. Find the
“Link Relationship (XFN)” field and place the text <b>nofollow</b> there.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Make sure to click Save Menu when done.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdg5izXmeDPGgjz_AS7SVe3P4ZY1cs7p_suc8VqszudYNLxFcmeOaRDGtdkSg0s5Ms79KtniYmjeoDynF4y9OZRqtA886R5C-7FGeBQajC-VPStScFFbnJaOa35zyuoltzn8881l9b8Y/s1600/Advanced_Menu_Options.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdg5izXmeDPGgjz_AS7SVe3P4ZY1cs7p_suc8VqszudYNLxFcmeOaRDGtdkSg0s5Ms79KtniYmjeoDynF4y9OZRqtA886R5C-7FGeBQajC-VPStScFFbnJaOa35zyuoltzn8881l9b8Y/s1600/Advanced_Menu_Options.png" height="256" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Please note:</div>
<ul style="text-align: justify;">
<li>Now, the “Home” page settings will be configurable only from editing the actual “Home” page settings from under Pages.</li>
<li>Now, the “Blog” page settings will be configurable only from editing the Blog options in your theme options.</li>
<li>This is also the root cause of “Slider Not Working” issues. In your
theme options, this ONLY controls the blog/posts page slider. If you
you’ve setup a slider on any Page, this is only configurable by editing
that page.</li>
</ul>
<div style="text-align: justify;">
References</div>
<div style="text-align: justify;">
<a href="http://codex.wordpress.org/Appearance_Menus_Screen" target="_blank" title="http://codex.wordpress.org/Appearance_Menus_Screen">http://codex.wordpress.org/Appearance_Menus_Screen</a></div>
<div style="text-align: justify;">
<a href="http://codex.wordpress.org/WordPress_Menu_User_Guide" target="_blank">http://codex.wordpress.org/WordPress_Menu_User_Guide</a></div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-80593858422847075562014-11-05T21:49:00.002+05:302014-12-19T23:25:46.131+05:30Child Themes<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
A child theme is a theme that inherits the functionality of another
theme, called the parent theme. Child themes allow you to modify, or add
to the functionality of that parent theme. A child theme is the best,
safest, and easiest way to modify an existing theme, whether you want to
make a few tiny changes or extensive changes. Instead of modifying the
theme files directly, you can create a child theme and override within. </div>
<a name='more'></a><div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Directly editing files in the parent theme will reset to default when you update your theme in future. But if you use a Child Theme then you can retain your changes even after update your theme (which
might be important for security or functionality). It also can speed up development time.</div>
<br />
<br />
<h2 style="text-align: left;">
How to create a Child theme</h2>
<h2 style="text-align: left;">
</h2>
<div style="text-align: justify;">
1. You need to create a new folder under your theme folder placed at <b>.../wp-content/themes</b>.</div>
<div style="text-align: justify;">
2. Rename the <b>New Folder </b>you have created to <b>yourthemename-child</b>.</div>
<div style="text-align: justify;">
3.Then open the folder and add a file with .css extension (CSS file) there with these contents in between that:</div>
<div style="text-align: left;">
</div>
<pre><div class="box1" style="height: 300px; overflow: scroll; width: 710px;">
/*
Theme Name: YourThemeName Child
Theme URI: http://example.com/yourthemename-child/
Description: Your Theme Name Child Theme
Author: Your name
Author URI: http://example.com
Template: yourthemename
Version: 1.0.0
Text Domain: youtthemename-child
*/
/* =Theme customization starts here
-------------------------------------------------------------- */
</div>
</pre>
<div style="text-align: justify;">
Here you can replace the your theme name with the name of your theme. The only required lines are the Theme Name, the Template. But you can add others also for better understanding.<span style="color: #0b5394;"> </span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
If you want to create a child theme without the name of the parent theme say ABC. then you need to use the template in the above comments as abc.</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<br />
<div style="text-align: justify;">
<span style="color: #0b5394;"><span style="color: black;">You can also add other files there which you want to customize</span>.<span style="color: black;"> The process is to copy the original file from the parent theme to the Child and then make customizations there in the Child Theme so that the code in the parent theme gets untouched. </span></span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
@import should not be used to import the parent stylesheet into the
child theme. The correct method is to use wp_enqueue_style() to enqueue
the parent stylesheet, using this code in your child theme's
"functions.php". You will need to create a functions.php in your child
theme's root folder (This is the only two files needed to create a child
theme). Right at the start, on the first line, you should add an
opening php tag. All other code will follow after this opening php tag
</div>
<pre></pre>
<pre></pre>
<pre><div class="box1" style="height: 135px; overflow: scroll; width: 710px;">
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style') );
}</div>
</pre>
<pre></pre>
<div style="text-align: justify;">
You can activate the Child Theme in your Dashboard by going to <b>Appearance > Themes > Yourthemenamechild >Activate</b>.</div>
<br />
If you need more information regarding that, then please visit: <i><a href="http://codex.wordpress.org/Child_Themes" target="_blank">Codex</a></i></div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-40464021493494992992014-11-05T21:00:00.004+05:302014-12-19T23:25:34.843+05:30Adding Site Description<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Site description plays an important role in the SEO point of view. So if your theme does not provide site description, don't worry. You can do that manually by editing your header.php.</div>
<a name='more'></a><br />
<div style="text-align: justify;">
Please go to header.php and add this following code:</div>
<br />
<div class="box1" style="height: 25px; width: 710px;">
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2></div>
<br />
<div style="text-align: justify;">
where you want to show the site description in your head. Generally
it is added below the site title which looks something like this:</div>
<br />
<div class="box1" style="height: 45px; width: 710px;">
<h1 id="logo" role="banner"><a href="<?php echo home_url(); ?>" title="<?php _ex( 'Home', 'Home pbanner link title', 'buddypress' ); ?>"><?php bp_site_name(); ?></a></h1></div>
<br />
<div style="text-align: justify;">
and then you need to add this in your Custom CSS as per your requirement:<b> </b></div>
<br />
<div class="box1" style="height: 60px; width: 710px;">
#site-description {<br />
add your styles here<br />
}</div>
<br />
<div style="text-align: justify;">
For more information please refer this: <i><a href="http://codex.wordpress.org/Meta_Tags_in_WordPress" target="_blank">Codex</a></i></div>
<br />
<div style="text-align: justify;">
<b>N.B:- </b>Editing core files directly is not recommended as you will lose all your changes when you update your theme. So always use a <a href="http://tweaksinwp.blogspot.in/2014/11/child-themes.html" target="_blank">Child Theme</a> for doing any customization so that you can keep your changes safe in updates.</div>
<br />
<br /></div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-32890479987749311912014-11-01T23:38:00.003+05:302014-12-19T23:25:22.943+05:30Translating Using Poedit<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
There are a few different options for translating WordPress, as outlined in the <a href="http://codex.wordpress.org/Translating_WordPress" target="_blank" title="Translating WordPress">WordPress Codex</a>.
For this tutorial, we’re going to use Poedit, an easy to use open
source program available for Mac OS X, Windows and UNIX/Linux.</div>
<div style="text-align: justify;">
<br /></div>
<a name='more'></a><div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
1. Install <a href="http://www.poedit.net/download.php" target="_blank" title="Poedit downloads">Poedit</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
2. Open Poedit and go to <b>File > New catalog from POT file</b> and select the POT in your theme’s languages folder.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
3. A catalog properties box will pop up asking for information about
what you are translating. Enter the language you want to translate here.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<br />
<figure class="wp-caption aligncenter wp-caption-large cgrid-row" id="attachment_122452" style="width: 518px;"><div class="cgrid-col cgrid-col-span-full">
<img alt="Poedit catalog" class="size-full wp-image-122452" src="http://premium.wpmudev.org/blog/wp-content/uploads/2013/10/poedit-cataglog.png" height="397" width="518" /><br />
<br />
<br />
<figcaption class="wp-caption-text">Enter the language you want to translate along with any other important details and hit “OK.”</figcaption><figcaption class="wp-caption-text"> </figcaption></div>
</figure>
4. After you hit “OK,” you’ll be asked what you want to name your
translation file. The name is important and there’s a particular format
you will need to follow. For example, if you’re translating Chinese for
China, the file should be name zh_CH.po, and for a Tagalog translation
for the Philippines would be tl_PH.po</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<figure class="wp-caption aligncenter wp-caption-large cgrid-row" id="attachment_122477" style="width: 435px;"><div class="cgrid-col cgrid-col-span-full">
<img alt="Poedit language" class="size-full wp-image-122477" src="http://premium.wpmudev.org/blog/wp-content/uploads/2013/10/poedit-language.png" height="233" width="435" /><br />
<br />
<br />
<figcaption class="wp-caption-text">Each
language and country has a specific code you will need to use when
saving translation files. This code indicates Tagalog for the
Philippines.</figcaption></div>
</figure></div>
<div style="text-align: justify;">
Check out the <a href="http://www.gnu.org/software/gettext/manual/gettext.html#Language-Codes" target="_blank" title="GNU 'gettext' utilities">GNU `gettext’ utilities</a> to find your language and country codes.</div>
<div style="text-align: justify;">
Save your file in the languages folder of your theme.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
5. Now you can start translating your theme. Poedit has a simple and
straight forward interface that doesn’t involve a steep learning curve.
The space at the top will display all the text ready to translate, and
any completed translations will display to the right. The boxes
underneath show the source text you’ve selected to translate, your
translation and any notes for translators.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<figure class="wp-caption aligncenter wp-caption-large cgrid-row" id="attachment_122478" style="width: 605px;"><div class="cgrid-col cgrid-col-span-full">
<img alt="Tagalog Poedit" class="size-full wp-image-122478" src="http://premium.wpmudev.org/blog/wp-content/uploads/2013/10/tagalog-poedit.png" height="502" width="605" /><br />
<br />
<br />
<figcaption class="wp-caption-text">It’s easy to cycle through the text and enter your translations.</figcaption></div>
</figure></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Translating a line of text is really easy – just select a word or phrase, enter your translation and click “Update.”</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
6. When you’ve finishing translating, simply save your file. Poedit
will automatically create both .po and .mo files in your theme’s
languages folder.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
7. Now that your theme has been translated, you can upload it to your
WordPress install either using FTP or by logging into your WordPress
site and uploading your theme by going to <b>Appearance > Themes > Install Themes</b> (after you’ve zipped your theme, of course).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: ff-tisa-web-pro, Arial, sans-serif; font-size: 24px; font-weight: 600;">Setting Up Your Translated Theme in WordPress</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
As English is the default language for WordPress, you will need to
play with a little code to force WordPress to use your translated files.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In order to do this, you will need to FTP into your WordPress install and open up the wp_config file and add this line of code:</div>
<div class="fvch-codeblock" id="fvch-codeblock-0" style="text-align: justify;">
<table style="margin-left: 0px; margin-right: 0px; text-align: left;">
<tbody>
<tr>
<td class="fvch-line-numbers"><pre> </pre>
<pre>1</pre>
<pre> </pre>
</td>
<td class="fvch-code"><pre id="fvch-code-0">define ('WPLANG', 'zh_CN');</pre>
</td>
</tr>
</tbody></table>
</div>
<div style="text-align: justify;">
This line specifies Chinese for China, so you’ll need to replace zh_CN with your language and country code.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Adding this line tells WordPress you want to use translation files
for Chinese. Since you’ve translated only your theme and not your
backend, your site will display in Chinese but your WordPress admin area
will continue to display in English.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
I’ll cover changing the default language for your WordPress backend in another post as part of this series this week.</div>
<h3 style="text-align: justify;">
Translation Tips</h3>
<div style="text-align: justify;">
The WordPress Codex offers some <a href="http://codex.wordpress.org/Translating_WordPress" target="_blank" title="Translating WordPress">solid tips for translation</a> that anyone translating WordPress should keep in mind:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Don’t translate literally, translate organically: </b>Languages
have different structures, rhythms, tones, and inflections. Translated
text don’t need to be structured the same way as the English ones: take
the ideas that are presented and come up with a message that expresses
the same thing in a natural way for the target language.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Try to keep the same level of formality (or informality):</b>Try to accomplish the equivalent in the target language, within your cultural context.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Don’t use slang or audience-specific terms:</b> Stay away from colloquialisms and to stick with what you think a new blogger would understand.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Read other software’s localizations in your language: </b>If
you get stuck or need direction, try reading through the translations
of other popular software to get a feel for how they have tackled
translations.</div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-37012407905860958652014-11-01T00:06:00.000+05:302014-12-19T23:25:06.087+05:30Adding Breadcrumbs to your site<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Breadcrumbs are a navigational technique displaying all visited pages leading from the home
page to the currently viewed page. All pages are linked for easy
backwards navigation. Typically this is placed near the top of a web
page. So for example, if you </div>
<a name='more'></a><div style="text-align: justify;">
look to the top of this page you will see
the breadcrumb navigation menu that leads a path back to the homepage.</div>
<br />
<div style="text-align: justify;">
Some WordPress themes provide inbuilt Breadcrumbs in their theme but some themes also don't provide breadcrumb. But we need breadcrumbs in our site <b>for better SEO performance</b>. </div>
<br />
<div style="text-align: justify;">
There are loads of WordPress plugins out there that can handle
breadcrumbs for you, but they are not always the best option as they can
often get things wrong and end up being more hassle than they are
worth. The following code will have breadcrumbs working on your site in
no time.</div>
<br />
Simply paste the code below into your theme’s functions.php file:<br />
<br />
<div class="box1" style="height: 300px; overflow: scroll; width: 710px;">
<?php<br />
function the_breadcrumb() {<br />
global $post;<br />
echo '<ul id="breadcrumbs">';<br />
if (!is_home()) {<br />
echo '<li><a href="';<br />
echo get_option('home');<br />
echo '">';<br />
echo 'Home';<br />
echo '</a></li><li class="separator"> / </li>';<br />
if (is_category() || is_single()) {<br />
echo '<li>';<br />
the_category(' </li><li class="separator"> / </li><li> ');<br />
if (is_single()) {<br />
echo '</li><li class="separator"> / </li><li>';<br />
the_title();<br />
echo '</li>';<br />
}<br />
} elseif (is_page()) {<br />
if($post->post_parent){<br />
$anc = get_post_ancestors( $post->ID );<br />
$title = get_the_title();<br />
foreach ( $anc as $ancestor ) {<br />
$output = '<li><a href="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'">'.get_the_title($ancestor).'</a></li> <li class="separator">/</li>';<br />
}<br />
echo $output;<br />
echo '<strong title="'.$title.'"> '.$title.'</strong>';<br />
} else {<br />
echo '<li><strong> '.get_the_title().'</strong></li>';<br />
}<br />
}<br />
}<br />
elseif (is_tag()) {single_tag_title();}<br />
elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}<br />
elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}<br />
elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}<br />
elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}<br />
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}<br />
elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}<br />
echo '</ul>';<br />
}<br />
?></div>
<br /></div>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr></tr>
</tbody></table>
Then you need to go to style.css and add this CSS: <br />
<br />
<br />
<div class="box1" style="height: 300px; width: 710px;">
#breadcrumbs{<br />
list-style:none;<br />
margin:10px 0;<br />
overflow:hidden;<br />
}<br />
#breadcrumbs li{<br />
float:left;<br />
margin-right:15px;<br />
}<br />
#breadcrumbs .separator{<br />
font-weight:700;<br />
font-size:20px;<br />
color:#999;<br />
}</div>
<br />
Finally to call the breadcrumbs onto your page (usually in the header file), simply use the following code:<br />
<br />
<div class="box1" style="height: 20px; width: 710px;">
<?php the_breadcrumb(); ?></div>
<br />
<br />
Now enjoy with your breadcrumbs.<br />
<br />
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="gutter"><br /></td><td class="code"><br /></td></tr>
</tbody></table>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-33114896446421927012014-10-31T23:32:00.001+05:302014-12-19T23:24:46.138+05:30Adding Custom Fonts to WordPress<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
If you have started to edit the CSS of your WordPress theme you
probably know that you can change your font style of any site element by
using the <b>font-family</b> selector. For instance, to change your site’s title font, you might use the following </div>
<a name='more'></a><div style="text-align: justify;">
code inside the theme style.css file:</div>
<div style="text-align: justify;">
<br /></div>
<div class="box1" style="height: 60px; text-align: justify; width: 710px;">
#site-title a {<br />
font-family:tahoma;<br />
}</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Easy right? Sure…but what if the font you want to use isn’t included
in the list of available fonts with the standard WordPress installation.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
For example, if you wanted to use some really cool <a href="http://www.ffonts.net/Seriffic.font" target="_blank">Seriffic font</a> simply
changing the font family as shown above is not going to work because
the system doesn’t know how to render a font it’s not familiar with.</div>
<div style="text-align: justify;">
Using non-standard fonts inside WordPress requires two additional steps:</div>
<ol style="text-align: justify;">
<li>downloading and installing the font</li>
<li>calling the font using @font-face</li>
</ol>
<h2 style="text-align: justify;">
Downloading Custom Fonts for WordPress</h2>
<div style="text-align: justify;">
There’s no shortage of custom fonts on the web, but you must be
careful where you source these files because many are littered with
viruses and malware.</div>
<div style="text-align: justify;">
Generally, download fonts from: <a href="http://dafont.com/" target="_blank" title="Dafont Custom Fonts">Dafont</a> , <a href="http://www.ffonts.net/" target="_blank">Ffont</a> and <a href="http://www.google.com/webfonts" target="_blank" title="Google Fonts Directory">Google Fonts Directory</a>.</div>
<div style="text-align: justify;">
Once you find the font you like, download it and unzip the file. You
should now have access to a font file in .ttf or .otf format (more on
that later), and also a readme file explaining the font’s usage and
installation instructions.</div>
<div style="text-align: justify;">
To make the custom css work with your newly downloaded font, you’ll
want to install it on your server or WordPress file tree somewhere it
will be safe. Generally, I like to create a custom font folder within my
theme file and place the custom font file there.</div>
<div style="text-align: justify;">
Once that’s done, make note of the font location/url on your site and
head over to your theme’s style files for some quick editing.</div>
<h2 style="text-align: justify;">
</h2>
<h2 style="text-align: justify;">
Adding Custom Fonts to WordPress with @font-face</h2>
<div style="text-align: justify;">
The CSS selector @font-face allows you to add support for custom
fonts by including the font file in your CSS file. To add custom support
for nearly any custom font, type the following into your site’s main
style.css file:</div>
<div style="text-align: justify;">
<br /></div>
<div class="box1" style="height: 85px; text-align: justify; width: 710px;">
@font-face{<br />
font-family:seriffic;<br />
src:url('/www/wp-content/themes/twentyfourteen/fonts/Seriffic.ttf') format ("truetype");<br />
}
</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Breaking Down the Code</h3>
<div style="text-align: justify;">
<br />
<b>@font-face{</b><br />
This simply tells WordPress you are going to be defining a new font face. It opens the code.<br />
<b>font-family: seriffic;</b><br />
This line tells WordPress you will be using the font-family selector
with a name of “seriffic.” Of course, if the custom font you’ve chosen is
named “Lato” you’d put that in place of where I’ve written
“seriffic.”<br />
<b>src:url(‘/www/wp-content/themes/twentyfourteen/fonts/Seriffic.ttf’) format (“truetype”);}</b><br />
This next line tells WordPress where to look for the font file inside
your WordPress file system.<br />
<br />
The last part of this line tells WordPress what the format of the
font file. Two popular font file formats are .ttf (truetype) and .otf
(opentype). Use the one which corresponds to your particular font file.<br />
<h2>
Change Fonts with Simple CSS</h2>
If you’ve followed the steps above you should have successfully added
a custom font to WordPress, which can now be called using standard CSS
font selectors. Simply input the name of the new font you’ve uploaded
within the font-family selector like this:<br />
<br />
<div class="box1" style="height: 60px; width: 710px;">
#site-title a {<br />
font-family:seriffic;<br />
}</div>
<br />
Now your new custom font has been included on your site and can be used to change any font within your site.<br />
<br /></div>
<div style="text-align: justify;">
For more information on editing fonts in WordPress you can visit the codex entry for <a href="http://codex.wordpress.org/Playing_With_Fonts" target="_blank" title="Custom Fonts in WordPress">playing with custom fonts</a>.</div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-57221062309608501492014-10-31T12:33:00.001+05:302015-09-04T14:21:10.676+05:30Adding Custom CSS<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Now-a-days many Themes provide Custom CSS as the theme's inbuilt functionality. It is in-fact a good practice to use Custom CSS as it is in the Theme options panel, so it would not lost in updates. You can override the theme's CSS with your own as per your requirement (for changing the style, color etc as per your requirement)
in the Custom CSS field. And the most important thing is that <b>it will not lost even after you update your theme</b>.<br />
<a name='more'></a><br />
But the question is that what should you do if your theme does not prove inbuilt Custom CSS? Don't worry. Still you can use Custom CSS in your theme. There are 2 ways you can use Custom CSS in your theme without touching the theme's style.css.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
1. By using a Child Theme.</h3>
<div style="text-align: justify;">
<br />
You can create a <a href="http://tweaksinwp.blogspot.in/2014/11/child-themes.html" target="_blank">Child Theme</a> of your theme and add use the Custom CSS you want to add in the Child Theme's style.css to achieve your requirement.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
2. By using any Custom CSS Plugin.</h3>
<h3 style="text-align: justify;">
</h3>
<div style="text-align: justify;">
<br />
If you don't want to use a Child Theme to avoid setting all again, then you can use some plugin for achieving that. You can try some from these:</div>
<div style="text-align: justify;">
<a href="https://www.blogger.com/goog_1155342763"><br /></a></div>
<ul style="text-align: justify;">
<li><a href="https://wordpress.org/plugins/simple-custom-css/" target="_blank">Simple Custom CSS</a></li>
<li><a href="https://wordpress.org/plugins/wp-add-custom-css/" target="_blank">WP Add Custom CSS</a></li>
<li><a href="https://wordpress.org/plugins/theme-junkie-custom-css/" target="_blank">Theme Junkie Custom CSS</a></li>
<li><a href="https://wordpress.org/plugins/pc-custom-css/" target="_blank">PC Custom CSS</a></li>
<li><a href="https://wordpress.org/plugins/easy-custom-css/" target="_blank">Easy Custom CSS</a></li>
</ul>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.comtag:blogger.com,1999:blog-3673702047818052962.post-53150140411106989102014-10-30T18:41:00.003+05:302014-12-19T23:24:28.916+05:30Deactivate comments from Pages/Posts<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In new WordPress comments are On by default but many people who want static websites generally do not need Comments in there posts/pages.WordPress provides some inbuilt functions for activating/deactivating comments in your site.</div>
<h2 style="text-align: justify;">
<b><a name='more'></a></b></h2>
<h2 style="text-align: justify;">
<b>1. Activating/Deactivate comments through Pages/Posts:</b></h2>
<div style="text-align: justify;">
This includes 2 processes.</div>
<h3 style="text-align: justify;">
</h3>
<h3 style="text-align: justify;">
a) Enable/Disable Comments:</h3>
<h3 style="text-align: justify;">
</h3>
<div style="text-align: justify;">
For enabling/disabling comments you need to go to:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Dashboard > Pages/Posts > Edit the Page/Post</b> where you don't want to see comments.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
On the top right of the screen you can see <b>Screen Options</b>. Expand that and look for the <b>Discussion</b> box there. Check that if you want to enable comments in that page/post or uncheck that if you want to disable comment in that page/post.<br />
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOpbviGvk-gpsNlcArxuysN4B-QydB5QMgalMxBDhOv3bUxVIBUAtGYECsMJA9pfliIihR4Zzmq5nnCxWgCpnMsFMC1HWC1dM_XeLt8BRNP3lxZlJmlMjiLcHrYjNxL9irSF6rtAbc3_Q/s1600/Edit+Page+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-30+18-16-50.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOpbviGvk-gpsNlcArxuysN4B-QydB5QMgalMxBDhOv3bUxVIBUAtGYECsMJA9pfliIihR4Zzmq5nnCxWgCpnMsFMC1HWC1dM_XeLt8BRNP3lxZlJmlMjiLcHrYjNxL9irSF6rtAbc3_Q/s1600/Edit+Page+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-30+18-16-50.png" height="156" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">1. Enable/Disable comments by editing Pages/Posts</td></tr>
</tbody></table>
<div style="text-align: justify;">
Then on the bottom of page, you can see the Discussion box like the below figure. You can check or uncheck the <b>Allow Comments </b>there to enable or disable comments.</div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwUDXkJ0Sb_dZ5sxLjOp5g-Sdlv0h9FgLxhLjLxKS3cXcoxtqOBE6aAkCYGmI6DbtQpkhzfsgyMlQZUGl9fCkzot9mJH_qimrdsRJ75fSfRMExy2DSiqHjr1ZyqS1RFm_13i0f9H7gY0I/s1600/Edit+Page+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-31+11-33-04.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwUDXkJ0Sb_dZ5sxLjOp5g-Sdlv0h9FgLxhLjLxKS3cXcoxtqOBE6aAkCYGmI6DbtQpkhzfsgyMlQZUGl9fCkzot9mJH_qimrdsRJ75fSfRMExy2DSiqHjr1ZyqS1RFm_13i0f9H7gY0I/s1600/Edit+Page+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-31+11-33-04.png" height="51" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">2. Check/Uncheck the Allow Comments</td></tr>
</tbody></table>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
b) Bulk Editing Comments:</h3>
<h3 style="text-align: justify;">
</h3>
<div class="section-title" id="bulk-editing-comments" style="text-align: justify;">
<span style="font-weight: normal;">If you want to adjust the comments then this is considered to be the best method.</span> Here in this method you need to go to:</div>
<div class="section-title" id="bulk-editing-comments" style="text-align: justify;">
<br /></div>
<div class="section-title" id="bulk-editing-comments" style="text-align: justify;">
1. <b>Dashboard > Pages/Posts</b>.</div>
<div class="section-title" id="bulk-editing-comments" style="text-align: justify;">
2. You can now see the list of Pages/Posts in your screen. Select the Pages/Posts you want to adjust the comments by <b>checking the check box</b> at the left of each post (However if you want all pages/posts to change then you can tick the <b>check box at the left of title</b> at the top).</div>
<div class="section-title" id="bulk-editing-comments" style="text-align: justify;">
3. Select <b>Edit</b> from the <b>Bulk Actions</b> Drop down and Click Apply.<br />
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1fjo21iGAbR_jkkb_a2NGj2Xv8DHuj8I2i6rvVVd3zIJk41XSvtn6pN9j4-A6Sxj4U5PB-bzSIGgkfW_Oj0nupEcK59hgJm5PD3IAFcsdGlGaXzMgCByFpP6UeZjfSnssRnfg9dQZco/s1600/Pages+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-30+18-33-14.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1fjo21iGAbR_jkkb_a2NGj2Xv8DHuj8I2i6rvVVd3zIJk41XSvtn6pN9j4-A6Sxj4U5PB-bzSIGgkfW_Oj0nupEcK59hgJm5PD3IAFcsdGlGaXzMgCByFpP6UeZjfSnssRnfg9dQZco/s1600/Pages+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-30+18-33-14.png" height="150" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">3. You can select the pages for customization.</td></tr>
</tbody></table>
<div class="section-title" id="bulk-editing-comments" style="text-align: justify;">
Then you can see a new screen appearing in your Screen. There in between the 5 drop downs you see you can find one <b>Comments</b> drop down is there. You need to select <b>Allow/Do Not allow</b> as per your requirement there and save the changes.<br />
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRwrYUR4cb6jKyTQ8CXYMz6KLp60pZztIksNUWkrovqpOkiWBr9i96IwNFUHaxl9SOX0Kn71K4dr_2tgj_ddMTNRzQpbBw6jKAXDTPrvylVmkXCVQI85affd-jblHUreuTrOIzmlKa5XY/s1600/Pages+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-30+18-40-06.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRwrYUR4cb6jKyTQ8CXYMz6KLp60pZztIksNUWkrovqpOkiWBr9i96IwNFUHaxl9SOX0Kn71K4dr_2tgj_ddMTNRzQpbBw6jKAXDTPrvylVmkXCVQI85affd-jblHUreuTrOIzmlKa5XY/s1600/Pages+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-30+18-40-06.png" height="138" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">4. Set Allow/Do not allow there and save changes.</td></tr>
</tbody></table>
<div class="section-title" id="bulk-editing-comments" style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
2. Activating/Deactivate comments through Setting:</h2>
<div style="text-align: justify;">
You can deactivate comment by going to <b>Settings > Discussion > Default article settings > uncheck Allow people to post comments on new articles > Save the Changes</b>.</div>
<div style="text-align: justify;">
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2QhPR_nzd31VtEQmodhQdoAvZ60La65wQWoHBH251Xzy-NjfVjEsDnw7kIOPJ3R-4rSuXTZxQuZcIp7OLFCnKLAhsR7Mdyv_snjCsgbaWnYkJV5Uear7G68fLMEzYM5y2B8CTH5FKvBE/s1600/Discussion+Settings+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-30+17-13-32.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2QhPR_nzd31VtEQmodhQdoAvZ60La65wQWoHBH251Xzy-NjfVjEsDnw7kIOPJ3R-4rSuXTZxQuZcIp7OLFCnKLAhsR7Mdyv_snjCsgbaWnYkJV5Uear7G68fLMEzYM5y2B8CTH5FKvBE/s1600/Discussion+Settings+%E2%80%B9+Always+smile+%E2%80%94+WordPress+2014-10-30+17-13-32.png" height="160" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">5. Deactivating comments by going to Discussions.</td></tr>
</tbody></table>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In this Process you can deactivate comments only of those Posts/Pages which are published after you have done the change there.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hope this article helps. Thank you.</div>
</div>
Jitendra Mishrahttp://www.blogger.com/profile/01904009787317710184noreply@blogger.com