Jump to content
Killersites Forums

Adding most recent post from wordpress to static home html page


Recommended Posts

 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?
?

Link to post
Share on other sites

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

Link to post
Share on other sites

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?example.thumb.jpg.1b094997b88493b8aa8f46c49be97512.jpg

Link to post
Share on other sites

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?

Link to post
Share on other sites

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?

Link to post
Share on other sites

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

Link to post
Share on other sites

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. 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...