Watch Demo First
Add Own Logo to WPTouch Mobile WordPress Site Plugin is a simplest method to add your own site logo to the Header of the WP Touch mobile version for WordPress. Well, WpTouch is the best plugin that transforms your WordPress site or blog that fits to the mobile Devices. It’s integrated with lots of good features for a mobile site layout in it, but the developers did missed out adding an important option. That is they’ve used only the linked site Name instead of adding Website Logo in the header of the WPTouch Plugin. I don’t know why they missed it out, but anyway there must be a good reason for it. Don’t worry here is the easiest way to add your own site logo to the header of the Wptouch site.
WpTouch is a WordPress Plugin used to view your website or blog as a Mobile Theme Layout site in your Mobile Devices. WpTouch is the Top downloaded mobile theme plugin in WordPress website over more than 3,889,000 hits. This plugin is build with Ajax which will make a smooth effects to the mobile site mainly optimised for mobile devices such as iPhone, Android & Blackberry. This plugin also includes theme switcher at the footer of the theme, where we can switch to the Default PC view of the site. The Main Advantage of this plugin is, the webpage will loads lightning faster than the actual PC Theme you are viewing in our Desktop.
Add Own Logo to WPTouch Mobile WordPress Site Plugin
1. Install WPTouch Plugin for your WordPress site.
2. Go to the Plugin installed directory via FTP client or Cpanel.
3. Navigate to wp-content/plugins/wptouch/themes/default/ in your wordpress directory as below.
4. Open or Edit the “header.php” file in that directory.
1. After opening “header.php” file, search for the term “drop-fade” (this is the div id for the bar containing search option in WpTouch site)
2. Just add the code
<img src="YOUR SITE LOGO URL HERE" width="100%" height="100%">
before the “drop-fade” div tag. (make sure to replace YOUR SITE LOGO URL HERE with your site logo url and use size value in % )
3. Just save the “header.php” file. you’ve done it.
After saving the edited “header.php” file, just open your site via your Mobile Device.
OMG !! you can now see the logo fixed around the header of your WPTouch wordpress site.
This is my Logo added WPTouch wordpress site of www.TechyLeakz.com
Conclusion:
Hope you guys found a solution for your WPTouch Plugin. Try to add compressed image for faster page loading. You must use the width and height value of your logo in %. so you can get a better logo output in different user agents.
Thanks for reading, share if you liked Add Own Logo to WPTouch Mobile WordPress Site Plugin
Top
Hiya, You must have done an incredible work. I will definitely yahoo this as well as in my personal see advocate to my buddies. I am self-confident they’ll be benefited from your blog.
Fantastic web site in this article! In addition your blog plenty in place quick! Just what exactly number think you’re the application of? Should i get a affiliate marketer weblink with your coordinator? I’d prefer my site jam-packed as rapidly while your own property ; )
Great post! Very useful info. Just a problem I have though, I seem to have done everything right but instead of a logo I get a broken image icon or a ‘?’.. Any advice please?
Thanks!
Vik recently posted…Who Else Wishes Spiders Were Like This…
hi vik., sorry for the delay., i think the logo was hotlink protected., can u send the logo url?
thank you 🙂
RajaGopal recently posted…Get Verified Twitter Account Symbol for Free using Simple Trick
This is the logo I want to use
http://5bored.com/wp-content/uploads/2013/04/Cartoon_logo_Center_Test.png
Thanks for your reply 🙂
Vik recently posted…Who Else Wishes Spiders Were Like This…
hi vik., the problem is with double-quotes., just use this alone img src=”http://5bored.com/wp-content/uploads/2013/04/Cartoon_logo_Center_Test.png” width=”100%” height=”100%” or simply replace the old quotes by own typing.,
thank you 🙂 cheers 🙂
RajaGopal recently posted…Get Verified Twitter Account Symbol for Free using Simple Trick
Thats exactly how I have put it, yet it still appears with the ‘?’ icon.
Vik recently posted…Who Else Wishes Spiders Were Like This…
vik im saying that dont copy the code., jus see and type the full code.. it will work..
thank you 🙂
RajaGopal recently posted…Get Verified Twitter Account Symbol for Free using Simple Trick
Hey, I got it to work, I removed the quotation marks from around the image link, so thats sorted, my only problem now is the fitting. The logo is making the page stretch slightly. How can I stop it from doing that? Thanks!
Vik recently posted…Who Else Wishes Spiders Were Like This…
fine vik., just change the width and height size to px or reduce the %.,
thank you 🙂
RajaGopal recently posted…Get Verified Twitter Account Symbol for Free using Simple Trick
Hmmm, changing them does nothing. I re-did the logo and made it smaller but now there is white space on the right, if I increase % it stays the same, if I change it to PX it also stays the same.
BTW, if I manage to fit it perfectly on say, samsung galaxy s3, will it be the same for every other phone, example from Iphone5 to HTC wildfire (small screen phone)?
Thanks!
Vik recently posted…8 Cool Movie Themed PC Case Mods…
I love these aritslec. How many words can a wordsmith smith?
Hello RajaGoapal,
I came across your website and really do appreciate your tutorial for the logo.
Quick question? Is is possible to add contact information such as phone numbers at the footer of the WPtouch?
Hi mark., thanks for the comment., yes you can add, just add ur code to the footer.php file in the same folder.
thank you 🙂
RajaGopal recently posted…Get Verified Twitter Account Symbol for Free using Simple Trick
Hi RajaGopal,
I added logo in right place, thank you. But logo is wrong colors. Should be white background and green font, but shows black background and purple font? Image is .jpg file image from website. Can you advise why is not correct on wptouch? Thank you.
hi alex., Try to make a logo with transparent background and save it as .png., that should work., 🙂
RajaGopal recently posted…Capture or Record PC Screen as Gif Animation in Windows
Thank you newman., cheers 🙂
RajaGopal recently posted…Copy or Extract Text from Image File and Paste in Notepad Easily
Actually I got it to work by ONLY using width=”100%” because using both was merely filling up the container with a distorted image. Thanks for the post, it worked nicely!
hi newman., for that issue you should use like this width=”100%” height=”100%” inside the img tag as shown in the screenshot.,
thank you., keep in touch with techyleakz., 🙂
RajaGopal recently posted…Easily Find any Account Password Typed in your Computer Browser
what size image do you recommend starting with for the png file? Obviously the image should be at least 4 times wider than the height.
I love how simple your directions are to follow, but unfortunately I can’t find the “drop-fade term anywhere in my header.php file….
Thanks for the comment kate., 🙂 otherwise just add your logo img src at the location next to “headerbar-menu” div-id as below.,
div id=”headerbar-menu”
a href
/div
/div
**** YOUR LOGO URL HERE ****
RajaGopal recently posted…Easily Find any Account Password Typed in your Computer Browser