Wednesday, 27 May 2015
How to add custom logo in wordpress theme
The WordPress theme customizer is famous for being able to change
your theme colors in real time, but did you know it can handle almost
any type of theme option?
You can add layout options, image uploaders, text fields, and lots more. The possibilities are endless!
There is almost no need for theme options pages anymore. I personally like the idea of having no theme options page, and limiting everything to the theme customizer.
I’m going to show you how to add a custom logo uploader to your theme customizer, then display it in place of the site title and tagline.
First, we create our function to register the new settings. I’ve prefixed my function name with m1, but you can use whatever you want:
You can add layout options, image uploaders, text fields, and lots more. The possibilities are endless!
There is almost no need for theme options pages anymore. I personally like the idea of having no theme options page, and limiting everything to the theme customizer.
I’m going to show you how to add a custom logo uploader to your theme customizer, then display it in place of the site title and tagline.
Create the logo uploader setting
This may be review for some of you, but I’ll go over my basic setup for using the theme customizer. In my custom theme folder most of the code is going into /inc/customizer.php, and then we will include that file via functions.php. You could put all the code into functions.php and it will work, but it’s nice to keep functions.php uncluttered.First, we create our function to register the new settings. I’ve prefixed my function name with m1, but you can use whatever you want:
function
m1_customize_register(
$wp_customize
) {
// All the code in this tutorial goes here
}
add_action(
'customize_register'
,
'm1_customize_register'
);
Inside our function we need to register a setting. This saves the logo url in the database so we can use it in our theme.
function
m1_customize_register(
$wp_customize
) {
$wp_customize
->add_setting(
'm1_logo'
);
// Add setting for logo uploader
}
add_action(
'customize_register'
,
'm1_customize_register'
);
Next, we add the uploader and assign it to a section. You could create a
new section, but I think it goes nicely with the title and tagline. If
you are using a different name for your setting, make sure you change
all instances of m1_logo to something else.
function
m1_customize_register(
$wp_customize
) {
$wp_customize
->add_setting(
'm1_logo'
);
// Add setting for logo uploader
// Add control for logo uploader (actual uploader)
$wp_customize
->add_control(
new
WP_Customize_Image_Control(
$wp_customize
,
'm1_logo'
,
array
(
'label'
=> __(
'Upload Logo (replaces text)'
,
'm1'
),
'section'
=>
'title_tagline'
,
'settings'
=>
'm1_logo'
,
) ) );
}
add_action(
'customize_register'
,
'm1_customize_register'
);
That’s it for the code in customizer.php. To make sure our theme uses
this file, simply add this one line of code in functions.php:
require
get_template_directory() .
'/inc/customizer.php'
;
That’s it! We kept our functions.php file clean as a whistle.
Next we need to display our logo.
To get the logo url from our theme customizer, you use this code:
You can store that in a variable if you want, or echo it out as is.
Since we are only using this value once in our theme, we don’t need to
store it in a variable.
Wherever your site title is displayed in header.php, you’ll want to replace it with this code:
Next we need to display our logo.
Displaying the logo
We are going to work in our theme’s header.php file to display the logo. If there is no logo, we’ll just display the site title and description.To get the logo url from our theme customizer, you use this code:
get_theme_mod(
'm1_logo'
)
Wherever your site title is displayed in header.php, you’ll want to replace it with this code:
<?php
if
( get_theme_mod(
'm1_logo'
) ) : ?>
<a href=
"<?php echo esc_url( home_url( '/' ) ); ?>"
id=
"site-logo"
title=
"<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel=
"home"
>
<img src=
"<?php echo get_theme_mod( 'm1_logo' ); ?>"
alt=
"<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
>
</a>
<?php
else
: ?>
<hgroup>
<h1
class
=
"site-title"
><a href=
"<?php echo esc_url( home_url( '/' ) ); ?>"
title=
"<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel=
"home"
><?php bloginfo(
'name'
); ?></a></h1>
<p
class
=
"site-description"
><?php bloginfo(
'description'
); ?></p>
</hgroup>
<?php
endif
; ?>
So let’s talk through that chunk of code. First, we create an if
statement that says, “if a theme logo has been uploaded, display this
logo code. Otherwise, display the site title and site description.”
The logo is linked to the homepage, it has some alt text, blah blah blah. The important part is this:
The logo is linked to the homepage, it has some alt text, blah blah blah. The important part is this:
src=
"<?php echo get_theme_mod( 'm1_logo' ); ?>"
Make sure to tell the user a recommended logo size, otherwise they can
upload a huge file that doesn’t fit quite right. You might also want to
give the container around the logo a constrained width, so it will fit
no matter what.
How to disable admin bar in wordpress
Set the display status of the Toolbar for the front side of your website (you cannot turn off the toolbar on the WordPress dashboard).
Placing the above line of code in theme's function.php file will prevent the Toolbar from rendering on the front end of your site.
You can also determine for which users the admin bar is shown. For example the following lines will only display the admin bar for users with administrative privileges.
Placing the above line of code in theme's function.php file will prevent the Toolbar from rendering on the front end of your site.
You can also determine for which users the admin bar is shown. For example the following lines will only display the admin bar for users with administrative privileges.
if ( ! current_user_can( 'manage_options' ) ) { show_admin_bar( false ); }
With newer version of WordPress you may need to use the following which will leave the Toolbar available in the Dashboard but hide it on all front facing pages.
add_filter('show_admin_bar', '__return_false');
how to disable comments in wordpress
Settings >> Discussion >> uncheck "Allow people to post comments on new articles"
This applies to new posts that you will publish from now on. To disallow comments from already publish posts:
Posts >> select them all and "Edit" under bulk actions and hit apply >> choose "do not allow" next to comments and hit update posts. and other way
The topic title talks about "pages". Assuming that you want to continue have discussion on your blog posts but turn it off only from "pages, you'll have to remove the code snippet "
This applies to new posts that you will publish from now on. To disallow comments from already publish posts:
Posts >> select them all and "Edit" under bulk actions and hit apply >> choose "do not allow" next to comments and hit update posts. and other way
The topic title talks about "pages". Assuming that you want to continue have discussion on your blog posts but turn it off only from "pages, you'll have to remove the code snippet "
<?php comments_template(); ?>
" from the page.php of your theme, as mercime advised.How to turn off wordpress update notification
For all the WordPress users, it is really
annoying when WordPress update notice is displayed on the dashboard if
there are any upgrade available for the installed WordPress version as
shown in the figure below. The notice will not clear until the WordPress
is upgraded to latest version. Similarly the update notice for
installed plugins & themes is displayed on the WordPress dashboard,
plugins & themes pages. Actually it is good to know that updates are
available but administrators who maintain multiple installations of
WordPress on behalf of other people (eg. clients) may not want theme
update notifications to be shown to the users of these installations,
then disabling such notifications becomes necessary. In this article, I
will show how to disable update notifications for core WordPress as well
as for plugins and themes.
If you install & activate these plugins, you will have to keep yourself updated with the latest version of your active WordPress, plugins & themes so that your blog or website wont be susceptible to security vulnerabilities or performance issues. Just deactivate the plugin for short period of time & update yourself.
1. To Disable Update WordPress nag :
Insert the following code to the functions.php file of your active theme. It will remove the WordPress update nag e.g. WordPress 3.9.1 is available! Please update now, from the all users dashboard, admin dashboard & from Updates page as well.add_action('after_setup_theme','remove_core_updates'); function remove_core_updates() { if(! current_user_can('update_core')){return;} add_action('init', create_function('$a',"remove_action( 'init', 'wp_version_check' );"),2); add_filter('pre_option_update_core','__return_null'); add_filter('pre_site_transient_update_core','__return_null'); }
2. To Disable Plugin Update Notifications :
Insert the following code to the functions.php file of your active theme. It will remove the update notifications of all the installed plugins.remove_action('load-update-core.php','wp_update_plugins'); add_filter('pre_site_transient_update_plugins','__return_null');
3. To Disable all the Nags & Notifications :
Insert the following code the functions.php file of your active theme. This code disables all the updates notifications regarding plugins, themes & WordPress completely.function remove_core_updates(){ global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,); } add_filter('pre_site_transient_update_core','remove_core_updates'); add_filter('pre_site_transient_update_plugins','remove_core_updates'); add_filter('pre_site_transient_update_themes','remove_core_updates');
Apart form these codes there are some WordPress plugins available to Disable WordPress Update Notifications & Nags :If you install & activate these plugins, you will have to keep yourself updated with the latest version of your active WordPress, plugins & themes so that your blog or website wont be susceptible to security vulnerabilities or performance issues. Just deactivate the plugin for short period of time & update yourself.
Tuesday, 19 May 2015
how to change woocommerce language?
WooCommerce comes localization ready out of the box – all that’s
needed is your translation, if the plugin does not come bundled with one
for your language.
There are several methods to create a translation, most of which are outlined in the WordPress Codex. However, we find the easiest method is to use a plugin called Loco Translate. More advanced users can use PoEdit. Both methods are covered in this doc.
If for some reason the translation packs install fails, you can force the download in WooCommerce > System Status > Tools > Force Translation Upgrade:
PO and MO files are copied in wp-content/languages/woocommerce/
There are several methods to create a translation, most of which are outlined in the WordPress Codex. However, we find the easiest method is to use a plugin called Loco Translate. More advanced users can use PoEdit. Both methods are covered in this doc.
Before you begin
WooCommerce includes a language file (.po or .pot file) which contains all of the English text. You can find this language file inside the plugin folder in woocommerce/i18n/languages/.Set up WordPress
WordPress needs to be told which language it should run under.- Go to: Dashboard > Settings > General and change the Site language.
WooCommerce 2.2+ Language Packs
From version 2.2, WooCommerce includes a language pack downloader. PO and MO files will no longer be bundled with the plugin – they will be downloadable from your dashboard if you have the WPLANG constant set, or from a git repository if you wish to grab them manually. A notice will be displayed within your administration:If for some reason the translation packs install fails, you can force the download in WooCommerce > System Status > Tools > Force Translation Upgrade:
PO and MO files are copied in wp-content/languages/woocommerce/
How to re-order the product tabs?
Change it as you want it and add to the functions.php, but here is a
snippet to put the reviews first, description second and additional info
third:
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );function woo_reorder_tabs( $tabs ) {$tabs['reviews']['priority'] = 5; // Reviews first$tabs['description']['priority'] = 10; // Description second$tabs['additional_information']['priority'] = 15; // Additional information thirdreturn $tabs;}
Connect your eBay store to your WooCommerce shop with ease
Using this easy yet flexible plugin, you can link up your eBay store
with your WooCommerce shop as well as benefit from all the added
features, including verifying items and getting listing fees before
actually listing them. WP-Lister for eBay plugin
WP-Lister for eBay Download
WP-Lister for eBay Download
How to add videos to your products for customers to watch
This simple little "WooCommerce Video Product Tab" plugin to allows you to add a Video to the Product page
with an additional tab that allows your customers to view the video you
embedded..simple! Click below link to download this woocommerce addon
WooCommerce Video Product Tab Download
WooCommerce Video Product Tab Download
How to remove the ‘reviews’ tab so that only ‘product description’ appears
Just add this little line of code to your custom.css file:
.woocommerce .woocommerce-tabs ul.tabs {display:none !important}
Subscribe to:
Posts (Atom)
Popular Articles
-
WooCommerce comes localization ready out of the box – all that’s needed is your translation, if the plugin does not come bundled with one ...
-
A common WooCommerce question lately has been how to hide the “Free” price label in the product/category/shop pages. Thanks to WooCommer...
-
Open the settings page for Contact Form 7, and then open the contact form you want to add. Each contact form has its own tag (shortcode...
-
Displays a link to the user account section. If the user is not logged in the link will display ‘Login / Register’ and take the use to the...
-
Modify the border size (1px, 2px, etc), style (solid, dotted, dashed) and color (#xxxxxx) to suit your needs in custom.css: .woocommerce ...
-
This one is simple. If you’ve been building WordPress themes for a while, you’ll remember the days when you had to manually include code to...
-
If you would like to hook in your own functions, the process is quite simple. You first need to know a few pieces of information. For act...
-
On home page, we generally show a fixed number of recent posts with summary. Although, WordPress provides Sticky Posts functionality but n...
-
Most people commenting on blogs online have an avatar associated with them. If, however, they don’t and you don’t particularly like the Wor...
-
The featured image function, as the codex explains, allows the author to choose a representative image for Posts, Pages or Custom Post Ty...