What is a WordPress theme?

/0 Comments/in

A WordPress theme is the appearance of the website. You can think of it as the bodywork of a car.

Screenshot_22 May. 29 13.04

WordPress itself is the engine that manages the content. The theme presents the content to the visitor in a visually appealing way, making it easy to read and navigate.

Screenshot_22 May. 29 13.05

WordPress themes come in various styles and colors. There is also a lot of variation in terms of automation!

 

A good WordPress theme is important! No matter how good a writer you are or how great your company is, a WordPress theme can make or break your website!

What makes a good WordPress theme?

  • It does not require an excessive number of plugins (for security reasons)
  • Customizable color options (for those without coding knowledge)
  • Responsive design to ensure it works well on mobile and tablet devices
  • Number of pre-programmed templates included
  • Ensuring the theme is not associated with any known hacks (check here)
  • Using a legitimate purchase of the theme by you or the developer (no Nulled themes!)

WordPress widgets, here’s how it works!

/0 Comments/in

WordPress widgets are small plugins that you can place in the sidebar. They are easy to activate, move around, or temporarily remove.

There are many types of widgets, and WordPress comes with default widgets that display the latest posts, a widget for admin login, a widget to display posts per month, a widget to show the latest x number of posts, and a widget with a calendar. The most commonly used widget is the text widget, which allows you to display HTML and text.

As you can see, there are many possibilities, and they are highly flexible since you can simply drag and drop them without any programming.

Additionally, there are many modules/plugins that generate widgets, so you can use them in the sidebar.

This is how a widget looks in your admin

voorbeeld tekst widget

By default, the widgets are collapsed, but you can click on them to expand and make adjustments. Here you see a text widget, where you can set the name of the widget that will be displayed above the widget on your website. Below, you can place HTML and text.

To use PHP within your widget, you can download a module/plugin that allows PHP execution in the text widget.

After making changes, don’t forget to click the “blue button” to save the changes and publish them live.

Saving unused WordPress widgets

voorbeeld widgets die niet gebruikt worden

Imagine you have written some text in the text widget, or you have a widget with many configuration options. You might want to save it even if you don’t want to display it live at that moment. You can do this by collapsing the widget and dragging it to the “Inactive widgets,” where the settings will be saved until you want to use it.

Dragging WordPress widgets

wordpress widget slepen

Dragging is quite straightforward, but you need a theme with a sidebar to do it. If dragging or saving doesn’t work correctly, it may be due to insufficient browser support (old browser) or a malfunctioning WordPress admin. Tip: Trying again with another browser or re-uploading the admin might help.

5 super widgets!

  1. The “Count per day” widget displays the visitor count in your sidebar.
  2. The widget that comes with the Contact forms 7 plugin allows you to display a contact form in the sidebar.
  3. The WP Polls widget displays a poll in your sidebar.
  4. With the Nextgen Gallery plugin and its accompanying widget, you can display a slideshow or photo album in your sidebar.
  5. You can execute PHP in your widget with the PHP text widget plugin. By default, WordPress doesn’t allow PHP execution.

Making your WordPress website responsive without plugins

/0 Comments/in

A responsive website, you can either code it yourself or have it coded by a programmer/designer.

Why not use plugins?

There are various plugins that can turn your WordPress website into a mobile version, adapting the layout to fit tablets, smartphones, or wide monitors.

Every plugin you use is a potential security risk.

If you create a mobile site with plugins, such as a scaling plugin, a responsive menu plugin, a widgets plugin, an image resize plugin, etc., you might end up using 3-4 plugins just to display a mobile version to your visitors.

Moreover, the website might become slower and less secure, and it could have a completely different appearance, providing a different user experience for desktop visitors compared to what they experienced on their desktop devices.

Creating a responsive website without plugins

As a programmer, you can create a mobile site by using the existing elements of the site and providing customized formats based on screen width through a custom stylesheet (CSS).

If you don’t know how to start coding a mobile version, you can follow the tutorial below: “How to start coding a mobile version.”

If you are not a programmer, you can hire a programmer with experience in converting WordPress websites to mobile formats.

How to start coding a mobile version

The viewport

Easily forgotten, but very important! The viewport ensures that your media query knows the width of the screen.
<meta name="viewport" content="width=device-width, user-scalable=no">
This viewport meta tag can control the size that should be displayed for the whole device/CSS.

We have media queries

Where you can specify what to do with Divs, titles, paragraphs based on the screen size.


@media screen and (min-width: 600px) and (max-width: 900px) {
/* Your CSS here */
}

Everything you put between that media query for 600 to 900 pixels will be displayed at that screen size.

Don’t forget to close the query!

