Adding most recent post from wordpress to static home html page

[Aleksey]

 I made a static html, css and javascript website.  In subfolder of the site i installed wordpress and made a theme from a static html page which contains blog with news posts. Then i connected it with the rest of the website.

I would like to embend 3 latest wordpress posts on my static home page and add style to them. 

 

 I added this code to my static home index.php page

 

<?php 
define('WP_USE_THEMES', false);
require('vesti/wp-blog-header.php');
?>

<?php
$number_of_posts = 3;
$args = array( 'numberposts' => $number_of_posts );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent_post ){
echo "<span>".$recent_post['post_date']."</span> <br>";
echo "<h3>".$recent_post['post_title']."</h3>";
echo  "<p>".$recent_post['post_content']."</p><br><br>";
 }
 ?>

Now i see my 3 latest posts with images and text  but i dont know how to style them with CSS. I would like to add style to these posts - to paragraphs and images so i could set desired layout and appearance. And optionally , to shorten the text with "read more" option. Can anyone help me solve this problem?
?

[administrator]

Hi,

Just wrap the content from WP into a div, and then you CSS to target your sub tags. Makes sense?

... Since you know the structure of the output from WP, you can specify CSS targets pretty easily. Remember, it is always a good idea to keep the styling (CSS) separate from the structure, your HTML.

Stef

[Aleksey]

I wrapped the php code with div id="wp-content" , i tried to add some style, width, background color and it works.

However i have very limited control with styling these posts.

I can style wp-content div or  #wp content img or p{ (div which is pointing to the paragraphs or images).

I would like to style my posts separately, for example to add different width for first image and paragraph, and the other for the last two and different layout too.

When i go on "inspect element" tool i see this as seen on photo - all images have allignnone class, h3 and p tags dont have anything.

How to differently style paragraphs, images and headings to the 3 latest post?

[Aleksey]

i actually made a progress and added this code:

<div id="wp-posts">

 <?php
 $args = array('numberposts'=>1);
 $recent_posts=wp_get_recent_posts($args);
 foreach( $recent_posts as $recent_post ){ 
 echo "<span>".$recent_post['post_date']."</span> <br>";
 echo  "<p>".$recent_post['post_content']."</p><br><br>";
}
?>

</div>

<div id="wp-post2">
<?php
 $args = array('numberposts'=>1 , 'offset'=>1 );
 $recent_posts=wp_get_recent_posts($args);
 foreach( $recent_posts as $recent_post ){ 
 echo "<span>".$recent_post['post_date']."</span> <br>";
 echo  "<p>".$recent_post['post_content']."</p><br><br>";
}

?>

</div>
<div id="wp-post3">
<?php
 $args = array('numberposts'=>1 , 'offset'=>2 );
 $recent_posts=wp_get_recent_posts($args);
 foreach( $recent_posts as $recent_post ){ 
 echo "<span>".$recent_post['post_date']."</span> <br>";
 echo  "<p>".$recent_post['post_content']."</p><br><br>";
}

?>

</div>

Now i am pulling out 3 latest posts of my blog and i placed each post into separate div. It gives me beter control and i can style each post differently. However, it seems that wordpress puts image and text into same paragraph and when i want to style only text of the post, for example:

#wp-post3 {
background-color: green;
}

it changes the background of the entire post that contains image and text, not only the text, wrapping the image.

Is there any way to separate images and paragraphs in wordpress posts so i can style them differently?

[administrator]

Hi,

Don't forget that with nth-child and other sophisticated selectors, you can target tags on an even/odd basis and much more.

Stef

[Aleksey]

I have deleted media photos into posts and added featured photos instead. I did that because featured images arent in same paragraph with text. Featured photos have id because in index.php of my theme i wrote:

<div id="blogphoto"><?php the_post_thumbnail(); ?></div>

Now i am pulling out latest 3 posts (only text), but i dont know how to pull out latest featured images. Can you help me to add some code to my code above to display featured images of latest posts too?

[Aleksey]

Even and odd selectors are not possible in this case because image and text in wordpress post are treated as one tag.

[administrator]

Well. Keep trying different ideas. If I wasn't so busy, I would take a closer look. Let me know what your solution ends up being.

... This is why learning the fundamentals is sooooo important. This is why project based only courses are very limited. Real programming/coding is a job that means constantly having to come up with solutions that are unique. 

Stef

[Aleksey]

Ok thanks. Do you think that i should know to solve this problem after beginners course or this is some advanced level of programming that needs time to be understand?

[administrator]

No, this is just an experienced based thing (it could take me 20 minutes to figure out a good solution)  ... do the beginners course, and say every other day, spend 20-30 minutes looking at the problem. You will soon find the answer. Let me know what solution you come up with. 

.... Remember, there are a few different ways you could solve this. 

[Aleksey]

Ok, thanks Stef. I will do my best!