static HTML to WP questions

is this process of having the HTML of each page in the index.php (or page.php etc in hierarchy ) like being taught in the course wrong or is it acceptable for professional projects ?

It is not the “WordPress way”. The theme templates should work for any page – especially index.php which is the fallback template. WordPress sites are built in the database, not the theme. You should be able to switch themes at any time (even programmatically between pages).

or should I create a plugin ( perhaps use shortcodes or use the_content’ filter ) to show the HTML content of my pages ?

You don’t need to create anything but content, which goes in the database. The theme will show whatever content you create, so you don’t need a plugin for that unless it’s a special case of dynamic lookup of data.

Best practice is to put the content in the database, using an editor of your choice.

> Best practice is to put the content in the database, using an editor of your choice.

That.

The screen grab shows a homepage though, so the answer to that is a little more nuanced for that use case.
Content still goes in the database, but to get that lay-out, you could make use of a page builder, or you could probably do a lot of it with Full Site Editing in Gutenberg, or you could create widgets in a plugin and have the theme’s index.php file display those widgets (although you really should be creating a separate homepage template in the theme).

• This reply was modified 3 years, 11 months ago by Carike.

Taking a static site’s HTML and placing it in various WP templates would work, but it would make future site maintenance a nightmare, not to mention it would be impossible to change themes. If we did that, there’s little point to using WP, it’s still a static site! All content is in files and nothing is from the database.

If you really needed static content for the front page, at least place it in a front-page.php template (still not good practice). A theme’s index.php template can be used in multiple places, so it needs to run the standard WP loop to accommodate typical WP queries.

Your inclination to place HTML in page content through the WP or similar editor is correct. You do need to watch out for inline JavaScript that can exist in static .html files. Most JavaScript cannot safely reside in WP page content. If it needs to remain inline, it has to be inserted via a custom shortcode created for the purpose.

Static .html files often contain a page’s header, menu, and footer code. Since WP manages these through other means, you wouldn’t generally utilize all of a .html file’s code, but only the part that constitutes it’s main content.

I took that course by Brad Schiff. He does some advanced stuff like custom queries which I am weak on so I’m rewatching those lessons. You should not want to rebuild his Fictional University example – you should use what he does to build your own site (easier said than done.) He definitely has a custom front-page.php file but I don’t think a lot of that content is hardcoded but I can’t remember. The one thing he didn’t cover is all the classes and his CSS files.

You need to add the page content in HTML with the classes he uses and enter that in the text editor when you edit your front-page page. So if you want to do that on your own, you need to be really good at CSS.

Thanks a lot for the reply guys . It its reassuring to know what I feel should be the right way is indeed the right way . I have set about entering the HTML using the editor . I am however facing a problem which bcworkz foresaw. All the php in the template is getting commented when using the editor (the static HTML doesnt have any inline JS yet) So,things like :

<a class="event-summary__date event-summary__date--beige t-center" href="<?php the_permalink(); ?>">

<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/library-hero.jpg') ?>);"></div>

<div class="full-width-split__inner">
        <h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
        <?php
          $homepagePosts = new WP_Query(array(
            'posts_per_page' => 2
          ));

          while ($homepagePosts->have_posts()) {
            $homepagePosts->the_post(); ?>
            <div class="event-summary">
              <a class="event-summary__date event-summary__date--beige t-center" href="<?php the_permalink(); ?>">
                <span class="event-summary__month"><?php the_time('M'); ?></span>
                <span class="event-summary__day"><?php the_time('d'); ?></span>  
              </a>
              <div class="event-summary__content">
                <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                <p><?php echo wp_trim_words(get_the_content(), 18); ?> <a href="<?php the_permalink(); ?>" class="nu gray">Read more</a></p>
              </div>
            </div>
          <?php } wp_reset_postdata();
        ?>

are getting commented out in the HTML and the whole page is getting messed up . I understand that PHP is not allowed while using the editor and as suggested above I tried doing the PHP using shortcode :

So for :

<div class="page-banner__bg-image" style="background-image: url(<?php echo 
get_theme_file_uri('/images/library-hero.jpg') ?>);"></div>

I tried creating a shortcode :

function uni_image_shortcode($att) {
 $image_url = get_theme_file_uri($att['src']);
 return $image_url ;
}
add_shortcode('image', 'uni_image_shortocde');

And in the editor I’d used :

<div class="page-banner__bg-image" style="background-image: url([image src = 
'/assets/images/library-hero.jpg'])"></div>

This seems to be working all right . I just wanted to reconfirm if I am going in the right direction and that each of the different PHP ( and JS ) needs to be converted this way or is there possibly a quicker way to get this done ?

Thanks again for all the help and have wish you guys a Happy New Year .

What do you mean it is getting commented out? The PHP in the template file is used for retrieving the content from the database. DEFINITELY do not add the PHP to the page\post editor. Just add HTML with lasses and your content or shortcodes. I don’t quite understand what you are trying to do.

No, you shouldn’t have to make shortcodes. If it’s a theme image, the theme should handle it, otherwise the image should be in the content, so that you can switch themes easily and not have images go missing.

Separate the content from the elements that are common to all(or groups of) pages. The common stuff goes in the theme, as does the treatment of the featured image or the header image. The content goes in the database.
You might want a specific page template for your home page, but that goes in the theme as either front-page.php or a page template.

Separate the content from the elements that are common to all(or groups of) pages. The common stuff goes in the theme, as does the treatment of the featured image or the header image. The content goes in the database.

After several days of playing around with WP and the course project I think this makes great sense now . I think finally I am able to understand how WP works now .