Creating a dynamic website content in WordPress

Question

Creating a dynamic website content in WordPress

I have here my html code featuring two different sections that I need to make dynamic within Wordpress.

<section class="contact">
        <h1>how it works</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, molestias facere nam esse voluptatum cupiditate recusandae deleniti neque quidem! Expedita necessitatibus saepe tempore corporis magnam ut impedit ea tempora quae.Select the products you wish to order. request a quote, fill out all the required fields and upload your artwork. Zazzoo will be in contact with you withing 24 hours to confirm your order.</p>
        <div class="button">
            <button type="button" class="btn btn-default">Contact us</button>
        </div>
    </section><!-- end of contact section  -->
    <section class="opportunity">
        <div class="row">
            <div class="col-lg-8 col-md-8 ideas">
                <h2>turn your ideas into reality</h2>
                <hr/><p>weretrerum dolor sit amet, consectetur adipisicing elit. Dolor laudantium porro natus quo, sit ex nemo, nostrum pariatur ipsum, hic, officiis facilis enim debitis? Doloremque sequi sed ex quae, eaque.</p>
            </div>                  
            <div class="col-lg-4 col-md-4 opportunitycolumn">
                <h2>opportunity</h2>
                <hr>
                <br/>
                <h3>Are you a designer?</h3>
                <p>Send us your work and we will manage your print...</p>
            </div>
        </div>
</section>

What steps should I follow to transform the aforementioned code into a dynamic format suitable for use in Wordpress?

html css wordpress

Answer 1

Answer №1

Below is an example of a simple loop in WordPress that selects the most recent article from a specific category:

<?php $get_posts = new WP_Query( array( 'cat' => 21 ) ); // Change 'cat' value to your desired category ID
while($get_posts->have_posts()) : $get_posts->the_post(); ?>
<section class="contact">
  <div>

  <?php The_post_thumbnail('full'); ?>

  <div>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
  </div>

</div>
</section>

<?php endwhile; ?>
<?php wp_reset_postdata(); // Reset the query ?>

<?php The_post_thumbnail('full'); ?>

may not be necessary depending on your needs, but this is where you set the featured image.

Loops can be customized in various ways to suit your requirements.

For more detailed information about loops, check out this reference.

If you prefer not to categorize the post, you can also directly call it by its ID using the following (not tested) link for reference:

<?php
  $post_id = 1; //change this ID
  $queried_post = get_post($post_id);
  $title = $queried_post->post_title;
  echo $title;
  echo $queried_post->post_content;
?>

Answer 2

Below is an example of a simple loop in WordPress that selects the most recent article from a specific category:

<?php $get_posts = new WP_Query( array( 'cat' => 21 ) ); // Change 'cat' value to your desired category ID
while($get_posts->have_posts()) : $get_posts->the_post(); ?>
<section class="contact">
  <div>

  <?php The_post_thumbnail('full'); ?>

  <div>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
  </div>

</div>
</section>

<?php endwhile; ?>
<?php wp_reset_postdata(); // Reset the query ?>

<?php The_post_thumbnail('full'); ?>

may not be necessary depending on your needs, but this is where you set the featured image.

Loops can be customized in various ways to suit your requirements.

For more detailed information about loops, check out this reference.

If you prefer not to categorize the post, you can also directly call it by its ID using the following (not tested) link for reference:

<?php
  $post_id = 1; //change this ID
  $queried_post = get_post($post_id);
  $title = $queried_post->post_title;
  echo $title;
  echo $queried_post->post_content;
?>

Creating a dynamic website content in WordPress

Answer №1

Similar questions

Creating a circular text element with text both in the center and around the edges using CSS

The html.dropdown feature is not maintaining the selected value chosen

Divide a single image into several smaller images and enable clickable links on each separate image, similar to an interactive image map

Creating a custom breakpoint in Bootstrap for adding unique CSS styles

I'm having trouble with aligning my input checkbox within the form

Toggle the visibility of images with input radio buttons

Tips for troubleshooting grid display issues in Internet Explorer

Alignment of elements in a list at the bottom

Setting up Bootstrap in Visual Studio for a seamless integration

Leveraging the power of jQuery Validation in conjunction with Bootbox

Styling buttons with CSS in the Bootstrap framework

Aligning text and checkboxes for perfection

Adjust the CSS of the currently dragged item using jQuery sortable

What is the correct way to utilize CSS for setting a responsive background image for an element?

Steps for accessing specific menu div on a new tab

Using the <a> tag within a PHP script

Tips for Smoothing Out Your jQuery LavaLamp Effect

Saving changes made in HTML is not supported when a checkbox is selected and the page is navigated in a React application using Bootstrap

Problem with aligning divs in Bootstrap

Struggle between Internet Explorer 8 and its border and margin problems