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');
Related
In WordPress page, the <main> tags are wrapped by <p>s, but <div>s are not.
WordPress 4.7.12
Example 1: Using main tag
<main>
<div>this is main</div>
</main>
results
<p><main></p>
<div>this is main</div>
<p></main></p>
Example 2: Using div#main
<div id="main">
<div>this is main</div>
</div>
results
<div id="main">
<div>this is main</div>
</div>
Question
What is the trigger to wrap with <p>?
Remarks
My page.php is below.
<?php
/**
* #package WordPress
* #subpackage Default_Theme
*/
get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php remove_filter('the_content', 'wpautop'); ?>
<?php the_content('<p class="serif">' . __('Read the rest of this page »', 'kubrick') . '</p>'); ?>
<?php add_filter('the_content', 'wpautop'); ?>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
<div> element is used to design to describe a container of data.
<p> element is designed to describe a paragraph of content.
<main> element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
Note: As we know <div> tag represents container and <p> tag represents paragraph of content so the can not lie in tag.
More details
It's defined in wp-includes/formatting.php#wpautop as disribed in this post.
I edited my formatting.php using the code in the post and the <p> is eliminated.
Open wp-includes/formatting.php
Find function wpautop in it.
Copy the function.
Open [your theme folder]/functions.php.
Paste 3 and rename wpautop to wpautop_fork.
Find the line defining $allblocks = '(?:table|thead|tfoot|caption|col|....
Add main (see the code below.)
Register wpautop_folk instead of wpautop.
My function.php becomes following code.
function wpautop_forked( $pee, $br = true ) {
//...
// Add 'main' at the tail.
$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary|main)'
//...
}
remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop_forked');
This Q&A is also helpful:
Stop Wordpress Wrapping Images In A “P” Tag
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"
});
});
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 have created custom post type portfolio in wordpress. I have created categories like web-design, logo design, e-commerce, photography... etc. I have retrieved all these category as the navigation menu in portfolio template file (assigned to the portfolio page). Now I want there should be a link(view all) in the navigation menu which will retrieve all the posts from all the categories in portfolio. Basically I want a way for making default category which will retrieve all the posts. Can anybody please help me!!!
So, basically, you want to create a Custom Post Type Archive page.
A way to achieve this, as explained at WPBeginner.com, is like the following:
Create a custom page template (the PHP file could have any name you want) and Add the Template Name comment at the beginning of the file:
<?php /* Template Name: Custom Post Type Archive */ ?>
Create a custom loop:
<?php
/* Template Name: Custom Post Type Archive */
get_header();
?>
<?php
global $query_string;
query_posts($query_string . "post_type={YOUR-CUSTOM-POST-TYPE}&post_status=publish&posts_per_page=10");
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php
endwhile;
endif;
?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('Previous entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next entries') ?></div>
</div>
<?php wp_reset_query(); ?>
<?php get_sidebar(); ?>
<?php get_footer();?>
Create a new page and select the template you just created in the Page Attributes box
You should be able to use the archive page template to list them all then. Try going to http://yourdomain.com/portfolio and see if that brings it up. You will need to have enabled archives for the post type when you created it though. Look for 'has_archive' => true, if you created the post type manually by dropping in the code in your functions.php file. If you see that, but its set to "false", you'll need to change it to true.
You could also create a custom archive template for this post type if you wanted to. If you create a new file in your theme directory called archive-portfolio.php and then put a custom loop in there the post type will automatically target that template file when accessing the post type archive.
Then to link from your nav menu to this archive, just create a custom menu item in your menu editor with the url http://yourdomain.com/portfolio. You won't need to create any sort of "default" category if you take advantage of the post type archives.
Let me know if you have any other questions.
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);?>