Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

MDB website displayed on iPhones

Single post


Written by Dawid Adach ,


Final result preview
Live preview

Our blog is almost ready, however, there is still one important part missing. We can display all our posts in a loop, but when someone tries to read the entire post it doesn't work. In order to let users read entire content, we have to create a new file which will be responsible for displaying single posts. This file is called single.php, let's create it and paste into it same content which we currently use in our index.php file.


<?php  get_header(); ?>
<main>
<!--Main layout-->
<div class="container">
    <div class="row">
        <!--Main column-->
        <div class="col-md-8">
            <?php
            if ( have_posts() ) {
            while ( have_posts() ) {
            the_post();
            ?>
            <!--Post-->
            <div class="post-wrapper">
                <!--Post data-->
                <a href="<?php echo get_permalink() ?>"><h1 class="h1-responsive"><?php the_title(); ?></h1></a>
                <h5>Written by <a href=""><?php the_author(); ?></a>, <?php echo get_the_date(); ?></h5>
                <br>
                <!--Featured image -->
                <div class="view overlay hm-white-light z-depth-1-half">
                    <?php the_post_thumbnail( 'full', array( 'class'=> 'img-fluid z-depth-2')); ?>
                    <div class="mask">
                    </div>
                </div>
                <br>
                <!--Post excerpt-->
                <p><?php the_excerpt(); ?></p>
                <!--"Read more" button-->
                <a href="<?php echo get_permalink() ?>"><button class="btn btn-primary">Read more</button></a>
            </div>
            <!--/.Post-->
            <hr>
            <?php
            } // end while
            } // end if
            ?>
        </div>
        <!--Sidebar-->
        <div class="col-md-4">
            <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar' ); ?>
            <?php endif; ?>
        </div>
        <!--/.Sidebar-->
    </div>
</div>
<!--/.Main layout-->
</main>
<?php  get_footer(); ?>
            

Replace the following code:


<!--Post excerpt-->
<p><?php the_excerpt(); ?></p>
<!--"Read more" button-->
<a href="<?php echo get_permalink() ?>"><button class="btn btn-primary">Read more</button></a>               
              

with:


<p><?php the_content(); ?></p>
              

New functions

the_content() - displays entire post content (unlike the_excerpt() which returns only first few words.

single.php - file responsible for displaying single post/page.If present, WP loads it instead of index.php.

Now from our main page click on any article title, image, or "Read more" button. You will get redirected to the single post page. Almost everything looks the same, except for the main part where instead of a list of posts you can see only a single post with full text. Before, the_excerpt() function was displaying only limited number of characters, if you didn't notice a difference probably text of your post was too short. Try to add some extra, lazy-bones can use text below:


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste eligendi dolorum, at inventore molestiae corporis quam a libero eos optio, autem cumque consectetur nemo consequatur nostrum beatae, totam numquam voluptatum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur accusantium repellat fuga, necessitatibus libero vel hic consequuntur tenetur quo dignissimos, voluptatem debitis! Provident velit fugit at porro eum asperiores iure? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum vel nobis nam id maxime vitae nesciunt asperiores velit a tenetur quos aspernatur sint eveniet hic, quisquam placeat provident tempore consectetur?

Our blog seems to be complete now but as you noticed we've just duplicated a lot of code. That's definitely not good practice. If tomorrow we will decide to change the way we want to display our posts (i.e. change heading from <h1> to <h2> we will have to edit both - single.php and index.php. We will fix it in the next lesson.


If something doesn’t work as expected, you can download a final code for this lesson here:

Previous Tutorial Download Live preview Next lesson

Do you want to share?


About author


Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise class systems for the biggest companies within domain. Currently, Dawid's main focus is design & web development. He designs and develop websites using Adobe Photoshop, HTML5 / CSS3, bootstrap, JS, Meteor, AJAX, PHP and SQL.

Comments 5

  • User avatar

    Pixlforge

    the get_permalink() doesn't work you have to echo it (echo get_permalink()). Please ignore and delete my first comment

  • Dawid Adach

    @pixlforge , thank you I've already corrected and updated code.

  • User avatar

    ilir

    when i add a new post i get a blank page with url: http://localhost:8888/wp-admin/post.php. also i cant upload a featured image. it just doesnt appear after i upload it.

  • User avatar

    ilir

    now i realised that i cant even add a new page. i get the same url (post.php) and its blank. i refresh several times but nothing happens.

  • Dawid Adach

    Dear ilir, I don't have access to your server therefore I can't check what is wrong. Could you please mail me your files? I will have a look at it.

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.