Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 05-17-2016, 02:31 PM
ChrisCD ChrisCD is offline
Contributing Member
 
Join Date: 10-15-14
Location: Near Sacramento
Posts: 69
iTrader: 0 / 0%
Bending Jetpack Mobile to my will

(well sort of)

If you aren't familiar with modifying templates and plug-ins, it is probably best to find some expert help. I know enough to be dangerous. I already forgot a needed ';' and temporarily brought the entire site down.

I was looking for a relatively easy way to make our site look decent on mobile devices and get in the mobile good graces of the big G. These tips and tricks were found on various sites and I thought having them in one place might be helpful.

The jetpack plugin and Mobile module seemed like it could do the trick. First problem I faced was the menu wasn't what I wanted. Well Jetpack does have a way to modify the menu.

The first key was installing the Functionality plugin which enables you to add functions to your theme without worrying about them being obliterated by an update, especially if you are using a non-custom theme. And not sure if it was a feature of Wordpress or the plug-in, but if an error is discovered that causes the plug-in to crash, it is disabled so that the entire site doesn't go down. All of the below code examples were added to the functionality plug-in.

Our custom theme doesn't use menus so I was easily able to create one and then tell Jetpack mobile to use it, without affecting the non-mobile users.

Code:
function jetpackme_mobile_theme_menu() { return 75; } add_filter( 'jetpack_mobile_theme_menu', 'jetpackme_mobile_theme_menu' );
The next key was having a way to test if the mobile theme was in use and do some additional actions if so. This came up with our Footer. We have custom text in our themes footer file that we also needed when mobile was displayed.

Code:
// Check if we are on mobile function jetpackme_is_mobile() { // Are Jetpack Mobile functions available? if ( ! function_exists( 'jetpack_is_mobile' ) ) { return false; } // Is Mobile theme showing? if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' ) { return false; } return jetpack_is_mobile(); }
Note: There were a few variations on this function. This is the one that I found that worked for me.

Once I could test if the mobile theme was active, I could then add text to the footer from the jet pack mobile theme:

Code:
function addToFooter() { if ( jetpackme_is_mobile()) { echo '<p><center>[Your Text here]</center></p>'; } } add_action( 'wp_footer', 'addToFooter' );
You could add some in-line styling if you wanted or even add a custom CSS file. The theme files for Jetpack mobile are found under /wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven . However, it is not recommended to modify those files. As I mentioned earlier, if Jetpack mobile is updated, you lose those changes. I semi-break that rule further down.

We also have some calculators on our site that use a custom javascript file. The mobile theme didn't load the custom file. This is how to do it. You can similarly add additional scripts or css.

Code:
function load_myscripts() { if ( jetpackme_is_mobile()) { wp_register_script( 'my_script', 'http://www.yoursite.com/folder-loc/yourfile.js'); wp_enqueue_script('my_script'); wp_register_script( 'my_script2', get_template_directory() . '/inc/anotherfile.js'); wp_enqueue_script('my_script2'); wp_register_style( 'my-css','http://www.yoursite.com/folder-loc/yourfile.css' ) ); wp_enqueue_style( 'my-plugin' ); } } add_action('init', 'load_myscripts');
I also needed to be able to use a custom template file that was created in our main theme. This was a bit of fun figuring out. I ended up dropping this file in the jetpack mobile folder listed above because of some other external files I needed, but if it weren't for that I wouldn't have had to.

Code:
function switch_page_template( $template ) { if ( jetpackme_is_mobile()) { if ( is_page( 'your-page-name' ) ) { $new_template = locate_template( array( 'your-template.php' )); if ( '' != $new_template ) { return $new_template ; } } } return $template; } add_filter( 'template_include', 'switch_page_template', 99 );
Now, a big part of this template was a custom contact form. After spending 3 days trying to get all "dependencies" loaded, and tracing through the code, I couldn't get our form to work on the mobile phone. So I ended up using jetpack's conact form creator and replaced my form code with it, and it worked.

I also created a function to potentially replace or add to "the_content", but so far haven't actually had to use it so for now, I won't add that info here. There are still some things I need to work on, for instance, some of the pages have a sub-menu in a left side-bar and some pages have content that resides in the right side-bar. On a mobile phone, that content need to be placed above or below the main content respectively.

Hope this helps anybody else that is searching for solutions in the future.
cd :O)
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 05-23-2016, 04:43 AM
blizzardofozz blizzardofozz is offline
Junior Member
 
Join Date: 05-23-16
Posts: 22
iTrader: 0 / 0%
I thought WP and jetpack are made so people that don't know webdesign can make "websites"?!

If you want a custom website is easier to make one from scratch or better pay to a web designer who knows what to do.
 
Reply With Quote
  #3  
Old 05-23-2016, 06:10 AM
ChrisCD ChrisCD is offline
Contributing Member
 
Join Date: 10-15-14
Location: Near Sacramento
Posts: 69
iTrader: 0 / 0%
You certainly can, but if you do know coding, then you can customize it. And it may or may not be easier to start from scratch. I certainly don't think it was easier in this case and would have been a whole lot more expensive. Plus it was fun trying to work through the challenges.
 
Reply With Quote
  #4  
Old 05-23-2016, 06:45 AM
blizzardofozz blizzardofozz is offline
Junior Member
 
Join Date: 05-23-16
Posts: 22
iTrader: 0 / 0%
Well if you want to go cheap you take mass production WordPress. If you want custom website you make custom website. I've worked with WordPress and Joomla and similar and for me is much easier to make custom website from scratch. When you go customizing it it may become a hell! Also changing it a lot may prevent updates.

So when you start a web project you should consider - do you want a mass production WordPress or a custom website. because latter it's getting complicated.

For me it's like a square circle - you want custom WordPress... If you want custom website that represents your business better - go for custom website from the beginning. WordPress can be customized but what is the point?! The whole purpose of WordPress is to have easy low level website. And plus - it is slow monster from its core.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Jetpack comments-Urgent help needed Sunsettalks Blogging Forum 5 07-04-2013 06:33 AM
Publicize Jetpack feature sdarby Blogging Forum 3 12-23-2012 02:26 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 01:48 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC