Support » Theme: Startup Blog » i want to split the Frontpage in 2 Sections

  • Resolved thegoodrobot

    (@thegoodrobot)


    I would like to split the page as shown in the graphic. The theme already offers a split look for two posts next to each other. However, my wish is a little more complex.

    the graphic: https://imgur.com/a/bY5uf

    I hope someone can help me.

    In the graphic you can already see my wish that I get two or more pages. I would be happy to enter the page IDs in the code.

    In addition, the latest blog posts are to be displayed below it. Also 2 or more.

    So i can split my Frontpage in all needs.

    I’m not the best at programming. Thank you for your support!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks for using Startup Blog!

    I would recommend using the Elementor plugin for this. It allows you to create custom layouts within the page content area. If you create a page and switch to a full-width template using this option, you’ll have plenty of space to work with.

    thegoodrobot

    (@thegoodrobot)

    Thanks for you reply. I don’t want to use a page builder for a single option. :-/

    The theme already brings a 2 column view. Based on that a start page could be created with my wish?

    It would be great if you could help me out, ben.

    Theme Author Ben Sibley

    (@bensibley)

    Okay I see. The other way to edit the homepage like this then will require a child theme and writing some code.

    You can download a starter child theme for Startup Blog here: https://www.competethemes.com/help/child-theme-startup-blog/

    The general idea is that you’ll want to copy the index.php file from Startup Blog and copy it into your theme. Then rename the index.php file in the child theme to home.php”. Any edits you make to the home.php file will then show up on your site’s homepage where your posts are listed. I’d recommend adding the content for the two pages after line 5 below the “loop-container” div.

    toxicdemon

    (@toxicdemon)

    Hey guys,

    i had the same issue and solved it with this code:

    <?php get_header();
    
    get_template_part( 'content/archive-header' ); ?>
    
    <div id="loop-container" class="loop-container">
    <?php
    $query = new WP_Query( array( 'post_type' => 'page', 'post__in' => array( 1, 10, 15, 50, 42 ) ) ); // your page ids here separated with ,
    while ($query->have_posts()) :
       $query->the_post();
       ct_startup_blog_get_content_template();
    endwhile;
    wp_reset_query();
    ?>
    </div>
    
        <div id="loop-container" class="loop-container">
            <?php
            if ( have_posts() ) :
                while ( have_posts() ) :
                    the_post();
                    ct_startup_blog_get_content_template();
                endwhile;
            endif;
            ?>
        </div>
    <?php
    // Output pagination if Jetpack not installed, otherwise check if infinite scroll is active before outputting
    if ( !class_exists( 'Jetpack' ) ) {
        the_posts_pagination( array(
            'mid_size' => 1,
            'prev_text' => '',
            'next_text' => ''
        ) );
    } elseif ( !Jetpack::is_module_active( 'infinite-scroll' ) ) {
        the_posts_pagination( array(
            'mid_size' => 1,
            'prev_text' => '',
            'next_text' => ''
        ) );
    }
    
    get_footer();

    I hope you can use this for yourself.

    Theme Author Ben Sibley

    (@bensibley)

    @toxicdemon That’s a great implementation – thanks so much for sharing your code!

    @thegoodrobot you can use that code and just update the IDs on line 7 with the pages you want to use. You can learn how to find the ID for any page with these steps: https://www.competethemes.com/blog/find-page-id/

    Sorry about waiting for me.

    thanks @bensibley and @toxicdemon for the help. that works for me.

    great support here.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.