Using columns in Wordpress page that include header - php

I'm a little bit of a newb when it comes to PHP, but know enough to get around and would like to know if this can be done. sample
I want to break my wordpress page into 2 columns, but also want to have the header in the 1st column.... along with other text. I don't want the header floating over both columns...
The second column will house images only...
is that possible? In my head it makes sense, but then when I try and work it out, I'm just not sure....
And I just got thinking... I have my home page static with the smooth slider on it, so that is now going to cause more grief.
Any help, advice or pointers would be greatly appreciated.
Thanks in advance

This is more CSS/HTML than PHP, however that's fine. The first thing you need to do is understand how to make a two column layout. Then you will need to have the post title in the first column, something like this:
<article>
<div id="col1">
<h1>Post Title</h1>
Lorem ipsum dolor sit amet...
</div>
<div id="col2">
<img src="" />
</div>
</article>
To make this into WordPress you will of course need to add the WordPress Tags:
<div id="col1">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
Finally, adding the image(s) on the right. It can be done easily using WordPress' built in functionality, if you only need one image: (Note you will have to add something in your theme's functions.php file as per the WordPress Docs)
<div id="col2">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
To add multiple images, it gets more complex and you'll have to start looking for a plugin to achieve that goal.

Related

have_posts() outputting false on 'single.php' when should be true

Hey fellow WordPress dev's / php masters. Long story short, I am using WordPress (and I never use WordPress - sorry!) and when I go to view the individual post rendered from single.php, the 'have_posts()' function is returning false. The template is rendered and I am not having any issues with the template rendering, I am simply having an issue with 'have_posts()' showing false and not outputting the blog post.
I downloaded WordPress 5.0.3, am running on MAMP and have used this method previously without any issues. All in all, I am trying to really keep my template files organized and I am using get_template_part to retrieve sections of the theme.
My current structure is:
single.php -
<?php
get_template_part('template-parts/blog/_single/blog-post-banner'); // Renders perfect
?>
<div class="light-grey">
<div class="container">
<div class="row no-margin">
<div class="col s12 l9 mb-0-l">
<?php get_template_part('template-parts/blog/_single/blog-post'); // Renders perfect ?>
</div>
<div class="col s12 l3 mb-0-l">
<?php get_template_part('template-parts/blog/side-bar'); // Renders perfect ?>
</div>
</div>
</div>
</div>
And of course the real culprit the blog-post partial -
<?php
if (have_posts()) :
the_post(); ?>
<div class="row no-margin">
<div class="col s12 no-margin relative">
<img src="<?php the_post_thumbnail_url('medium_size'); ?>" alt="<?php the_title(); ?>" class="block">
</div>
<div class="col s12">
<div class="white p-2-s p-3-l">
<?php the_content(); ?>
</div>
</div>
</div>
<?php else :?>
<div class="col s12 no-margin">
<div class="white p-2-s p-3-l"><p>Sorry, we couldn't find the post you were looking for.</p></div>
</div>
<?php endif; ?>
Again, the templates are rendering perfect but the 'have_posts()' is returning false and spitting out my 'else' part of my statement. I have used this method in another template and it worked perfectly before (although I will admit, I love to develop in node and WordPress and php have really made me beat my head against the wall at times lol). Is there something I missed?
I have checked my functions.php which I have written from scratch, and there isn't a single thing in there that might affect the post but if you need to see it, I would be happy to share it (I have disabled each portion of the functions.php to check if it would help and no luck). I don't have any plugins added, not even the default included ones (I am a dork that wants to build most everything from scratch so I know how it works).
Am I wrong in that the output to 'have_posts()' should be true on the single.php page? Did I do something wrong with my partials? The banner does use the 'the_title()' tag and 'the_date()' tag but both php tags are properly closed. Would really appreciate some insight on why I am getting false on this. Thanks everyone!
** EDIT ** - When I went to debug the blog-post partial and var_dump the have_posts(), I placed it above the if statement and everything rendered. Looked like so:
<?php
var_dump(have_posts()); // <---------------- Added this and it rendered
if (have_posts()) :
the_post(); ?>
The var_dump output false but then if I did it a second time, it now renders true. Any ideas as to why? For the time being, I am storing a have_posts() in a random variable so there is no output and the post is now showing. While I am happy the post is now showing, I know this isn't necessarily a 'solid fix'. Any ideas with this?
So first I just want to say, #Jeppe you had it right the whole time. If I could mark your comment correct (and if you can, please show me how) I would.
To anyone else who stumbles across this post, it comes down to using the 'rewind_posts()' function. All in all, I have a loop somewhere in my code, that I can't identify as the culprit, that is essentially forcing my 'have_posts()' function to return false because I haven't reset it / rewound it according to WordPress.
My solution was to simply take my old code:
<?php
if (have_posts) :
the_post;
?>
and add the rewind_posts() function above the if statement:
<?php
rewind_posts(); // <---------- This guy right here.
if (have_posts) :
the_post;
?>
This will rewind WordPress's loop and allow have_posts() to print true.

Display parent div only if populated with content

Is there a way to only display a parent (wrapping) if it's actually been populated with content?
The reason I ask is in Wordpress I'm using Advanced Custom Fields to create additional text areas on the homepage of the website. The content is added to the page inside divs, like this:
<section class="band">
<div class="wrap">
<?php the_field('services'); ?>
</div>
</section>
If the field is left blank, obviously the markup that surrounds remains on the page and due to the margin/padding they have set on them it leaves a big empty stripe across the page.
I know little Wordpress (and PHP in general), I assume this must be possible? I've had a play around with if/else statements but had no luck.
Can anyone advise on this?
You could do it this way:
<?php if( get_field('services') ) : ?>
<section class="band">
<div class="wrap">
<?php the_field('services'); ?>
</div>
</section>
<?php endif; ?>

