front-page.php as fast as possible

  • Hi

    I am far away from being a developper, so I was wondering if this code is a good way to include html into my front-page.php or if I should use “echo”, or something else better.

    This page is quite heavy ( slideshow, images, parallax and animation effects, widget… ) so my worry is to keep things light and fast as much as possible. For exemple, I try to not insert to much widget inside, to use shortcode instead or to write HTML myself. But maybe it is a bad thing !

    Thank you to anybody who have something to say about this !

    Marion

    // Remove the default Genesis loop ans add custom homepage instead
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'one_pager_homepage_content' );
function one_pager_homepage_content() { ?>

    <!-- Welcome section -->
        <section id="welcome" class="parallax">
            <h2>Bienvenu sur le site d'Alizée Roussel, cavalière de dressage</h2>
        </section>

	<!-- Prestation section -->
	<section id="prestation" class="parallax">
		<article class="wrap">
            <h3>MES PRESTATIONS</h3>
            <div class="prestation dressage one-third first">
                <div class="photo"><img alt="dressage du cheval" src="https://localhost/wordpress/wp-content/themes/one-pager-genesis-master/images/prestations/dressage.jpg"/></div>
                <h4>Dressage du cheval</h4>
            </div>
            <div class="prestation valorisation one-third">
                <div class="photo"><img alt="valorisation en compétition" src="https://localhost/wordpress/wp-content/themes/one-pager-genesis-master/images/prestations/valorisation.jpg"/></div>
                <h4>Valorisation en compétition</h4>
            </div>
            <div class="prestation entrainement one-third">
                <div class="photo"><img alt="Entrainement du cavalier" src="https://localhost/wordpress/wp-content/themes/one-pager-genesis-master/images/prestations/entrainement.jpg"/></div>
                <h4>Entrainement du cavalier</h4>
            </div>
            <div class="clear-line"></div>
            <div class="bouton">
                <a href="https://localhost/wordpress/mes-prestations/">En savoir plus</a>
            </div>
		</article>
	</section>

	<!-- image 1 section -->
	<section id="image1" class="parallax"></section>

    <!-- cheval section -->
	<section id="cheval" class="parallax">
		<article class="wrap">
            <h3>LES CHEVAUX</h3>
			<?php echo do_shortcode('[display-posts post_type="cheval" image_size="cheval" posts_per_page="12" wrapper="div"]'); ?>
		</article>
    </section>

    <!-- image 2 section -->
	<section id="image2" class="parallax"></section>

    <!-- Album section -->
	<section id="album" class="parallax">
		<article class="wrap">
            <div id="photos" class="one-half first">
                <a href="https://localhost/wordpress/albumphoto/">
                    <h3>Albums photos</h3>
                </a>
                </div>
            <div id="videos" class="one-half">
                <a href="https://localhost/wordpress/albumvideo/">
                    <h3>Albums vidéos</h3>
                </a>
            </div>
		</article>
	</section>

    <!-- image 3 section -->
	<section id="image3" class="parallax"></section>

    <!-- section courante -->
	<section id="actualite-sidebar" class="parallax">
		<article id="actualite" class="wrap two-thirds first genesis-grid">
    <?php
				genesis_widget_area( 'actualite-section', array(
				'before'	=> '<div class="actualite-section widget-area">',
				'after'		=> '</div>',
				) );
			?>
        </article>
        <sidebar id="sidebar" class="wrap one-third genesis-grid">
            <?php
				genesis_widget_area( 'sidebar-section', array(
				'before'	=> '<div class="sidebar-section widget-area">',
				'after'		=> '</div>',
				) );
			?>
        </sidebar>
        <div class="clear-line"></div>
	</section>

	<!-- Contact section -->
	<section id="contact" class="parallax">
		<article class="wrap">
			<?php
				genesis_widget_area( 'contact-section', array(
				'before'	=> '<div class="contact-section widget-area">',
				'after'		=> '</div>',
				) );
			?>
		</article>
	</section>

<?php }
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi Marion

    I can see what you’re trying to do, however, this might cause some problems in your development. Ideally you could create a page-template called “Home” and then add the markup there. Its not considered very good practice to include static HTML in your dynamic files as WordPress will struggle and/or simply will not be able to find links to images and scripts / css.

    The real question you have to ask yourself is: Do you want this content to be dynamic?

    At the very least, you should use the <?php echo get_stylesheet_directory_uri() ?> so that WordPress can find your files relative to the style.css

    Does that make sense?

    Thread Starter yonk

    (@yonk)

    Thank you for your answer !
    I don’t see really the difference between a page template and the front-page.php I presented above ( genesis() function doesn’t appear there but it is a the end of the page so this page works as a template, isn’t it ? ). For the parts who needs to be dynamic, I use widget or shortcode but for the rest, I don’t really know how to manage it in php.
    For exemple how can I say in php to generate this simple code to get two buttons ? ( It’s a shame to use a heavy widget just for that, to add personal CSS because it’s not exactly the form we want, and to be bothered by the wrong html heading tags ? )

    <!-- Album section -->
	<section id="album" class="parallax">
		<article class="wrap">
            <div id="photos" class="one-half first">
                <a href="https://localhost/wordpress/albumphoto/">
                    <h3>Albums photos</h3>
                </a>
                </div>
            <div id="videos" class="one-half">
                <a href="https://localhost/wordpress/albumvideo/">
                    <h3>Albums vidéos</h3>
                </a>
            </div>
		</article>
	</section>

    But I understand what you mean and I’m going to try to have something more dynamic. When you talk about the <?php echo get_stylesheet_directory_uri() ?>, I don’t really understand. I use it in my function.php, to enqueue css or script, or to get images from my theme directory, but I don’t see where to use it into my front-page.php ?
    Thank you so much for your attention and sorry for my so bad level in php, and english ! ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘front-page.php as fast as possible’ is closed to new replies.

Tags