Jquery Mobile with 2 set of page - wordpress

I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.
Details on issue.
We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.
Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.
Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.
Hope I make sense.
Edit here is code: [not sure if this code will help at all]
<?php
get_header();
global $post;
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()) { $the_query->the_post();
$prev =get_previous_post();
$next =get_next_post();
if($prev) {
$prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
} else {
$prev='';
}
if($next) {
$next = "#page-".$next->ID; //get_permalink($next->ID);
} else {
$next='';
}
if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
<?php } else { ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>">
<?php } ?>
<div class="post_box">
<h2><blockquote><?php the_title(); ?></blockquote></h2>
<div class="post_entry">
<?php the_content(); ?>
</div>
</div><!-- post_box -->
</div>
<?php }
} ?>
<?php get_footer(); ?>
This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.

To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.
Reference: jQuery Mobile - Links

For those who have similar problem, I fix it by using following:
1) I add a "noswipe" class to A Tag so I can refer it in Jquery
2) I add following code
$(function(){
$(".noswipe").click(function(){
window.location.href= $(this).attr("href");
return false;
});
});
The above code simply enforce to skip the Mobile's parsing and calling and works for my case.

Related

Open ad clicking anywhere in wordpress

I have wordpress site and I'm using this script
onclick="<?php if(!isset($_COOKIE['visited'])){echo"window.open('http://link', '_blank')"; setcookie("visited", "1", time()+3600*24); header("Refresh:0");} ?>"
in body line. So it means I'm using
<body <?php body_class(); ?> onclick="<?php if(!isset($_COOKIE['visited'])){echo"window.open('http://link', '_blank')"; setcookie("visited", "1", time()+3600*24); header("Refresh:0");} ?>">
on header.php file of the theme.
But it opens the link in every click.
I want to open it only one time until I refresh the page or open new page.
How can I do it.
Please help.
Thanks in advance.
Greetings.
Like the setcookie function reference says:
cookies must be sent before any output from your script
First solution
You could add this at the very top oh header.php:
<?php
$onclick = '';
if(!isset($_COOKIE['visited'])) {
setcookie('visited', '1', time()+3600*24, COOKIEPATH, COOKIE_DOMAIN);
$onclick = 'onclick="window.open(\'http://link\', \'_blank\')"';
}
?>
Update: I've added the constants COOKIEPATH and COOKIE_DOMAIN like explained here.
And this for your body tag:
<body <?php body_class(); ?> <?php echo $onclick; ?>>
Better solution
The prior solution doesn't ensure the cookie is set before any output sent (there could be some characters in one of you template files before get_header() is called, or a plugin could add something).
Instead you should add an action to a Wordpress hook that is always called before any output (like init).
So try adding to your functions.php file:
add_action('init', 'set_visited_cookie');
function set_visited_cookie() {
if (!isset($_COOKIE['visited'])) {
setcookie('visited', '1', strtotime('+1 day'), COOKIEPATH, COOKIE_DOMAIN);
}
}
As for your body tag:
<body <?php body_class(); ?> <?php if(!isset($_COOKIE['visited'])): ?> onclick="window.open('http://link', '_blank')" <?php endif; ?>>

WordPress page content in Modal Pop-Up