I want to remove certain parent- and child-divs in all my wordpress posts with php or some other script

Is there a quick way, via script maybe, to remove a certain pair of div's out of all my wordpress posts? For example:
I want to go from this:
<div class="single_textimage">
<div class="youtube_play"><iframe src="-,-"></iframe></div>
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<div class="youtube_play"><iframe src="-,-"></iframe></div>
AND
From this:
<div class="single_textimage">
<img class="aligncenter size-full wp-image-1700" src="-,-" />
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<img class="aligncenter size-full wp-image-1700" src="-,-" />
So I want the divs: single_textimage, single_textimage_text and single_textimage_copyright to go.
I hope there is an easy script, or difficult for that matter. Via "php", "mysql" or "jquery" for example, that I can put in test.php in the root or something...
I hope I supplied you with enough information. If I haven't made myself clear enough, please reply. :)
Seems to me like you should be able to take those out of whatever template your using - probably in a PHP include, but I don't really use WordPress, so I wouldn't know where without seeing all your files. If you're bent on using jQuery instead of modifying the template, I would throw in some CSS too, to hide the elements that will be removed:
.single_textimage, .single_textimage_text, .single_textimage_copyright{
display:none;
}
Then you can take the elements you want to keep out of their parent DIVs, and place them right after (or before):
$('.youtube_play, .wp-image-1700').each(function(){
$(this).parent().after($(this));
});
Then you can remove the elements you don't want from the page:
$('.single_textimage, .single_textimage_text, .single_textimage_copyright').remove();
Here's a fiddle: https://jsfiddle.net/3uztorzL/
I would use this search and replace utility to update all of the content in the DB:
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
You'll need a regex to replace <div class="single_textimage_text">Some text.</div> (assuming the "some text" is different in each post). The utility supports regex replace. This may do it:
<div class="single_textimage_text">(.*?)</div>
Make sure you make a backup before you do the replace.

Editing certain parts of page template in User mode

I have a web page I am working on in WP which needs some customization.
Firstly I have created a page template that will be used over and over again, only changing parts of the content. I am wondering about available options for me when enabling this fact, through the Admin panel in the HTML Editor(if possible)...
Hope my question is clear enough for you all.
Let me add some code to show what I am trying to accomplish.
<div id="header-style">
<?php get_header();?>
</div>
<div id="content">
<div id="about">
//This is what i want to be able to edit
</div>
<div id="features">
//This is what i want to be able to edit
</div>
</div>
Dino:
There are lots of ways you could do this. The main question I would ask you is, who is going to be adding/editing this content? If you're going to have a community of people adding content, the input needs to be stripped and sanitized (to avoid injecting tags or other harmful content). If its just going to be you, then here's the easiest/fastest solution:
Use custom fields. If you can't see them in the post/page edit screen, go to the little tab on the top right of the post-edit screen that says Screen Options (or something like that) and click "Custom Fields".
Once you can see the Custom Fields edit box, you can add as many fields as you want. These are stored as post meta data. You can use the <?php the_meta(); ?> function in the loop to display all of your custom fields.
You can access a specific field by using get_post_meta(). You pass in the postID and the key of the meta field:
<?php echo get_post_meta(get_the_ID(), 'my_key'); ?>
So, for your example, you would add in the post-edit screen:
about: Some text to go in the about section.
features: Some text to go in the features section.
Then, you would access these on your page like so:
<div id="header-style">
<?php get_header();?>
</div>
<div id="content">
<div id="about">
<?php echo get_post_meta(get_the_ID(), 'about'); ?>
</div>
<div id="features">
<?php echo get_post_meta(get_the_ID(), 'features'); ?>
</div>
</div>

Get post by its ID (WordPress)

How do I get a Custom Post by its ID in wordpress and show its thumbnail, title and content? Here is what I am using, but didnt the content is messed up.
<div class="left-cont1">
<div class="left-cont1-text">
<?php
query_posts('post_id=790&post_type=homepage');
while (have_posts()): the_post();
?>
<h1><?php the_title(); ?></h1>
<div class="cont1-border"></div>
<p><?php echo(types_render_field("homepage-content", array("raw"=>"true"))); ?></p>
<h2><?php echo(types_render_field("homepage-urltitle", array("raw"=>"true"))); ?></h2>
</div>
<div class="left-cont1-image1"><?php echo get_the_post_thumbnail($page->ID, 'home-circle'); ?></div>
<?php endwhile;?>
</div>
Thanks
You should be able to take your current code, change get_the_post_thumbnail($page->ID, 'home-circle') to get_the_post_thumbnail(get_the_id(), 'home-circle'), and replicate your code for each post you want to pull in, modifying the post_id=xxx to match the ID of the post you want to pull in.
This is not the most attractive solution, but from the information you gave, it should at least work. Just so you know, there is an entire StackExchange site devoted to Wordpress: https://wordpress.stackexchange.com/ where you should be able to get more Wordpress-specific answers. If your question is about PHP, please feel free to ask here, but if it is Wordpress-specific, your better bet would be the dedicated Wordpress site.
Since you're new to PHP, I would recommend getting an introductory book or two and try to get some of the basic concepts down pat before working with WordPress. While there will be a larger up-front investment of time, it will pay off in the long run. Good luck!

Categories