Wrap wordpress post and title in custom div - php

I'm trying to prepare a blog for microformat, so I need a div to start above the title and close just above the social share buttons (and below meta data, date, author, # of views, etc) - see site for reference: http://www.sara-maria.dk/sundt/laekre-saltede-mandler-med-soedt-tilbehoer/
It is a Wordpress site using CherryFramework with a childtheme and I've tried the following:
adding the opening of the div to title.php and the closing div to footer.php
However, for some reason the div is not using the expected closing div. Instead it is being closed way up higher on the page.
I've created a new functions.php in the childtheme and used the following code:
function my_content($content) {
global $post;
return ''.$content.'';
}
add_filter('the_content', 'my_content');
Problem is that this only wraps it around the post and my PHP skills are not very good, so I haven't been able to customize it to include the title and the meta data.
Anyone who can help me how I best can create the custom div?
Thanks,
Kasper
Update - copying in loop-single.php on request from dojs:
<?php /* Loop Name: Single */ ?>
<div id="loopTEST">
<?php if (have_posts()) : while (have_posts()) : the_post();
// The following determines what the post format is and shows the correct file accordingly
$format = get_post_format();
get_template_part( 'includes/post-formats/'.$format );
if($format == '')
get_template_part( 'includes/post-formats/standard' );
get_template_part( 'includes/post-formats/share-buttons' );
wp_link_pages('before=<div class="pagination">&after=</div>');
?>
</div>
<!---removed author block--->
<?php
get_template_part( 'includes/post-formats/related-posts' );
comments_template('', true);
endwhile; endif;
?>

Update
If you look at the DOM of your site you can clearly see that the title section is found in it's own file.
Take a look at this HTML
<div class="row">
<div class="span12" data-motopress-type="static" data-motopress-static-file="static/static-title.php">
<section class="title-section">
<h1 class="title-header">
Lækre saltede mandler med sødt tilbehør </h1>
<!-- BEGIN BREADCRUMBS-->
...
<!-- END BREADCRUMBS -->
</section><!-- .title-section -->
</div>
</div>
You would think that you have to add a div to "static/static-title.php", but that would most likely destroy the layout.
To be honest, the structure of this theme seems horrible to me (which means that the theme is shit), however if you are hell bent on using it you need to find the file (which would most likely be "single.php" in your themes root directory) that includes "static/static-title.php" and add a div on the line above that.
Okay, well to really see how this builds up your single post pages you might need to go through the included template parts, but try this to start out with.
<div id="loopTEST">
<?php if (have_posts()) : while (have_posts()) : the_post();
$format = get_post_format();
?>
<div> <!-- This should be above the title -->
<?php
get_template_part( 'includes/post-formats/'.$format );
if($format == '')
get_template_part( 'includes/post-formats/standard' );
?>
</div> <!-- This should be below the post but above the social media buttons -->
<?php
get_template_part( 'includes/post-formats/share-buttons' );
wp_link_pages('before=<div class="pagination">&after=</div>');
?>
</div>

Related

php detects types of content in Wordpress post

