Browsed by
Tag: WordPress

Automatically enhance headers with hierarchy, links and smooth scrolling with offset

Automatically enhance headers with hierarchy, links and smooth scrolling with offset

There are several things useful in a longer document:

  • showing position of given heading in the structure
  • ability to create links to a heading
  • smooth scrolling to internal links
  • offset for scrolling if the top header covers some of the contents

Read More Read More

WordPress – another way to add widgets area (sidebar) below a post

WordPress – another way to add widgets area (sidebar) below a post

Previously I described one method to add custom widgets areas by copying and modifying theme files:

Now I’d like to describe another possibility when it comes to adding widgets area above or below a post or page – by adding the_content filter.

Read More Read More

How I refactored maze generating Python code and used advanced class features

How I refactored maze generating Python code and used advanced class features

Previously, I have created a maze generating code while learning Python. Later I enhanced it with animation and marking special cells. All of it was done in rush, to solve the problem. Now I spent some time improving the quality of the code by encapsulating code into classes, using “private” methods and fields and separating concerns. The exact steps I took can be viewed in the GitHub repository or read here.

Read More Read More

WordPress – add custom widgets on home page

WordPress – add custom widgets on home page

I once had a desire to provide a list of shortcuts on the home page for my blog’s new users. I didn’t like the default WordPress’ blog page to be just a list of posts. I didn’t think that sidebar widgets grouping posts by date, category or tag would be helpful enough to grasp the versatility of the topics I cover here. I wanted to display a clear list of links with what a user can read about.

Read More Read More

WordPress – enhance any theme with footer widgets

WordPress – enhance any theme with footer widgets

I am using a free theme that provides only one widgets area – a sidebar. In its paid version, though, there is also another widget area – footer. The theme displays a copyright message in the footer and provides no method (in the free version) to change or remove it.

Currently, I would like to change the copyright message and add a link to the Privacy Policy page. In the future maybe I will want to put something else. So I could have either hardcoded the text and link into my theme or I could create an extensible solution.

I decided I would add a new widget area in the footer. The contents of it could be configured using WordPress’ Theme Customization feature (Appearance > Customize > Widgets).

Read More Read More

Trello – Blogging Editorial Workflow and Calendar

Trello – Blogging Editorial Workflow and Calendar

I can’t live without two tools: Excel and Trello. There are some WordPress plugins that help manage the editorial calendar and publishing workflow (CoSchedule at $80 a month, PublishPress at $77 a year), but… they cost a lot!

On the other hand, I don’t say Trello is the best place to keep posts’ workflow, because you have to duplicate some information between WordPress and Trello. In my case, it’s the title, link, basic category and some statuses.

Read More Read More

WordPress – I created a child theme, but it looks different because of Bootstrap

WordPress – I created a child theme, but it looks different because of Bootstrap

I wanted to create a child WordPress theme. All online tutorials were as simple as create two files and add several lines of code:

To my surprise – it didn’t work. To be more specific, it almost worked, but the child theme did not look exactly the same as the parent – some margins, fonts and colors were different. After several experiments, it became apparent that these problems were caused by Bootstrap being loaded after the parent’s style.css file.

Let’s see what exactly is happening to the parent and child stylesheets.

Read More Read More

WordPress – responsive tables with headers in Gutenberg editor

WordPress – responsive tables with headers in Gutenberg editor

I like the new visual editor Gutenberg in WordPress, but some of its limitations are really annoying. One of the biggest – inability to set a header in a table. The other problem is that the generated tables are not responsive, i.e. in a phone they will either be extremely squeezed or scrolled horizontally, neither being usable. A common solution is to convert the table into a list. I’ll present several plugins and workarounds for tables.

Read More Read More

Services to host source code and embed running applications – Gist, Codepen, JSFiddle, Glitch, StackBlitz

Services to host source code and embed running applications – Gist, Codepen, JSFiddle, Glitch, StackBlitz

If you want to show source code in a page or blog, create examples of running HTML/CSS/JavaScript code, or sample React/Angular/Node.js applications – you can use external services that allow hosting, versioning, embedding and even running applications.

I have checked several of them and each solution has both advantages and drawbacks. I don’t think it is possible to select a single service and use it for all cases, because they were created to fulfill different needs and different complexity.

In this article I present Github Gist, Codepen, JSFiddle, Glitch and StackBlitz, giving examples of what they could be used for.

Read More Read More

Customizing WordPress – adding breadcrumb

Customizing WordPress – adding breadcrumb

Add a breadcrumb trail to a WordPress site? Sounds like it was a matter of switching one option. Not in WordPress!

What I realized, adding a breadcrumb required four actions:

  1. Install a breadcrumb plugin.
  2. Create a child theme if you use a stock theme.
  3. Edit theme file to display the breadcrumb in a correct position.
  4. Edit theme file to style the theme.

Read More Read More