let i = document.querySelector('input');
let text - i.value;

Создание тем под Вордпресс намного легче, чем под OpenCart. Здесь нет таких вещей, как MVC, Twig. Просто пишешь всё в процедурном стиле, логика идёт впермешку с html.

Но обрати внимание, что в некоторых случаях ВП создаёт тяжелые запросы к БД. Особенно это бывает в листингах постов, при сортировках по мета-полям. Здесь нужно уметь оптимизировать эти запросы.

Рекомендации:
1. Не использовать так называемые премиум-шаблоны с сайтов типа TemplateMonster. В 99% случаев - это мега-тяжёлый, перегруженный хлам для тех, кто не умеет программировать.

2. Elementor must die! Это вообще даже не должно обсуждаться.

3. Из плагинов я бы советовал только ACF и Yoast. Этого достаточно для реализации любого новостного сайта. Если сайт мультиязычный, то ещё WPML. Большое количество плагинов - плохая практика. Ещё момент: если плагин подключает свои стили или скрипты на страницах, где он не используется, его нужно сразу в мусорку.

4. Для форм использовать свой обработчик. Никаких CF7 и Рекаптчи! Для скрытых форм (например, в модальном окне) хорошей практикой является их рендеринг по факту вызова, а не размещение в исходном коде.

Фон с затемнением нужно наложить поверх картинки. Чтобы не создавать дополнительный блок, можно использовать linear-gradient:

background: url(../images/bg.jpg) center center no-repeat, linear-gradient(90deg, rgba(34, 34, 34, 0.53), rgba(34, 34, 34, 0.53));

UPD. Поправка. В этом случае linear-gradient на первом месте должен стоять:

background: linear-gradient(90deg, rgba(34, 34, 34, 0.53), rgba(34, 34, 34, 0.53)), url(../images/bg.jpg) center center no-repeat;

Если не дублировать контент - без JS никак, к сожалению.