WordPress Performance dilemma

Question

I currently worry about performance. The situation is currently:

I want to display content from block editor, or from Gutenberg WordPress editor.

I created a page template and connect with a page.

<?php /* Template Name: Example Template */ ?>

<?php get_header(); ?>
 <?php while(have_posts()) : the_post(); ?>
     <?php the_content();?>
 <?php endwhile; ?>
<?php get_footer(); ?>

What is best way to add elements from the_content(); fun. classes.

eg. I wanna headings tags have an example class but paragraph tags have others. I have three ideas how to ''fix'' this.

First:

Add style tag inside page template and target elements by CSS.

<?php /* Template Name: Example Template */ ?>
<style>
    .main h1 { color: red; } .main p { color: green; }
</style>
<?php get_header(); ?>
 <?php while(have_posts()) : the_post(); ?>
     <div class="main">
          <?php the_content();?>
     </div>
 <?php endwhile; ?>
<?php get_footer(); ?>

Second:

Add the target class by jQuery.

<?php /* Template Name: Example Template */ ?>
<?php get_header(); ?>
 <?php while(have_posts()) : the_post(); ?>
     <div class="main">
          <?php the_content();?>
     </div>
 <?php endwhile; ?>
<script>
     $("h1").addClass("color-red");
     $("p").addClass("color-green");
</script>
<?php get_footer(); ?>

Or add a class from Gutenberg editor. But I am not sure, what if the user deletes the entire element. Not just content.

gael gael · Accepted Answer · 2020-01-04T17:34:18

In my opinion, the simpler, the better.

I would use the theme's styles.css file or another already existing one and only add a class to the main div in the template (example class here).

<?php /* Template Name: Example Template */ ?>
<?php get_header(); ?>
 <?php while(have_posts()) : the_post(); ?>
     <div class="main example">
          <?php the_content();?>
     </div>
 <?php endwhile; ?>
<?php get_footer(); ?>

So that you are able to target each element of your html in your CSS file

.main.example h1 { color: red; } 
.main.example p { color: green; }

WordPress Performance dilemma

1 Answers