I am working on a WordPress gallery website which has only three pages: Home, Gallery, and Bio (http://adamgreener.com/).
When you click Bio, the Bio content pops up, powered by Easy Modal plugin (the content is manually typed in HTML in the plugin settings).
I also have the exact same HTML content in a WordPress page (which mobile viewers see, rather than a popup).
The page is very simple to edit, but the Modal content is not so friendly to the average user. I am seeking a way that I can allow the user to edit only the Bio page, and have that modal content update at the same time.
What would be the best route for such an action?
Thanks in advance!
You could use get_page to get the page content, and a shortcode to display it in the popup. In the functions.php file of your WordPress theme, e.g.:
add_action( 'init', 'greener_shortcode_init', 11 );
function greener_shortcode_init()
{
add_shortcode( 'greener_bio', 'greener_bio_shortcode' );
}
function greener_bio_shortcode( $atts )
{
$page_id = 123; // the ID of the Bio page
$page_data = get_page( $page_id );
$return = '';
$return .= '<h2>' . $page_data->post_title . '</h2>';
$return .= $page_data->post_content;
return $return;
}
Then, in your modal, use the shortcode:
[greener_bio]
There are two possible ways to accomplish what you're going for, both described in depth in my blog post: https://allurewebsolutions.com/open-wordpress-post-modal-without-plugin
You can also just use my plugin for this: https://wordpress.org/plugins/wp-post-modal/
First Method
The first method requires modifying the template that serves the content you want to appear in the modal. For example, you have a template called modal-content-template.php.
Inside that template we wrap the content we want loaded into the modal with:
<?php if (!$_GET) { ?>
// content that gets loaded on mobile
<?php } ?>
Full example of a template where we are excluding the WordPress header and footer:
<?php if (!$_GET) { get_header(); } ?>
<article>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1 class="page-title"></h1>
<section class="entry-content cf">
<?php the_content(); ?>
</section>
</article>
<?php if (!$_GET) { get_footer(); } ?>
CodePen example for the JS required to make this work
Second Method
The second method is a little more elegant. We use the modalContent.load(post_link + ' #modal-ready'); method to load the modal content.
The modal contact is wrapped in a wrapper container with ID #modal-ready. This can be done without even touching the page template using a function that hooks into the content.
add_action('the_content', 'wrap_content');
function wrap_content($content)
{
return '<div id="modal-ready">' . $content . '</div>';
}

Hide Empty Tab on Magento Frontend Product Page

We installed Wordpress on our server and the Fishpig extension that integrates Wordpress and Magento. We want to make use of the extension's ability to associate blog posts and products by adding related posts to a new tab on the frontend product page (where the product description and upsell products are). I got all of that to work--there is a new tab on the product pages titled "Related Blog Posts" and when selected, it displays the post titles and excerpts exactly how I wanted it to. The problem is, that tab displays even when there are no related blog posts. How do I hide it when it's empty?
There's probably something simple that I'm missing. Here's how I added the tab:
1) This file app/design/frontend/base/default/layout/wordpress.xml establishes which block the related posts are displayed in on the frontend product page.
In this file, near the bottom, I changed the reference name from product.info.additional to *related_blog_posts*.
2) To the file: app/design/frontend/default/{template}/layout/catalog.xml near line 210, I placed the following code. I put it between similar code portions for the product description and the product upsells.
<action method="addTab" translate="title" module="catalog"><alias>related_blog_posts</alias><title>Related Blog Posts</title><block>catalog/product_list_relatedposts</block><template>catalog/product/list/relatedposts.phtml</template></action>
3) Added a new file: app/code/local/Mage/Catalog/Block/Product/List/relatedposts.php Added the following code to this file:
class Mage_Catalog_Block_Product_List_Relatedposts extends Mage_Core_Block_Template
{
protected $_list;
public function __construct()
{
parent::__construct();
$this->setTemplate('catalog/product/view/additional.phtml');
}
public function getChildHtmlList()
{
if (is_null($this->_list)) {
$this->_list = array();
foreach ($this->getSortedChildren() as $name) {
$block = $this->getLayout()->getBlock($name);
if (!$block) {
Mage::exception(Mage::helper('catalog')->__('Invalid block: %s.', $name));
}
$this->_list[] = $block->toHtml();
}
}
return $this->_list;
}
}
4) Added a new file: app/design/frontend/default/{template}/template/catalog/product/list/Relatedposts.phtml and added the following code to this file:
<?php foreach ($this->getChildHtmlList () as $_html): ?>
<div class="collateral-box">
<?php echo $_html ?>
</div>
<?php endforeach; ?>
5) In the file app/design/frontend/base/default/template/wordpress/post/associated/list.phtml I changed the following code:
<ul>
<?php foreach($posts as $post): ?>
<li>
<?php echo $this->escapeHtml($post->getPostTitle()) ?>
</li>
<?php endforeach; ?>
</ul>
To:
<div class="related-posts">
<?php foreach($posts as $post): ?>
<h3><?php echo $this->escapeHtml($post->getPostTitle()) ?></h3>
<?php $post->setExcerptSize($this->getExcerptLength()) ?>
<p class="related-post-excerpt"><?php echo $post->getPostExcerpt() ?></p>
<?php endforeach; ?>
</div>
This last change adds an excerpt to each related post instead of just displaying the title.
6) Cleared caches and recompiled the site.
Summary: The new tab appears on the frontend product page and the related blog posts are appearing within the tab as they should. The tab, however, displays even when there are no related blog posts for that product. I have tried multiple ways of wrapping the code in Relatedposts.phtml in if/count conditions but I can't get anything to work. How do I prevent my new tab from appearing when there is no content?
I would try something like this or like you had mentioned some sort of count, in
app/design/frontend/default/{template}/template/catalog/product/list/Relatedposts.phtml
<?php
if($this->getChildHtmlList()): ?>
<?php foreach ($this->getChildHtmlList () as $_html): ?>
<div class="collateral-box">
<?php echo $_html ?>
</div>
<?php endforeach; ?>
<?php endif; ?>
You also need to ensure that this block is not returning any white space either because it will be interpreted as content and create the tab. I also had a custom tab and this was the issue for me. If you are having trouble you should Zend_Debug::dump() the $this->getChildHtmlList() and see what is getting generated.

