I am styling a wordpress theme / template and I need to add a pre and post div to the content.
It would look something like this:
<div class="my-pre-content-div">This is added before the content</div>
<div id="content">
All Content Here
</div>
<div class="my-post-content-div">This is added after the content</div>
I need to do this globally so what pages do I need to modify please?
Thanks
There are a bunch of php files, most of which will be template files, in this folder:
wp-content/themes/[your theme name]/
It depends on your theme design but as a basic answer to this question you can use wp functions to page.php and single.php for global formating all posts and pages of your theme. you can use code bellow as an example:
<?php get_header(); ?>
<div class="my-pre-content-div">This is added before the content</div>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
.
.
.
.
<?php endwhile; else: ?>
</div>
<div class="my-post-content-div">This is added after the content</div>
Related
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.
I am trying to show all images on a Page in wordpress. My wordpress page is set up like you see in the image below.
What I want to do is show each of these images on a custom page I have made, called Portrait Album. See code below. I guess it is the opposite of this that i want to implement.
I am not sure how I can show each image in the Text section. Does anyone out there know how to do this? should be obvious but I cannot find an answer anywhere.
I know get_content() will show the content, but how can I specifically show the images, so I can show these in a loop enabling me to make a grid using css and create a photo gallery.
currently this is the code I have:
<?php /* Template Name: Portrait Album */ ?>
<?php get_header(); ?>
<div class="portrait-page" style="background-color: black;">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
echo "<img src='".wp_get_attachment_url( $the_post->ID )."' />";
<?php endwhile; endif; ?>
</div>
</div>
</div>
What I want to do is something like this, where col-1-3 is one-third of the width of the page
<div class="row">
<div class="col-1-3">
echo "<img src='"RELEVANT PHP CODE HERE"' />"
</div>
</div>
I have a theme that I've developed and want to make child themes. My wp-content/themes directory looks something like this:
parenttheme
|- style.css
|- functions.php
|- index.php
|- page-example.php
childtheme
|- style.css
|- functions.php
|- index.php
The problem is that page-example.php doesn't load in a site using childtheme, only childtheme/index.php is used.
I can do something like this in childtheme/index.php:
echo body_class(); // class="page page-id-24 page-template page-template-page-example page-template-page-example-php logged-in admin-bar no-customize-support"
The correct looking classes are there (page-template-page-example), but it's not using the parenttheme template file.
My hacky solution so far is to add a childtheme/page-example.php file that just contains a require('parenttheme/page-example.php'), but it seems like I shouldn't have to do that.
I found this post, which seems to be my exact problem, but there was no answer... Can I create new page.php on child theme in wordpress?
I've read through the WordPress child theme codex and exhausted all other resources I can think of on the topic. Is there anyone who has dealt with this problem before?
I'm using WordPress 4.4 and multisites, if that matters.
The full template in question:
<?php
/*
Template Name: Membership
*/
get_header();
?>
<div class="site-bd">
<div class="wrapper">
<div class="hero">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
?>
<div class="shelf shelf_3">
<?php the_post_thumbnail(); ?>
</div>
<?php
endwhile;
endif;
?>
</div>
<div class="grid">
<?php
if( have_rows('top_columns') ) :
while ( have_rows('top_columns') ) : the_row();
?>
<div class="grid_item grid_item-oneThird">
<div class="shelf">
<div class="shelf">
<?php the_sub_field('column_1'); ?>
</div>
<ul class="vList">
<li>
Join or Renew Online
</li>
<li>
Download Membership Form
</li>
</ul>
</div>
</div><div class="grid_item grid_item-oneThird">
<div class="box">
<div class="shelf">
<?php the_sub_field('column_2'); ?>
</div>
</div>
</div><div class="grid_item grid_item-oneThird">
<div class="box">
<div class="shelf">
<?php the_sub_field('column_3'); ?>
</div>
</div>
</div>
<?php
endwhile;
endif;
?>
</div>
</div>
</div>
<?php get_footer(); ?>
I've got a dozen or so other templates that also don't work though.
This is the message I was talking about in the comments. This is shown on the themes page of a child theme:
If not you may not have your child theme setup correctly. Make sure your child theme style.css file has something like this at the top:
/*
Theme Name: Boston
Theme URI: http://www.phoenixwebdev.com.au
Description: Responsive Boston template child
Version: 1.0
Author: James Jones
Author URI: http://www.phoenixwebdev.com.au
Template: boston
Tags: modern, two-columns, threaded-comments, custom-menu, translation-ready
*/
with the important part for child themes being the 'Template' entry.
Other things you can try:
In wp-includes\template.php check out the functions load_template() and locate_template(). Use print_r() to output what these functions are doing on page load to try and help you diagnose what files are being loaded and where it's going wrong.
Output the function get_page_template() in your functions.php to see what WordPress thinks it's outputting. This may also help you diangose.
Good luck or hope someone else comes along to shed more light.
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>
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;
}