I would like to display my posts in an accordion on a single page in wordpress. Not some content inside a post, but the post itself with the title as the heading and the post's content inside the collapsible part. What would be the best way to do that?
Thanks in advance!
If you have no objections for using jQuery accordion, then
display the posts acc. to the accordion's markup and load the js. This should do the work.
Something like this:
<div id="accordion">
<?php while(has_posts()) { ?>
<h3><?php the_title(); ?></h3>
<div>
<p>
<?php the_content(); ?>
</p>
</div>
<?php } ?>
(I cannot check this right now, so please verify the syntax.)
you can use the accordion functionality wordpress default functionality only need to add the accordion jquery in your header.php file and css for that then activation code like
<?php wp_enqueue_script('jquery-ui-accordion'); ?>
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true,
heightStyle: "content"
});
});
Related
How can i wrap the post content in custom div in my wordpress website?
This is from the single.php file :
<div class="entry">
<?php the_content(''); // content ?>
<?php wp_link_pages(); // content pagination ?>
<div class="clear"></div>
</div><!-- end entry -->
I can't just put div around the_content() function because i have some plugins (Related posts and social sharing plugins) that append content to the the_content() function so if i put DIV around the function it will not work like i want because it will wrap also the plugins content. How can i achieve this?
Any help/ideas appreciated.
You can add a filter on the_content. Put this in your function.php.
Note that, the add_filter function has a parameter priority, check this link.
function my_content($content) {
global $post;
return '<div class="myWrapper">'.$content.'</div>';
}
add_filter('the_content', 'my_content');
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 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>';
}
I need wordpress plugin for this kind of header image http://www.slb.com/services/drilling.aspx like in this web site. And this image will not be slider but it's static image on perticular page and category and also different image for all categories and pages.
Easiest & best way is create a custom field named banner & in your header.php place below code.
<div class="banner">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<?php endif; ?>
<div>
But as you want plugin to do this, have a look at plugin named Dynamic Header.
I am quite new to Wordpress and try to customize my Wordpress theme. My posts are always different. But basically there is a title, a text and a NivoSlider/Image/Vimeo Video.
If I use the basic the_content function it displays the post like that:
<h2>Title of the Post</h2>
<p><div class="slider-wrapper">Slider</div>Text</p>
It always includes the Slider/Image/Video in the Tag. How can I split the_content object?
I would like to have my posts display like that e.g. for the NivoSlider:
<div class="slider-wrapper">Slider</div>
<h2>Title of the Post</h2>
<p><Text</p>
It would be really great if somebody could tell me the easiest way to do for all the different kinds of posts.
I hope you understand my explanation, if you need more details, just tell me.
Thanks in advanced.
Best,
Brigi
Personally, I would take the shortcode out from your Content Body altogether, and place it in a Custom Field (named something like "postSlider"). Then you can structure your template like so:
<?php
do_shortcode(get_post_meta(get_the_ID(), 'postSlider'));
?>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
You needs to create a custom page template for your posts. In that page template you can define your slider. Then just put your text in the content section.
Before doing serious coding refer this: Stepping Into Templates
Thanks again for your answer. Finally I used the Types plugin for Wordpress. You can easily customize your own field and use it in your index.php file with the following code:
Custom Field Image:
<?php echo(types_render_field("field-slug-image", array("alt"=>"Product image", "width"=>"600","height"=>"300","proportional"=>"true"))); ?>
Shortcode Custom Field for the Slider:
<?php echo apply_filters('the_content', get_post_meta($post->ID, 'field-slug-slider', true)); ?>
Shortcode Custom Field for the Vimeo video:
<?php echo apply_filters('the_content', get_post_meta($post->ID, 'field-slug-video', true)); ?>
Title and Content:
<h2><?php the_title(); ?></h2>
<?php the_content('Read the full post',true);?>