php logo call in block - Drupal 7

I am building out a site in drupal 7 and running into a ton of problems... very new to drupal here.
I pulled the php call for the logo out of the page.tpl file and put into the header block to be added to all pages. I understand I should probably just leave it in the page.tpl file but thought it made sense to utilize the header block but it is no longer working. can someone explain why this is not working?
here is the code
<div id="logo"><?php if ($logo): ?>
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
<?php endif; ?></div>
It's because the variable $logo is not available in block.tpl.php, it is provided only to page.tpl.php.
You can actually grab the values yourself like this:
$theme_name = 'name_of_theme';
$settings = variable_get('theme_' . $theme_name . '_settings', array());
if (isset($settings['logo_path'])) {
$logo = file_create_url($settings['logo_path']);
}
all what you need, it's additions in template.php this code
function hook_preprocess_region(&$variables) {
$variables['logo'] = theme_get_setting('logo');
$variables['front_page'] = variable_get('site_frontpage', 'node');
}
clear cache
and $logo and $front_page will works good.

How do I sort by a custom field without manually creating a new page?

Having a bit of an issue with Wordpress here. In all honesty I've always designed my sites from scratch and "coded" from the ground up. Lately I've been trying to work with WP as I've heard good things about it.
It would appear that WP gives you many things for free (e.g. dynamic "pages" based on CATEGORIES). However, I would like to know how to manipulate these freebies without reinventing the wheel. For example, I would like to have my SUB-MENU display a list of post categories. But I would like to sort those categories by a CUSTOM FIELD.
Now, I could reinvent the wheel and manually create (and link to) a new page for each sort, so on and so forth, (which I don't fundamentally mind doing) however, I'm hoping there is a way around this via plugins or otherwise. I've seen several tutorials on custom queries, but they stop short of implementation -- they simply give the query without telling exactly whether to create a new page or plug it into a function somewhere.
Any input would be most appreciated.
Best.
At the top of category.php template in your theme's root directory, add the following to add your custom sort field to the query:
<?php
function is_valid_custom_sort_field($field)
{
// implementation left as an exercise for the questioner
return true;
}
if ($_REQUEST['sort_custom_field'] && is_valid_custom_sort_field($_REQUEST['sort_custom_field'])) {
query_posts($query_string . '&orderby='.$_REQUEST['sort_custom_field']);
}
See:
http://codex.wordpress.org/Function_Reference/query_posts
If your theme doesn't have a category.php, here is a simple default template to base it on (copied from the included twentyten theme):
<?php
/**
* The template for displaying Category Archive pages.
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<h1 class="page-title"><?php
printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' );
?></h1>
<?php
$category_description = category_description();
if ( ! empty( $category_description ) )
echo '<div class="archive-meta">' . $category_description . '</div>';
/* Run the loop for the category page to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-category.php and that will be used instead.
*/
get_template_part( 'loop', 'category' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Resources