Themes and CSS #

There are thousands of WordPress themes available; many producers have been around for a well-over a decade!

Which is the best for you?

We work with GeneratePress, as their themes are optimized to load quickly ~ better SEO score.

I'll link to another blurb later about all of the different theming "engines" available as well, Elementor, Divi, etc.

I'm still working through some of the nuances of the block theming; though it's definitely suitable for the job!

Now that we've gotten that conversation out of the way, we can focus on the mechanics of a basic WordPress customization process.

WordPress theming #

Depending on which Editor you are using, you'll either manuever blocks or be navigating drop-down menues. Though most premium themes provide access to block-level editing.

Which makes customizing your page incredibly easy.

There are two primary objects we will want to edit ...

Individual Pages and Posts. Pages are for things like Contact, About, Store, etc.

Posts are individual blog posts.

Those items are the combined first objects we'll want to edit and customize.

The second item are the templates ... how does a list of blog post appear?

Should all Pages have the same style, or should some be different?

When I mentioned learning the nuances of GeneratePress, it is to these ends.

Back to WordPress theming and the Block Editor!

Press the / key ... and you will see a list of options.

You can even being typing and you will see more options.

Point-choose-click.

** Screenshots **

You have a wide variety of widgets to choose from ~ with a slew of modifications available for each.

Here's a link to a few key widgets.

CSS #

This is the crafy and cool part; editing vast swaths of your website with just a few lines of code.

Use your web browser to navigate to you web-page, right-click and choose inspect.

As you move your mouse over the code, various parts of your page will also highlight.

And this is how we can find out what classes belong to our elements of interest!

<div class="post-date">
	...
</div>

.post-date {
	display: none;
}

Is a personal favorite 😉 As I'll use this to remove unwanted calendar dates on Pages, for instance.

Here you can change colors, add decoration, refine alignment; all just by knowing a little bit about CSS

How does it work ? #

Honestly, we suggest reading Step #1 from Rebel Coding to get the basics.

While you'll use a tool within WordPress to add your Additional CSS, that will override theme defaults.

Check out this link to find that!