Change default template for posts in wordpress

Question

I have been using different plugins to style my website (Elementor for example). I want to add a blog but I dont like the default template it haves and if want it to look like I want I have to style each post separately.

I think that uploading a custom theme may be the answer but I dont want to make a template for all the website elements just one for the blog posts.

Any lead on where to start? I know php, css, html and javascript but I am a rookie to wordpress, I already have access to all the files via ftp.

Solution 1

Basically it's enough to create a file named single-post.php as a template file (you could derive it from single.php which is in your theme folder) and put it into your theme folder. It will be used automatically to display all single posts.

However, be aware that as soon as you update your theme (which usually happens quite often), this file will be lost since the complete theme folder will be overwritten. So either you keep a copy and adapt that after each update (if necessary) and copy it to the new theme folder again, or you create a child theme: You don't need to create all theme files again for that, only the ones you want to overwrite.

Details about child themes can be found here: https://codex.wordpress.org/Child_Themes

Solution 2

I think a good place to start would be here https://codex.wordpress.org/Theme_Development Theme Development Wordpress Codex.

It's going to be a whole lot cooler if this is a fresh install and your just wanting some extra features for yourself. Because it will take less work, since you will probably want to create a child theme. Explained further in theme development. But when it comes to making your own template for pages, example, you like them all but the blog roll.

At the top of you page where you build out your page should have this.

<?php  
      /*Template Name: My New Blog Roll*/  
        get_header();
 ?>

Or whatever you like.

Then you can set it up on wordpress in the admin section of pages where it says "Template Pages" inside one of the pages. Choose "My New Blog Roll" because now it would be an option for you.

More on that here. https://developer.wordpress.org/themes/template-files-section/page-template-files/

Here is an example of one I was messing with the other day with bootstrap. Notice the PHP and take out what you need.

    <?php 
    /*
        Template Name: Blog-Temp
    */
    get_header(); 
?>    

    <header class="blog"> 
         <nav class="nav navbar">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navMenu" aria-expanded="false">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <h1 id="brand"><a href="<?php echo home_url('/'); ?>"><?php if(get_bloginfo('name')){ bloginfo('name');}else{echo 'Brand Name';} ?></a></h1>
                    </div>
                    <div class="collapse navbar-collapse" id="navMenu">

                        <?php 
                            wp_nav_menu(array(
                                'menu'                  =>  'primary',
                                'theme_location'        =>  'primary', 
                                'menu_class'            =>  'nav navbar-nav',
                                'menu_id'               =>  '',
                                'container'             =>  'ul',
                                'depth'                 =>  1                                
                            ));
                        ?>

                    </div>
                </div>
            </nav>
        <section>
            <div class="ui-page-header">
                <h2>Blog</h2>
            </div>
        </section>
    </header>  
      <div class="clearfix"></div> 

<!--
===========================================================================
    Main Blog Section
===========================================================================
-->
<section class="container-fluid ui-content">      
    <div class="row">
<!--        
    Could be for later content like categories floated left like a sub menu
-->
    </div>
    <div class="row">
        <div class="main col-md-8">
            <?php if(have_posts()) : ?>
                <?php while( have_posts() ) : the_post(); ?>
                    <article class="row post">
                        <?php if(has_post_thumbnail()) : ?>
                        <div class="col-sm-5 post-thumbnail">
                            <?php the_post_thumbnail(); ?>
                        </div>
                        <div class="col-sm-7">
                            <h3 class="post-title"><a href="<?php echo the_permalink(); ?>"><?php the_title(); ?></a></h3>
                             <?php get_template_part('template/post-meta'); ?>
                            <p class="post-content"><?php the_excerpt(); ?></p>
                            <p class="text-right"><a class="btn btn-primary" href="<?php echo the_permalink(); ?>">Read More</a></p>
                        </div>
                        <?php else : ?>
                            <div class="col-sm-12">
                                <h3 class="post-title"><a href="<?php echo the_permalink(); ?>"><?php the_title(); ?></a></h3>
                                <?php get_template_part('template/post-meta'); ?>
                                <p class="post-content"><?php the_excerpt(); ?></p>
                                <p class="text-right"><a class="btn btn-primary" href="<?php echo the_permalink(); ?>">Read More</a></p>
                            </div>
                        <?php endif; ?>
                    </article>
                <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
                <?php else : ?>
                <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
            <?php endif; ?>
        </div>
        <div class="sidebar col-md-4">
            <?php if(is_active_sidebar('sidebar')) : ?>
            <?php dynamic_sidebar('sidebar'); ?>
            <?php endif; ?>
        </div>
    </div>
</section>
<div class="clearfix"></div>

<?php get_footer(); ?>

Also when looking up anything on the inner webs search for "my problem is this" and put wordpress at the end. Example: "how to get the categories wordpress"

Hope this helps.