I would like that my php detects seperatly images (media) and text, from a same wordpress post, in regard to display them in different columns. I am using Bootstrap, and I would like different display of each (text and image) according to the screen size.
Here is a code I have that displays all of the content of my post (image and text) at once, it works perfectly :
<div class="container">
<?php if (have_posts()): ?>
<div class="container">
<?php while(have_posts()): the_post(); ?>
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
I would like the same way of loading content but instead of having just
<?php the_content(); ?>
I would like something like this to place text and image (of same post) in different div class:
<?php the_image(); ?>
AND
<?php the_text(); ?>
I know this is wrong code but I am trying to be clear in my explanation. I need that my client does not touch any of code, also shortcode in Wordpress post. Any input or advice would be very appreciated!
Many thanks!
Thank you for your answer! Lars Beck, you solved my problem!
Here is the code I was looking for:
<?php
//get content from back office , filter imgs except featured img to place them later in <div id='img_content_right'>
$content2 = get_the_content();
$removed_imgs = array();
$content2 = preg_replace_callback('#(?!<img.+?id="featured_img".*?\/>)(<img.+? />)#',function($r) {
global $removed_imgs;
$removed_imgs[] = $r[1];
return '';
},$content2);
//add filter to the_content to strip images except img_menu et featured_img
add_filter('the_content', 'strip_images',2);
function strip_images($content){
$content=preg_replace('/(?!<img.+?id="img_menu".*?\/>)(?!<img.+?id="featured_img".*?\/>)<img.+?\/>/','',$content);
return $content;
}
the_content();
?>
<div id='img_content_right'>
<?php
//append the images stripped from content
foreach($removed_imgs as $img){
echo $img;
}
?>
</div>
There is no way, to separate out images from the content section if they have just been included as part of the content.
Wordpress has featured image functionality built in for you. so you can use the_post_thumbnail() to echo out the image. Maybe this question can help you Wordpress featured image code
If this isn't enough for you and you need more flexibility you might want to look at advanced custom fields plugin - https://www.advancedcustomfields.com/ it makes it easy for you to add your own fields of any type you want.

How to show only the date, the title and a litle "summary" of my WordPress post in my custom theme?