Extra clarification: If you already have CSS code with !important in your regular stylesheet, you will need to overwrite it with !important or remove the “importance” from your regular CSS. Otherwise, the element won’t be affected.

Does the media query work? Test to know!

You might add code for a specific size, but nothing happens. Make sure the CSS is actually being used for a particular size.

What I often do is first write some code that changes the background color of the entire body for a certain size.

For example:

@media screen and (min-width: 600px) and (max-width: 900px) {
body { background-color: red !important; }
}

Then you can view the website on your mobile device, tablet, or scale the screen in your browser and see if the background turns red between 600 and 900 pixels.

Fluid versus Fixed

Opinions vary widely on the choice between Fluid or Fixed, so just do what you find most convenient.

Explanation of Fluid and Fixed:

Fluid means setting the wrappers (outer divs) to 100%. It scales with the maximum possible width of your device.

This allows you to use the maximum width, but the downside is that each device has its own width.

Fixed means a fixed value. In this case, you determine the width of each wrapper per media query.

How do I determine the flexible widths?

This can also be done in various ways. For example, from 1000px, from 750 to 1000px, and from 250 to 750px.

Think of 1000+ as for computers, 750 to 1000 for tablets in landscape mode, and 250 to 750 for tablets in portrait mode and phones in landscape mode.

Note! These pixel widths may change yearly as tablets become sharper, and it becomes pixel-specific.

This was the starting point for creating a responsive website without plugins!

The important thing is that it is relatively easy to achieve without plugins, which provides a better foundation for the speed and security of your WordPress website.

Premium themes: pros & cons of premium themes

/0 Comments/in

Premium themes from ThemeForest, Elegant Themes, and many other major theme developers are widely used. These themes are beautiful, versatile, and professional-looking.

However, both developers and hackers are well aware of this fact. Hackers know that these themes have been downloaded and used millions of times worldwide. As a result, hackers target these premium themes and write scripts that exploit vulnerabilities in the themes to upload files to the server.

You can read about what these uploaded files do here, and how to recognize these files here.

Premium themes have some major drawbacks when it comes to the security of your website. They contain 2 to 20 times more code than necessary.

Why Premium themes contain more code than necessary

Premium themes are designed to be flexible, offering various ways to display content. All these functionalities are pre-programmed.
Instead of having 3 templates for home, subpages, and single pages, they have 8 + site builders and several files that control the templates if you want to customize the content further, add sliders, social media functions, etc.

Even if you don’t use these features, they are still present on the server and can be accessed by hackers. If your website is not properly secured, they can even execute files, giving them considerable power.

Incorrect use of Premium themes

When used correctly, a premium theme is a “cheap” solution for developing a website. However, I often see the mistake of not using these flexible themes properly and making graphical modifications outside the theme’s capabilities in the code (hardcoding).

The problem with this is that you won’t be able to update the theme! Updates include new files, which means you will get graphical changes. Especially when a programmer has written the code (perhaps due to a lack of knowledge about premium themes and all their possibilities), you, as the website owner, cannot update without reapplying all the previous adjustments to the new version.

Often, premium themes are not updated, and therefore, they contain vulnerabilities.

Downloading a premium theme for “free”

Downloading a premium theme that should be paid for, for “free,” is the biggest mistake you can make!

Those who distribute these paid themes for free insert a piece of extra code into the theme.

This code publishes information that allows them to find the theme in Google. They then run a query on your website, gaining access to your server, the website, and your WordPress admin.

As I mentioned in a previous article: cheap is expensive, hacking is free.

The proper use of a premium theme

Before using a premium theme, you should familiarize yourself with its features. Then, take a careful look through all the menus the theme has set in your admin area and explore the possibilities so you can give your website the desired layout.

Most premium themes have pre-programmed options for setting and choosing the following:

  • Your logo
  • Sliders (using a built-in slider or Revolution Slider)
  • Theme colors
  • Intro texts, landing page texts, author texts
  • Favicon (the small bookmark icon)
  • Font choices
  • Forms
  • and more…

Additionally, the themes offer in-content shortcodes, tabs, jQuery solutions, and more.

In short, if you have purchased such a theme, you have a lot of options, and it is not a good idea to “conveniently” hardcode things directly into the theme.

After you have made all the settings in the admin panel and WordPress itself, you can update your theme, after creating a backup, when a new version is available. Some themes offer automated updates, while others require manual updates via FTP.

Tip for programmers/designers

Elegant Themes offers you access to all themes for one fixed price. They also have several plugins, such as additional shortcodes, that you can download, and themes in various categories.

What if I want to use a plugin or theme that is leaky?

/0 Comments/in ,

