Styling separate elements on a page in WordPress

Using WordPress I am designing a theme for a client’s website.

I have set the landing/home page to a static page, and I’m using front-page.php as the default template for this.

Read More

My question is how can I style individual elements on the page when all of the page content is called in at once using <?php get_template_part( 'template-parts/content', get_post_format() ); ?>

Currently I multiple <div>‘s in the WP page content editor like so:

Example: using WP content editor to edit page content.

However, I’m concerned that my client or something else, may delete this content by accident and completely spoil the design. How can I separate content and style it accordingly in my template?

Related posts

2 comments

  1. My question is how can I style individual elements on the page?

    There are always body classes you can use for different pages/posts.

    How can I separate content and style it accordingly in my template?

    There are few options depend on what you need:

    • Turn off “Visual” editor mode for each user account. It sort of helps.

    • Move the custom HTML into the template files. If that’s OK.

    • Use custom fields, preferably with Advanced custom fields plugin.

  2. For every page,if you need the alone class then function :body_class() : is sufficient.

    Syntax :- < body < ?php body_class(); ?> >

    and you can also implement the another function : post_class : for the loop class.

    Syntax :- < body < ?php post_class(); ?> >

Comments are closed.