How do you design Wordpress themes?

Question

css

Tell us how you make up for wordpress, what methodologies do you use and how do you generally go about developing wordpress themes?
I am writing a theme for my blog. I ran into the problem that the task was too tough for me - too big a piece of work. Not in terms of programming. Here, for my tasks, everything is more and more understandable, and simply, Wordpress. And in terms of layout and organization of CSS.
There is a desire to put the topic in public access at the end of the work, so I want everything to be best practices or as close as possible to this. Well, for the future, of course.
I make layouts in Brackets, I master SCSS, I make layouts in Balsamiq Mockups, the _S framework (probably it would be worth it to just layout in HTML and CSS first, and then make a wordpress template?).

Answer 1

Using _s is a very valid idea. The layout first in html is very wrong, unless you already have your own base code based on WordPress. Why? Because WordPress generates a bunch of its own CSS classes everywhere, and it is correct to use them.
The process is as follows:
- an idea, sketches on paper, thinking through features, modular grids, a prototype
- design in Photoshop
- assembling the functional part of the template - connecting the necessary plugins, displaying meta fields, all custom output - in general, you need to output all real content (or close to real), and not to typeset with Lorem Ipsum
- and now the most interesting thing is SCSS, mobile first + javascript. In general, a clean frontend.

Answer 2

Three days ago I worked with WordPress and layout for it for the first time. First, I watched a few lessons on YouTube, how people put their layout on WordPress, and I immediately began to practice. Worked with underscores . At first, I made up everything completely on my computer in my daddy :) Next, I split my layout into footer.php page.php sidebar.php and header.php
Next, I deleted the standard style.css that was in the theme, after underscores. Well, then I launched the site and saw some shortcomings that wordpress brought up. for example, when you create a menu through the admin panel, it automatically prescribes its classes to ul and li. I had to edit them a bit.
Also, I used bootstrap. I didn't have any problems with wordpress+bootstrap. Everything, as in the usual layout.

Answer 3

Instruments:
I deploy the VI with the necessary plugins, create the main page and a couple of internal ones. I expose in settings static main.
hat I save all the graphics in a folder. I create an index.html file in the theme from a blank. In it I make up the main one. I start with the elements that will be on all pages (that is, mainly the header and footer). With the help of emmet, the frame itself is written in 10 minutes (previously, of course, looking at the layout, I think over the logic of the elements, the necessary style names, etc.)
I scatter the code from the html index on the necessary files. I change the paths (if I didn’t insert pictures through css somewhere) I insert the header code into header.php, the footer code into footer.php. More from the situation. Either the rest in front-page.php (which is most often), or I bring page.php to mind and already work in a complex way (creating sliders in the admin panel, setting up ACF and contact form 7, etc.)
Maybe this is not very correct but I'm used to it)

Answer 4

I'm a little confused about your question. I'll tell you how I do it. Everything is standard.
1. First, I draw the entire template in Photoshop.
2. Further I make up in static html.
3. And then, of course, php. Well, I screw all sorts of additional settings for users to it.
If you already have a drawn layout, then type it into static html, when the layout is completely ready, then pull it onto the engine.
When I was making my first template, I didn’t really have a layout ready in Photoshop, and I had already started layout, then, without completely making it up, I began to pull it onto the engine. As a result, the development was delayed for a long time. In general, I do not recommend doing this. Everything is better in order, it will be faster and better at times unambiguously.

Answer 5

Everything seems to be here: https://codex.wordpress.org/Theme_Development

Answer 6

Previously, I first made layout in HTML + CSS, then I integrated this layout into WordPress.
Over the years, I have developed a basic WordPress template, and now I work with it right away without an intermediate HTML step, which greatly speeds up the process.

Answer 7

We made a framework according to the code on BootStrap3 + SCSS, a WP assembly with the most common plugins, filled it with test content. Now SCSS is mainly edited, the layout is cut from the designer.