Mobile Web Development -WordPress theme based on jQTouch
Posted on June 17, 2011
Once we realized that we needed external help for our iPhone app we select a web based solution :
WordPress + jQuery + jQTouch = WordPress iPhone Theme
In few hours I’ve create a custom menu in wordpress from help pages Appearance => Menus – Menu_help
This is specification :
Attach JqTouch: http://www.jqtouch.com/preview/demos/main/#home
Main page – root menu page. see. «Appearance» – «Menu», there i’ve created a sample structure with root page “Iphone help”
Page title in template header same as menu.
Under title – list of children pages. Numbers from right – count of sub menu items in section.
Under sub menu list , at page bottom – current page content (without title). Content showing at same style like phrase «Add this page to your home screen…» in template.
Naturally, if there is click on sub menu item we show same page : header , sub menu list, page content. an at the top right corner button @back@, button title is – title of parent page.
There is only 4 files without jQTouch in complected theme
functions.php (registred Menu_help)
<?php<br />
if ( function_exists( 'register_nav_menu' ) ) {<br />
register_nav_menu( 'Menu_help', 'Menu Help' );<br />
}<br />
?>
header.php
<!doctype html><br />
<html><br />
<head><br />
<meta charset="<?php bloginfo( 'charset' ); ?>" /><br />
<title><?php wp_title();?></title></p>
<style type="text/css" media="screen">@import "<?php bloginfo('stylesheet_directory'); ?>/jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">@import "<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/theme.css";</style>
<p> <script src="<?php bloginfo('stylesheet_directory'); ?>/jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="<?php bloginfo( 'charset' ); ?>"></script><br />
<script src="<?php bloginfo('stylesheet_directory'); ?>/jqtouch/jqtouch.js" type="application/x-javascript" charset="<?php bloginfo( 'charset' ); ?>"></script><br />
<script type="text/javascript" charset="<?php bloginfo( 'charset' ); ?>">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/back_button.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/back_button_clicked.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/button_clicked.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/grayButton.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/whiteButton.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/loading.gif'
]
});</p>
<p> </script></p>
<style type="text/css" media="screen">
body.fullscreen #home .info {
display: none;
}
.info p {
text-align: justify;
}
</style>
<p> </head><br />
<body>
index.php
<?php get_header();?><br />
<?php<br />
$menu_name = 'Menu_help';<br />
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {<br />
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );<br />
$menu_items = wp_get_nav_menu_items($menu->term_id);<br />
$menu_items1 = array();</p>
<p> foreach ( (array) $menu_items as $key => $menu_item ) {<br />
foreach ( (array) $menu_items as $dkey => $dmenu_item ) {<br />
if ($dmenu_item->menu_item_parent==$menu_item->ID) $menu_item->children[] = $dmenu_item;<br />
}<br />
$menu_items1[$menu_item->ID] = $menu_item;<br />
}<br />
$menu_items = $menu_items1;</p>
<p> foreach ( (array) $menu_items as $key => $menu_item ) {<br />
?></p>
<div id="<?=$menu_item->ID?>" <?php echo (($menu_item->menu_item_parent==0) ? "class=\"current\"" : "")?>></p>
<div class="toolbar">
<h1><?=$menu_item->title?></h1>
<p> <?php if ($menu_item->menu_item_parent>0) 
><a href="#" class="back"><?=$menu_items[$menu_item->menu_item_parent]->title?></a><?php endif;?>
</div>
<ul class="rounded">
<?php<br />
foreach ( (array) $menu_item->children as $dkey => $dmenu_item ) { ?></p>
<li class="arrow"><a href="#<?=$dmenu_item->ID?>"><?=$dmenu_item->title?></a> <?php if (count($dmenu_item->children)>0) ><small class="counter"><?=count($dmenu_item->children)?></small><?php endif;?></li>
<p> <?php<br />
}<br />
?>
</ul>
<p> <?php<br />
if ($menu_item->object=="page" || $menu_item->object=="post") {<br />
if ($menu_item->object=="page") $post = get_page( $menu_item->object_id );<br />
elseif ($menu_item->object=="post") $post = get_post( $menu_item->object_id );</p>
<p> $post->post_content = apply_filters('the_content', $post->post_content);<br />
$post->post_content = str_replace(']]>', ']]>', $post->post_content);</p>
<p> if (!empty($post->post_content)) {<br />
?></p>
<div class="info">
<?=$post->post_content?>
</div>
<p> <?php<br />
}}<br />
?>
</div>
<p> <?php<br />
}</p>
<p>}</p>
<p>?></p>
<p><?php get_footer(); ?>
footer.php
<?php wp_footer();?><br /> </body><br /> </html>