I am pretty new in WordPress theme development and I have the following doubt about how show posts into a page.
I have this page belonging to an old custom legacy blog that I am build again using WordPress: http://www.asper-eritrea.com/comunicati.asp
As you can see in this page are presented some posts using the following structure: date followed by the post title followed by a short summary
What I want to do in WordPress is something like it.
So I have create this page that show the posts lists: http://lnx.asper-eritrea.com/category/legacyposts/
As you can see in this page are shown the posts (the formattation is horrible because I imported the post from the old website but I will work on it in a second time).
The main problem is that if the post is very long it is shows all of its contents.
This is the code of this page (category.php) is:
<?php get_header(); ?>
<!-- Contenuti (griglia) -->
<div class="container">
<!-- Lead presentazione -->
<section id="presentazione">
<div class="row">
<div class="col-sm-12">
<!--<h1 class="text-center"><small>Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</small></h1>-->
<h1 class="text-center title">Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</h1>
<h1 class="text-center leadTitle">Association in Defense of the Human Rights of the Eritrean People</h1>
<!--
<p class="lead text-center">
Association in Defense of the Human Rights of the Eritrean People
</p>
-->
</div><!-- /.col-sm-12 -->
</div><!-- /.row -->
</section><!-- /section presentazione -->
<!-- Progetti in evidenza -->
<header class="header-sezione">
<h2>Ultimi Articoli</h2>
</header>
<?
// get the term using the slug and the tag taxonomy
$term = get_term_by( 'slug', 'featured', 'post_tag' );
// pass the term_id to tag__not_in
query_posts( array( 'tag__not_in' => array ( $term->term_id )));
?>
<?php
if (have_posts()) :
// Start the Loop.
while (have_posts()) : the_post();
/*
* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
*/
get_template_part('content', get_post_format());
endwhile;
else :
// If no content, include the "No posts found" template.
get_template_part('content', 'none');
endif;
?>
</section>
</div>
<?php get_footer(); ?>
So what I want to do is that, for each post, the loop show only the date, the title and the beginning of my post (for example a specific number of character).
What can I do to obtain this result?
Tnx
first you should start reading the wordpress codex, that way you can know how wordpress works.
Now, the category.php template is trying to find other template part with this code:
get_template_part("content", get_post_format());
This code is looking for content-post format.php, in case that file doesn't exist, wordpress automatically looks for content.php and that file is the one you have to work.
You must find this file and you use the following functions
the_excerpt();
get_the_date();
the_title()
Now if you want to control the size of the excerpt, you can use this function inside of function.php.
function custom_excerpt_length( $length ) {
return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

Why does a wordpress know to use a specific template and how do I customize this?

Hello and thanks for reading. I am a .NET developer and don't know PHP (Although I am working on learning on the job) and what I am working on was made my consultants that we dont have contact with anymore. When a news post is clicked it appears to display using a template single.php. Followed is the code for this page:
<div id="marketBanner">
<div id="banner">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/services-banner.jpg" alt="" />
</div>
<div id="breadcrumbWrap">
<div id="breadcrumbs">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>
</div>
</div>
<div id="content">
<div class="left">
<h2><?php the_title(); ?></h2><br />
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="the_details">
Posted: <?php the_date(); ?> | View All News
</div>
<?php the_content(''); ?>
<?php endwhile; endif; ?>
</div>
Why does this page get used when a post is chosen? I want only a certain category of post to use this page and another category of post to use a different template. How do I achieve this?
You need to study the Wordpress Template Hierarchy # https://codex.wordpress.org/Template_Hierarchy#Single_Post_display
A template (PHP file) is looked for in this order (only on wordpress).
1 - single-{post_type}.php - If the post type were product, WordPress would look for single-
2 - product.php
3 - single.php
4 - index.php
In your case I would use single.php to create a template for the average post then specifically create a template for the one you want different using single-'post_type'.php
You can change the post type when creating a post.
Take a look at the Wordpress Template Hierarchy. It explains which templates get used and will probably be super helpful if you're just starting out with WP. You can use WP syntax to create category pages - but at the archive level - not the single post level.
To create separate pages based on post categories see here and below:
<?php
$post = $wp_query->post;
if (in_category(9)) {
include (TEMPLATEPATH.'/single-specific9.php');
return;
}
if (in_category(8)) {
include (TEMPLATEPATH.'/single-specific8.php');
return;
}
if (in_category(11)) {
include (TEMPLATEPATH.'/single-specific11.php');
return;
}

displaying wordpress pages not showing the correct format

I am using this PHP Code on my website to get wordpress page content from the database:
$page = get_page_by_id($records["value"], OBJECT, 'page');
query_posts('p='.$page->ID.'');
echo '<div id="page-title">'.$page->post_title.'</div>';
echo nl2br($page->post_content);
echo '<p> </p><hr /><p> </p>';
in wordpress, i have put the page with HTML and aligned images etc but when it displays on my website it just shows the images and text all under each other with the incorrect format (not as i put it in the text editor)
what have i done wrong here?
Im also wondering why you are doing like this? there is no need to call post title and content that way. simply make a page.php. The TwentyFourteen does have page template but in a folder named "page-templates". You can simply make a page.php by sample code below.
<?php get_header(); ?> //the header template
<?php while ( have_posts() ) : the_post(); ?> //start the loop
<?php the_title(); ?> //Page Title
<?php the_content(); ?> //The content
<?php endwhile; ?> //end loop
<?php get_sidebar(); ?> //sidebar template
<?php get_footer(); ?> // footer template
you can add div / span wherever you want.

Wordpress, wrap posts in div

I'm quite new to wordpress, so bear with me. I have a site up and running allowing me to add content dynamically, the only problem is styling each post. I'm looking to wrap posts in a div, so images would be wrapped in one div and text posts would be wrapped in another, if that makes sense?Here's some code I've been using:
<?php if ( in_category('photos') ) { ?>
<div id="testing">
<?php } else { ?>
<div id="test-2">
<?php } ?>
The only problem with this is that it wraps all posts in a given category and doesn't put a closing '< / div >' after the content, if that makes sense?
Well, the only reason you're not getting any closing </div>s is because you're not putting it anywhere in your php.
This should work:
<?php while( have_posts() ) : the_post()
if( in_category( 'photos' ) { ?>
<div id="testing">
// All your post content and whatnot
<?php the_content(); ?>
</div>
<?php } else { ?>
<div id="test-2">
// All your post content
<?php the_content(); ?>
</div>
<?php }
endwhile; ?>
If you don't write complete markup in your theme files, you can't possibly expect Wordpress, or PHP, to automatically close your HTML tags.
"if that makes sense" No it doesn't really make sense as Wordpress by default adds a CSS-class for every category and tag to the surrounding div. If that is not the case in your theme, use the function post_class() to add the CSS-classes to your div.
See the post_class()-documentation for usage examples.

Categories