You have just created a beautiful website with a nice theme and various plugins, and then your website gets hacked!

That’s incredibly frustrating! It has happened to us dozens of times too, even with all the knowledge we have.

What if it turns out that your plugin or theme has a vulnerability, and the developers are not taking any action, even after being informed about it? Even when you’ve paid for the plugin or theme, the developers might not respond to your requests for fixing the vulnerability.

Why don’t developers take action?

Theme developers are not hackers or security experts; their main focus is often on making as much money as possible. This might sound harsh, but unfortunately, it’s the reality.

What can you do now?

You have two options:

  1. Replace the vulnerable theme or plugin with a new one.
  2. Ensure that the vulnerable plugin cannot cause any harm.

Executing Step 1

You remove the vulnerable plugin or theme from the server using an FTP program to ensure that the vulnerability is completely removed. Then, you look for a new theme or plugin and hope that it does not contain any of the 4000+ known vulnerabilities.

4000+ vulnerabilities? That doesn’t sound good!

Let’s put it into perspective:

There are 42,565 free plugins and approximately 30,000 paid plugins. Since 2003, there have been around 150+ WordPress releases, many of which were for security reasons.

The security within WordPress is well maintained, unlike some third-party plugins or themes.

There are countless free WordPress themes, and the number of premium themes is also extensive. WordPress itself is still free!

This wide availability of themes and plugins attracts both users and hackers from all around the world.

Executing Step 2

Unfortunately, this cannot be easily fixed with just one security plugin, as such plugins may not restrict file permissions on the server level to function correctly. In this case, you need to ensure that a vulnerability cannot make server-level changes.

You can do this by removing write permissions from certain folders so that the vulnerability cannot modify them.

What does a vulnerability in a plugin or theme do, actually?

Often, it does nothing until the person who knows the vulnerability starts giving it commands. This can be achieved through browser injections or input fields (XSS).

Conclusion

It’s ultimately your choice whether you completely replace the vulnerable plugin or theme, hoping that these extra efforts and costs will increase security, or if you “freeze” the website temporarily so that it continues to work as it does now.

The difference between Widgets – Plugins – Themes – Templates

/0 Comments/in ,

The Widgets

These are flexible additions to your website that you can place in specific areas such as the Sidebar (beside your content) or in the Footer (at the bottom of your website).

Some characteristics of widgets:

  1. Easy to move around by dragging them with the mouse
  2. Many popular plugins have widgets available to display information
  3. Can be used in fixed locations like the Sidebar, Footer, and sometimes the Header
  4. Widgets are designed as small components of your website

Click here to learn more about how widgets work.

The Plugins

These are additions to your website, such as a contact form or SEO tools. Plugins are developed to expand the functionality of your website and also to enhance your WordPress Dashboard.

Some characteristics of plugins:

  1. Average size between 1-2 MB
  2. Can be downloaded for both free and paid
  3. Provide WordPress with endless possibilities
  4. Sometimes the cause of a hacked website
  5. Load scripts, which can make your website slightly slower
  6. Need to be regularly updated

Click here if you want to learn about plugins.

The Themes

A theme contains the design of your pages. Sometimes it’s only for the homepage, blog pages, and subpages, but in luxury themes, it can also style your contact forms and landing pages.

Some characteristics of themes:

  1. Can be downloaded for both free and paid
  2. Determine 70% of what a visitor thinks about your website
  3. Can sometimes be vulnerable, leading to a hacked WordPress website
  4. Affect the speed and readability of your website for both visitors and Google

The Templates

These are individual pages. Think of a landing page, a contact page, or a style for blog posts or portfolio items.

Some characteristics of templates:

  1. They are easy to add to your current theme
  2. A custom template can save a lot of work if you have many pages with a specific layout
  3. By loading code specifically on one template, you ensure that other pages remain fast

Be selective with plugins & themes

Every theme and plugin adds code to your website. Among that code, there may be vulnerabilities that allow hackers and scripts to enter your website, such as placing their advertisements.
As of the writing of this article, there are 4000+ known vulnerabilities in themes and plugins that are often exploited by automated scripts (bots).

Limit the number of plugins to what you truly need and do not keep unused plugins and themes on the server, as they can also be accessed by hackers! Reduce the attack surface.

Finally, regardless of the theme or the number of plugins on your site, always use a good antivirus plugin for WordPress to limit the capabilities of hackers and scripts.

Does FSE have the future? A test with WordPress Full Site Editing

/0 Comments/in , , ,

What if you could style not only the content but the entire website using Gutenberg?

With Full Site Editing (FSE), which stands for Full Site Editing, this may be possible in WordPress 5.8.

