It rather hard for me to come up with a short form of my question so bear with me:
Using jQuery and AJAX, I have all posts stored in my MySQL database displaying on index.php. Each post has a button the lets the user hide that post's DIV.
Now, I want to make it so that I only see 10 results and paginate the rest. I know there are plenty of pagination plugins out there but none of them displays the next post when the user hides one of the 10 already shown posts.
So if I see Posts 1-10 on page 1 (posts 11-20 on page 2) and user hides post 8, I should see Posts 1,2,3,4,5,6,7,9,10,11 on page 1 with posts 12-21 on page 2 and so on.
Question is: How do I do that? Here's what I have right now (fetch posts from database, display posts on page + hide button toggling):
// Javascript
$(document).ready(function() {
$(document).on("click", ".hide", function(){
postID = $(this).attr('id').replace('hide_', '');
$('#post-' + postID).toggle();
return false;
});
});
// PHP
<?php
$pageposts = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts"), OBJECT);
?>
<?php if ($pageposts): ?>
<?php global $post; ?>
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post); ?>
<div id="buttons_<?php the_ID(); ?>">
<div id="hide_<?php the_ID(); ?>" class="hide" style="position:absolute; right: 2.5em;">
<a id="hidebtn_<?php the_ID(); ?>" href="#"><span></span></a>
</div>
</div>
<div id="post-<?php the_ID(); ?>">
/* display post content */
</div>
<?php endforeach; ?>
<?php endif; ?>
An easy way to figure out what would be the next ID to grab would be to store the MAX id on the page, so if your page displays 1-10, 10 would be stored as the MAX id.
When a user hides a post, the mysql query would pull 1 result where id > the stored max id.
Related
How can i get the html table rows , then by clicking the button it will show the values in another page. in short i want to hold this variables in session to be use in other purposes.
Since you mentioned sessions, you can use sessions.
Here is an example (without using table rows, but you get the idea):
page1.php
<?php
session_start();
$_SESSION['someName'] = 'someDate';
?>
page2.php
<?php
session_start();
if(isset($_SESSION['someName'])){
echo $_SESSION['someName']; //outputs someDate
}
?>
page2-js.php
<?php
session_start();
if(isset($_SESSION['someName'])){
echo '<script>alert("'.$_SESSION['someName'].'")</script>'; //outputs someDate
}
?>
I'm building my own theme. I have a page set for my blog (with a template that I made) which I'd like to just display a few of my posts. It uses the following loop:
<?php
query_posts('post_type=post');
if (have_posts()) {
while (have_posts()) {
?>
<div class="blog_post">
<h2><?php the_title(); ?></h2>
<div class="entry_date"><?php the_time('F jS, Y') ?></div>
<?php
the_post();
the_content();
?>
</div>
<?php
}
}
?>
The titles of my posts are "First Post, Second Post, Third Post, and Fourth Post" respectively. When the posts are displayed on the blog page, they are displayed in the correct order, but the titles of the posts are incorrect. The first post's title reads: "Second Post". The second post's title is: "Third Post", and so on until the last (most recent) post which has the title: "Blog" (the page title). What happened to the titles that they got so screwed up?
What I've Tried:
I've researched this a lot before I came here. I tried using get_the_title() instead but that lead to no titles being displayed. I've also tried using the_title_attribute() to no avail. I also understand that I shouldn't be using query_posts for this loop but I'm unsure which is the correct method to use for getting the posts in this particular case. Most of the info I've read was unclear though and didn't seem to fix the issue.
Any help is greatly appreciated.
Try something like this: untested
<?php
global $post;
$args = array();
$myposts = get_posts( $args );
foreach( $myposts as $post ) :
setup_postdata($post); ?>
YOUR HTML HERE
<?php endforeach;
wp_reset_postdata(); ?>
Okay Nevermind! I just found out what the problem was. I moved, "the_post()" to just after the while loop so now it reads like this:
<?php
query_posts('post_type=post');
if (have_posts()) {
while (have_posts()) {
the_post();
?>
<div class="blog_post">
<h2><?php the_title(); ?></h2>
<div class="entry_date"><?php the_time('F jS, Y') ?></div>
<?php
the_content();
?>
</div>
<?php
}
}
?>
I found this solution while I was reading about the_post() in the wordpress codex. Turns out this function is setting up information for the next post in the line, so it shouldn't be mixed in with the html output for the current post.
In regards to whether or not I should be using "query_posts()" is still something I'm unsure of and willing to take any advice. But the loop in it's current form is working.
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.
i have a single page website built on wordpress (twenty-thirteen-child template).
header content footer.
and 3 posts categories :category A category B category C.
i need to split the content into these 3 categories/sections -like this
<div class="section_top">
all the posts from category A
</div>
<div class="section_mid">
all the posts from category B
</div>
<div class="section_bot">
all the posts from category C
</div>
i got a little confused when i started to read about the wordpress main loop ,query_posts and WP_Query,eventually i have this code replacing the main loop ,so my questions are :
1 is this the correct way to do it?
2 how to give each section a unique class since i need to style each section diffrently?
here is the code (index php(in child theme)
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
$args = array('category__in' => array(catA,catB,catC));
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<div id="<?php
foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?>"
class="post-item">
<div class="post-info">
<h2 class="post-title">
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
</div>
<div class="post-content">
<?php the_content(); ?>
</div>
</div>
<?php
endwhile;
else:
?>
Oops, there are no posts.
<?php
endif;
?>
The problem with how you're trying to solve it is that all posts are still shown chronologically, so this could happen:
Category A post 12/01
Category B post 09/01
Category A post 05/01
What I'd recommend: make 3 different WordPress loops querying each category separately like so:
<div class="section_top">
WordPress loop for all the posts from category A
</div>
<div class="section_mid">
WordPress loop for all the posts from category B
</div>
<div class="section_bot">
WordPress loop for all the posts from category C
</div>
Example of such a loop:
// The Query
$the_query = new WP_Query('category_name=categoryA');
// The Loop
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
Difference between get_the_...() and the_...()
When you use functions like get_the_title() you are able to store them in a PHP variable like so:
$title = get_the_title();
echo strtoupper($title); //do something with it later
When you use functions like the_title() then the title is immediately printed on the page, so there's no need for an echo statement:
the_title();
Notice: the_permalink() has a function get_permalink(), the function get_the_permalink() does not exist. Don't ask my why ;)
I am playing with Drupal and I am trying to add a second line to the site slogan.
The following is the piece of page.tpl.php where I am working.
<?php if ($site_name || $site_slogan): ?>
<div id="name-and-slogan" class="hgroup">
<?php if ($site_name): ?>
<h1 class="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
<?php print $site_name; ?>
</a>
</h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<p class="site-slogan"><?php print $site_slogan; ?></p>
<?php endif; ?>
<?php
/* ADDED */
$node = menu_get_object();
$siteslogan2 = field_get_items('node', $node, 'field_siteslogan2');
?>
<?php if ($siteslogan2): ?>
<p class="site-slogan2"><?php print $siteslogan2; ?></p>
<?php endif; ?>
</div>
<?php endif; ?>
I basically added a new Content Type with a field called siteslogan2 (field_siteslogan2) and now I would like to retrieve and show it here.
The first problem is that the $node var is not defined (even if according to the documentation it should be). The second problem is that I receive EntityMalformedException: Missing bundle property on entity of type node. in entity_extract_ids() when I define it manually and run it.
First of all, is this the right approach to the problem? Secondly, why do I receive the EntityMalformedException and how can I fix it?
var_dump($node) produces NULL. It must be the way I get the $node content that is not good. The doc is a bit cryptic to me when it says:
$node: The node object, if there is an automatically-loaded node associated with the page, and the node ID is the second argument in the page's path (e.g. node/12345 and node/12345/revisions, but not comment/reply/12345).
This sort of thing is can be done using a preprocessing function in your theme's template.php to define and set a variable in the $varables array.
This variable then becomes available to whichever template ( page, node, form, etc ) you have done the preprocessing on. Your theme's template.php file will most likely have comments on how to do this.
for instance, doing this in the template.php creates or modifies the value of the variable $display_header, making it available for use in node.tpl.php
function yourthemename_preprocess_node(&$variables, $hook) {
$variables['display_header'] = false;
}
You can then modify the node template file to use this variable.
For something simple like a sub-slogan, you can add a setting to the theme, so it shows up on the theme's configuration page like any other theme setting.
This requires implementing this function in your theme's theme-settings.php:
function yourthemename_form_system_theme_settings_alter(&$form, $form_state) {}
This provides information to the settings form regarding the new setting. like this:
https://api.drupal.org/api/drupal/modules!system!theme.api.php/function/hook_form_system_theme_settings_alter/7
Hopefully that's enough to get you started.