how can I make the posts look like this ?

Looks like your template is a pretty simple one. And I saw there are some rectangles there, what’s the meaning of them? Do you want to add those areas to your blog, or others?

hi and thanks for your replay

I want to make the theme 4 parts so every part have one post

so when I add 4 post it will looks like the image.

for example,

https://www.adii.co.za/wp-content/uploads/the-box-magazine.jpg

https://www.lyxia.org/blog/wp-content/uploads/2008/05/openbook-magazine-theme.jpg

I hope I was clear ??

thanks you

There can be much more specific CSS and PHP involved in doing that than I care to expand here. Basically, assuming you just want code from a single normal loop, I’d start by add a class called indexpost to the default theme’s style.css:

.indexpost {
  display: block;
  float: left;
  width: 200px;
  height: 500px;
}

Then in the theme index.php file, replace this:

<div class="post" id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

				<div class="entry">
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>

				<p class="postmetadata"><?php the_tags('Tags: ', ', ', ''); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

			</div>

With this:

<div class="indexpost" id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

				<div class="entry">
					<?php the_excerpt(); ?>
				</div>

				<p class="postmetadata"><?php the_tags('Tags: ', ', ', ''); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

			</div>

This probably won’t look very good, but it’ll get you started.

What it does is basically change the way that posts are styled on your index (home) page. It makes the elements into free-floating boxes (blocks) with a specified width and height and then tells them to try to float to the left. What that does is gives you two boxes per line (that’s all that will fit), and then gives you two more in one line, etc. The change from the_content to the_excerpt is a modest attempt to keep the text from overflowing the specified height of the boxes.

Hope all that helps.

You might try searching for a Magazine style wordpress theme that has this already done for you. For example the “options” theme is free and will split the psots into four or more smaller boxes. They are called magazine style themes. If you dont like the themes avaiblble you could at least look at the code from one of the themes out there and then try to recreate it at least. Might help.

You can download the theme you shown in the screenshot here.

jbjweb
ichiban101b
ikiru
seanray

Thank you for all of you ??