I have been testing FSE with the beta theme called TT1 Blocks and the latest Gutenberg release to see if it is truly convenient.

Full Site Editing Beta test

I have installed the experimental theme called TT1 Blocks.
This TT1 Blocks theme is a variation of the default WordPress 2021 theme called Twenty Twenty-One.

With this TT1 Blocks theme, I can see if it is possible to create a “professional sample website” without using any other editor or theme builder.

tt1-blocks

You can edit both the content, header, and footer in the same way! No additional theme plugin, child theme, or settings page is required.

Ps: At the time of writing, the TT1 Blocks theme is still in development, which is why the build number is still 0.4.5. There will be changes in the final theme and the functioning of FSE and Gutenberg.

My current experience with the experimental theme and Gutenberg

I spent 20 minutes playing around with the theme to see if I can work with it.
I have only been using Gutenberg for 1 hour because I usually work with the Visual builder, Enfold builder, on other sites.

A fun test to see if Full Site Editing with Gutenberg is easy to use and has potential, right?

A deep dive into FSE

I dive right in and create a homepage. In my imagination, I should be able to modify both the content and the header and footer. But that’s not the case.

edit page

I see a new button at the top in the black bar, Customize Site.

customize website

Now I can customize the header and footer using blocks and the standard Gutenberg editor.

customize entire website

Okay, we can design the site.

I envision a website with a “professional look.”
I go for a dark red header, not too tall, and a footer with a gray background. The overall page background should be predictably white or very light gray.

Let’s see if I can achieve that!

example website

The header

Adjust color – CHECK

Modify title and slogan – CHECK

Adjust header height – FAIL

Even though I set the padding/spacing to 10px and removed any space blocks in the header, it is still three times taller than desired due to empty space.

header color

column too tall

The column height in the header
It appears that the logo and slogan are contained within a column. At the time of writing, the column height is not adjustable.

With some CSS, it is possible to adjust it by adding a class name to the column, setting the height, giving the h1 a margin of -100, and so on.

But we don’t want to do that; we shouldn’t have to code!

Changing the H1 to a Paragraph doesn’t help much either; in fact, it makes the column even taller.

EPIC FAIL!

Tip: Don’t dwell too long on something that isn’t working, move on and come back to it later.

The content

Inserting content is a breeze. Adding a photo, text next to it, adjusting with the so-called “spacers.”

content

Ps: I’m not saying this is the easiest way to create content. But Gutenberg works in general and is used by many 😉

Styling the footer

Similar to the header, changing the color is easy, and being old-fashioned, I also want to add a widget, which is straightforward. GREAT!

WordPress and FSE: 1-0

add widget

Adjusting the page background

The page background is still light green, the (awful) default color of the theme.
The theme currently does not have a separate settings page where this can be modified. That is likely to remain the case as we move towards Full Site Editing with Gutenberg.

I’m using the CSS Customizer to adjust the body color (Go to your admin panel, navigate to Themes, click on the current theme, and then click the blue “Customizer” button).

background color

Result

I added some CSS, but ultimately, I managed to create a sample website that resembles what I had in mind. – Well, approximately, given the short timeframe of 1 to 2.5 hours that I wanted to dedicate to using Gutenberg in combination with the new FSE features.

idea

Using FSE already?

No! Currently, in April 2021, FSE is still in beta. The official version is yet to be released, and many changes still need to be made.

When FSE is officially launched, you can take a look, but I recommend waiting for another 2-3 months even then. Often, some necessary updates are made when something is widely used. Consider compatibility with certain plugins, widgets, alignment, etc. There are probably still some minor bugs that WordPress will address in the months following the official release, as was the case with Gutenberg when it was officially introduced into WordPress.

wordpress judgement

Final Verdict: Does FSE have a future?

Absolutely! We know that Automattic (the company behind WordPress) closely collaborates with WordPress users. It is highly likely that the theme or the Gutenberg editor will have the missing functionalities in the official release.

Why FSE?

  1. You can easily make various adjustments such as color without having to search for a theme editor or theme settings.
  2. You can easily add and rearrange elements in the header and footer.
  3. The base theme is well-supported and maintained by WordPress itself and is free, unlike premium themes.
  4. Fewer plugins are needed to achieve what you want.

Contrary to expectations!
I am not yet a fan of Gutenberg, but this works quite well and is simple. Once you can manage the blocks, you can basically do anything.

Note: Designing is a separate skill, and technical knowledge and experience are still required to create a website.

Customize styling through WordPress’ CSS Customizer

/0 Comments/in , ,

What is WordPress’ CSS customizer?

The CSS customizer allows you to add CSS to your website.

What on earth is CSS!

CSS, Cascading Style Sheet … that name doesn’t really make it clear.
STYLING!

With HTML elements you display data in your website, and with CSS you style those elements.

So you want to make changes to the style of your website? Then you write a piece of CSS.

Why would I do that with the CSS Customizer?

The Customizer has color-coding that makes it easier to see if your code is written correctly. The Customizer also provides a LIVE preview view where you can see the changes immediately, so you can pre-view it before you Publish it.
You can instantly see if your CSS styling code is working!

The screenshot below shows a piece of CSS written in the Customizer.
You can see here the ID, Class and an H2 title element that I made red with the CSS for example.

customizer

Wanneer gebruik je de CSS Customizer van WordPress?

  1. Als je de vormgeving van je website snel wilt aanpassen
  2. Als je huidige thema geen beheerpaneel heeft waar je styling kunt aanpassen
  3. Als je geen Child thema wilt aanmaken
  4. Als je geen toegang hebt tot de styling & Serverbestanden

Let op!

When do you use WordPress’ CSS Customizer?

  1. If you want to quickly change the styling of your website
  2. If your current theme does not have an admin panel where you can customize styling
  3. If you do not want to create a Child theme
  4. If you do not have access to the styling & Server files

Notice!

To use WordPress’ CSS Customizer, it is important that you have experience with CSS.
CSS is the code language used to define the design, color and dimensions of a website.

The CSS you write in the Customizer will be loaded inline at the top of your website’s code. As a result, this CSS overrides the styling used by your theme.

You can also kill your website graphically with it, in which case it’s just a matter of deleting the written CSS, but keep in mind.

The benefits of the CSS Customizer

  • You immediately see what changes on the frontend of your website
  • The styling remains, even with theme updates
  • You don’t need to have server access or a code editor
  • The CSS code has clear code formatting in color
  • You can switch views: desktop, tablet and smartphone format
  • HTML styling with CSS in practice

I can see you thinking: HOW do I know WHAT to style!

In order to customize the HTML elements of your website with CSS, you obviously need to know what the elements are called. After all, you grab them by ID or CLASS name.

Therefore, open your website using an Element Inspector.
Most browsers (chrome, Firefox and more) have that option, you right-click on a particular part of your website and then choose Inspect Element – Sometimes you have to repeat this 2x to get a particular element.

Tip: You can of course open the Element Inspector in a different tab, or preferably on a different monitor because then you simply see more. After all, you only want to know the name of an element.

The screenshot below shows the CSS Customizer and the Element Inspector open on the far right.

element-inspector

Okay, you now know that there is a CSS Customizer in WordPress. You know that you can put CSS in there that you can use to customize the design of your website.

Now to write the CSS!
By now, of course, every programmer has long clicked away from this article and is happily adding CSS.

But I can’t write CSS!

Are you an enthusiastic website owner who has no idea how to write CSS?
Then you can commission us to modify a certain element with CSS. In fact, we write CSS as easily as the ABC.

Click here to put us to work*.
* please note, sometimes we are busy so we cannot provide the service. Security and recovery of hacked WordPress websites is our priority.

I want to learn how to write CSS

You can do that at w3schools.com
Currently there are free classes to learn CSS. (In english)
Click here to learn how to write CSS.

Saving changes in the CSS Customizer

Only when you click “Publish” – is the CSS saved in your website and displayed for new visitors! So don’t forget to press that button after writing CSS.

opslaan

What is a WordPress theme?

/0 Comments/in

A WordPress theme contains all the elements that are important for displaying texts, pages, posts and more.
Both the display of the elements and the design (color, size) are all controlled by the theme.

Is every WordPress theme the same?

Basically, every WordPress theme has a standard number of templates, basic design and various functions.
The colors, dimensions may differ, of course.

Free themes versus paid “premium” themes

There are free themes and the so-called paid “Premium” themes that offer more features or formatting for such things as portfolio pages, contact forms and more.

How do you get a WordPress theme?

WordPress offers a good number of approved themes that you can use for free. In addition, there are several themes for sale on the Internet, these often have additional elements that add value and thus can be sold for a certain amount of money.

Is a free theme worse than a paid theme?

No, the themes available for free on WordPress.org are very good. They are well structured and created by several good programmers.

What about the SEO?

The structure of themes is clear, 95% of all themes are suitable for Google.

How do I choose another theme?

If you are logged into your website, you can go to the “Appearance > themes” tab to choose new themes. (English: appearance > themes)

Pro Tip:

Once you’ve found a theme, delete the ones you’ve tried but aren’t going to use again. This is important so that the themes (especially the outdated ones) are not approachable by hackers.