Редактирование темы wordpress в dreamweaver
It has been more than a year since I used Dreamweaver to design a site. I’ve mostly been running sites using PHP-MySQL content management systems (CMS) and depend on the thousands of ready-made themes and templates to control the site design. For the occasional static page, I use Nvu for visual editing. But after reading this article on SitePoint, I wanted to try using Dreamweaver to edit one of the templates I’m using.
WordPress, like most PHP-MySQL CMS, uses template files to control the appearance of websites. The webpage is assembled from several PHP files controlling specific aspects of the site like the header, sidebar, main content and footer.
To use Dreamweaver to edit or customize WordPress themes, you need to combine these different PHP files into one page so that you can immediately view, while editing the codes, how the page would appear.
For this post, I edited a minimalist WordPress theme called Zimpleza.
The process
Go over the files of the WordPress theme you want to edit and study how it controls your blog’s appearance. Take note of how the pages, index.php (for the main page) and single.php (for individual blog posts), call the different template files.
The header is called first. What is called next depends on the WordPress theme you are using: some call the main content next then the sidebar then the footer. Other themes call the sidebar first then the main content and then the footer.
Create a new folder and copy into it 1.) the style.css of the WordPress theme you want to edit, and 2.) the folder containing the images.
Create a new HTML document in Dreamweaver and save it into the folder you’ve just created. Go to Code View and paste into it these lines:
The lines are code comments to guide you as you copy code from the different PHP files for editing and transfer these back again after you’ve finished customizing the design. Just re-arrange the lines if the WordPress theme you want to customize calls, for example, the sidebar before the main content. (click on photos to view larger images)
Copy codes
After that, change the dynamic calls for such things as your blog name and sub-title and add dummy headlines and article text.
Most WordPress themes that display the blog title as text have the following code:
What this does is display your blog name and link it to your main page. To view how the blog name is rendered, just delete and type in your blog name. Do the same thing for the blog tagline or subhead, which is displayed by the code .
Dummy content
In the main content, just delete the conditional statements found in index.php and retain only the code that displays the blog post.
Delete these lines:
Блог WordPress - WordPress плагины, WordPress темы и шаблоны. Руководство wordpress в примерах и уроках
15 комментария к статье
Кто нибудь уже использовал данный плагин на версии Dreamweaver 8.01? Давно уже пользуюсь восьмеркой и в общем то привык к ней как к своей квартире. Но вот дошел таки до необходимости сделать шаблон. Пересталять CS3 на восьмерку что то не хочется. Может кто то пробовал установить этот плагин на восьмерку? Поделитесь впечатлениями.
У меня пара расширений для WP установилось на CS4 без проблем. Одно стандартное Adobe и одно ThemeDreamer . Жаль только я не программист, пока не понимаю какой от них толк. Установил только сегодня.
Спасибо за подсказки, плагин DW CS4 установил давно, все руки не доходили разобраться, буду пробовать.
Отлично всё установилось! Замечательный плагин, а то я уж замучился вручную прописывать код. Сейчас поищу ThemeDreamer попробую поставить.
Автору респект!
Ребят подскажите как плагин установить, что то не получается.Сам файл как 3д максовская иконка, так должно? Нажимаю двойным кликом, в блокноте открываеться непонятная писанина. Что не так делаю?
Команды > Управление разширениями > Установить
Под DW CS5 плагин не работает, вернее он вообще не отображается в меню, может есть ему хорошая, работающая на CS5, альтернатива?
57 Comments
yeah, dreamweaver is cool BUT it easily eats up your system memory…
galing. tiyaga! i still use Macromedia Homesite.
Can’t agree more on what Poldo said.
Ever since I found this plugin, my work load just cut down by 90%. It used to take me a couple hours to edit one major work on DW but now it takes me 10 mins (at most).
Hey, thanks for the tutorial! I’ve been out of web design for a while and was wondering how to use Dreamweaver to edit WP themes. Will give it a go.
Wow, this article really caught attention. Good work, Max! 😉
Poldo,
Yeah it did 🙂 I had to install WP-Cache and tweak the comments to separate the trackbacks.
Hi,
I am a designer having no coding background.How do I create a mutation of a template using a worpree theme?
Please guide….your tutot was great!
thanks for the tutorial. The hardest part is the copying from the different template
Thanks for this tutorial dude! Helped me a lot.
do you know about this? a way to have content & blog
Written by Predator
Friday, 17 February 2006
Introduction to JD-WP 2.0:
Joomla! for those of you unfamiliar, is a robust content management application (CMS) that can serve as both a public front-end (Website) and a private administration backend for tasks, content tools and document infrastructure and maintenance.
WordPress is a Journaling application (Blog) that, (like Joomla!) offers both a front end Blog style website and a backend administration area.
While both applications share certain capabilities, (both offer varying degrees of blogtools and administrative functions) their individual strengths lie in their principal focus. Joomla! does content management very well and WordPress does blogging very well.
As of this writing, many of WordPress’s specific features function in, and with the Joomla! environment making this release especially useful to Joomla! users who can benefit from a world-class blogging tool that supports; comments, xml, rss post and comment feeds as well as ping-back and trackback features, all elements currently lacking in the out of the box version of Joomla!
Care and Feeding of JD-WP
The following article(s) covers the installation of JD-WP, configuration as well as a few tips-n-tweaks you may find useful in setting up and running this brilliant blend of content management authoring.
TABLE OF CONTENTS
Tic the TOC icon next to the article title to hide this menu.
Installation
Covers the basic installation of the JD-WP component with links to components and available modules.
Configuration
Outlines preliminary configuration of the WordPress end of the component such as global settings, Word Press options (advanced wysiwyg editor, etc.,) and nuance differences between JD-WP component and full, out of the box Word Press.
CSS (stylesheet) and Modules
Covers authors hacks and tips on stylesheet modifications/additions as well as installation and settings for adding associated WP modules;
Sidebar,
Calendar,
Recent Posts,
and Recent Comments.
Plugins and compatibility notes
Authors list of tested WordPress Plugins which function “inside” the Joomla! environment.
Tweaks, Tips and Hacks
Additional (potential hair pulling may be required) adventures into wrangling JD-WP and Joomla!
By the way, I covered the people power revolution and wrote the book “Corazon Aquino: The Story of a Revolution,” published in the US and also by National Bookstore Inc, 1988.
Update:>>> Извините, пришлось добавить после начала дискуссии в комментариях. Не все дочитывают статью до конца, поэтому сразу скажу, что описываемый способ для тех, кто имеет лишь поверхностное, общее представление о том, что такое CSS и HTML.
Не могу сказать, что являлся в то время знатоком HTML или CSS, потому требовался совершенно не требующий мозгов способ. И он нашелся.
Macromedia Dreamweaver. Я использовал 8 версию. (кстати, подойдет любой WYSIWYG-редактор, который имеет инструментарий для корректировки CSS.
Но, как уже было сказано ранее, содержимое страниц блога генерируется в момент выполнения скриптов, собственно это основная проблема.
Потому сделал все проще. Так как мне надо было только откорректировать некоторые параметры CSS, я сохранил страницу блога локально (Файл — Сохранить как-Веб страница только HTML в FireFox). Далее открыл полученный файл.htm в текстовом редакторе и изменил путь файла CSS таким образом:
Следующий шаг — скопировал в папку, в которую сохранил страничку — файл style.css и папку images из каталога темы блога, которую желаю поменять.
Последнее действие — открываем сохраненный файл в Dreamweaver (или в вашем любимом редакторе). И в удобном окне меняем любые свойства CSS-ки.
После того, как все откорректировано, файл стиля сохраняем и копируем в каталог темы блога. Так же в каталог images копируем добавленные или измененные изображения.
Все.
Добавлю, что способ применим, когда требуется изменить расположение, размеры, цвет, какие-то дополнительные характеристики объектов на странице. Можно даже скрыть какие- элементы. Но добавить новые нельзя. Нельзя, потому что в документе разделены структура и стили. Структура отвечает за содержание и наполнение документа, а стили — за расположение, размеры, цвета и прочие детали художественного оформления страницы. Добавление новых элементов потребует изменения структуры документа, а не только стилей оформления, а это уже совсем другая история.
PS Я знаю, что многие редактируют HTML, PHP, CSS и прочие документы в программах типа Notepad. Мне тоже с некоторого момента такой способ ближе. Но выше я описывал, как это сделать проще, как изменить тему под себя совершенно неподготовленному человеку, знающему лишь азы html.
В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
Добавление темы
Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.
Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.jpg.
Предварительный осмотр
Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.
Структура страниц
Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.
Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.
После добавления, список страниц должен выглядеть вот так:
Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.
Header.php и Footer.php
Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.
Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».
Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:
В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.
Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.
Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.
Шаблон страницы
Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:
Здесь мы подключили наши файлы шапки и футера, создали блок названия страницы и в теге section вставили стандартный блок вывода контента страниц и постов.
Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.jpg и images /h1-bg.jpg. Далее добавьте немного базовых стилей в файл style.css:
В результате должна получиться вот такая картина:
Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.jpg. В шаблон шапки, в файле header.php вставьте разметку для логотипа:
Форма поиска
WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:
А в файл стилей запишите стили для формы:
Всё, что осталось сделать – это подключить searchform.php внутри header.php.
Навигация
Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:
После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.
Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:
Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».
После этого меню уже появится на страницах но без стилей. Стилизуем его:
Футер
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
images/footer-logo.jpg – логотип футера
images/social.jpg – спрайты больших иконок
images/social-small.jpg – спрайты маленьких иконок
Далее делаем вёрстку в файле footer.php:
И прописываем стили в style.css:
В итоге главная страница сайта должна выглядеть вот так:
Главная страница
Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.
WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.
Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:
Он отличается от кода page.php только тем, что в нем нет заголовка страницы.
То, что мы будем делать дальше, уже выходит за рамки создания темы WordPress, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самой темы.
Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:
home-1.jpg
home-2.jpg
home-3.jpg
home-4.jpg
home-5.jpg
clients-1.jpg
clients-2.jpg
clients-3.jpg
clients-4.jpg
clients-5.jpg
clients-6.jpg
clients-7.jpg
Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:
Теперь осталось стилизовать данный код.
Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:
После этого, главная страница должна отобразиться правильно.
Сайдбар
Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.
Для этого создайте файл sidebar.php и поместите в него следующий код:
Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.
После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:
Далее нам нужно добавить стили для вёрстки:
Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.
Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:
about-1.jpg
about-2.jpg
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg
Далее перейдите в редактирование страницы в панели администратора и добавьте код:
И стили в style.css:
Шаблон поста
После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:
Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.
В самом начале, когда мы создавали шаблон шапки мы добавили в него поиск, однако страницы для отображения результатов поиска у нас еще нет. Создайте в папке темы файл search.php и добавьте в него содержимое:
От других шаблонов этот отличается тем, что мы выводим заголовок с текстом поиска, а затем список результатов поиска.
В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.
Заключение
На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.
Неумелое редактирование шаблона WordPress может привести к плачевным последствиям. Удаление даже одной строки из кода темы может сделать ее полностью неработоспособной. Поэтому в этом вопросе нужно разбираться досконально.
Related
- Published June 7, 2006
- Posted in Blog design, Blogs, Highlights
- Tagged Blog design, blog-tips, blogging, design, design-tools, dreamweaver, web-design, wordpress, wordpress-theme
Верстаем шаблон для Wordpress блога на Dreamweaver
В одной из статей блога была описана статья Создание тем. Шаблоны WordPress. В этой статье будет описан способ создания, точнее верстки шаблона с помощью Dreamweaver CS3 и заранее установленного на него плагина WP-Builder.
- Скачайте и распакуйте плагин.
- Запустите плагин путем двойного щелчка.
- Все плагин установился.
Открываем Dreamweaver, там должна появиться новая панелька «Wordpress», с которой Вы и будете работать.
Каждая кнопка отвечает за свои функции.
Такие функции, как шаблона, комментариев, Header, Footer и тд.Обычно используются в index.php.
Мета keywords и мета description используются в header.php
Следующий блок функций предназначен для контента и навигации – single.php.
Также вы можете вставить любую информацию об авторе.
И архивы данных, а именно категории, посты, время и тд.
Если вы читали статью Создание тем. Шаблоны WordPress, то вы без труда сверстаете тему WordPress, используя Dreamweaver. Так как все функции встроены и их не надо вручную набирать. Не забывайте соблюдать стандарты WordPress.
Создаем новую рубашку для своего сайта
Создавать тему будем пошагово:
1) Заходим в директорию wp-content/themes/ и создаем папку theme_test . В ней будут храниться все файлы будущей темы;
2) С помощью любого редактора создаем файл css . Хотя лучше сразу использовать специализированное программное обеспечение. Например, программу Dreamweaver . Внутри комментариев прописываем название темы:
Так мы даем понять WordPress , что это стилевой файл новой темы;
3) Создаем с помощью того же редактора файл index.php . Вставляем в него код:
Сохраняем файл в папке нашей темы. Теперь здесь два файла, предназначенных для создания шаблона WordPress :
На данном этапе новая тема уже видна через админку сайта в списке установленных:
Если активировать тему, то в окне браузера сайт будет выглядеть вот так:
Как видно из примера, структура и стилевое описание шаблона в WordPress разделены. На практике за вывод частей дизайна отвечают функции. При вызове такой функции происходит генерация кода нужного элемента страницы по одноименному шаблону.
Так что перед тем, как сделать шаблон для WordPress , нужно все это понимать. Теперь разделим html код файла index.php по шаблонам. Для этого создаем два файла: header.php и footer.php . Затем разнесем по ним код одноименных частей страницы.
Вот таким образом мы создали одностраничный шаблон для блога.
Разделы WordPress
Какой вариант создания шаблона выбрать?
Самостоятельное создание тем для человека, не наделенного соответствующим опытом и знаниями, может стать затруднительным. Поэтому лучше воспользоваться специализированными сервисами или приложениями. А полученные из этой статьи знания использовать для редактирования готовых шаблонов WordPress .
Более легкий способ
Создание тем для WordPress требует хороших знаний и практического опыта веб-программирования. Поэтому был разработан целый ряд программных приложений, позволяющих создавать уникальные темы даже обычным пользователям. Рассмотрим их на примере программы TemplateToaster .
Приложение доступно в платной и бесплатной версиях. Оно поддерживает создание шаблонов для нескольких популярных CMS . Также можно загрузить уже готовые темы:
Весь инструментарий приложения сосредоточен в верхней части. В самом окне редактора отображается черно-белый шаблон страницы сайта. Выделяя каждый из элементов дизайна, с помощью верхней панели инструментов устанавливаются значения множества параметров отображения:
После некоторых манипуляций с интерфейсом программы для создания шаблонов WordPress может получиться что-то стоящее. Доступен предварительный просмотр созданной темы в нескольких браузерах:
К сожалению, в бесплатной версии приложения сохранение темы не доступно. Возможен лишь ее импорт через ftp :
Но это не единственный способ, как создать шаблон для WordPress без специальных навыков. Еще это можно сделать с помощью онлайн-генераторов тем. Их интерфейс во многом схож с рассмотренным выше приложением.
Особенности шаблонов для WordPress
Шаблоны для любого движка радикально отличаются по своей структуре от стандартных шаблонов, созданных на основе css и html . Шаблоны для WordPress также называют темами. Благодаря им можно легко и быстро поменять внешний вид сайта. Также легко, как человеку сменить рубашку:
В состав темы входит несколько основных групп файлов:
- CSS файлы – как и в обычном шаблоне, несут в себе стилевые описания всех элементов;
- Шаблонные файлы – каждый из них отвечает за вывод информации в определенной части сайта. Данные шаблоны имеют расширение php ;
- functions.php – файл дополнительной функциональности, который реализует интеграцию темы в движок;
- Изображения – рисунки, которые используются в качестве фона.
Благодаря использованию шаблонов в WordPress удалось отделить внешнее представление сайта от программного кода. Поэтому они никак не влияют друг на друга, и их версии можно обновлять по отдельности.
Все установленные темы доступны для просмотра через интерфейс админки сайта. Для этого нужно перейти в раздел бокового меню « Внешний вид » - «Темы». Некоторые параметры внешнего вида шаблона можно установить в пункте « Theme Options »:
- Поменять цвет меню;
- Установить цвет ссылок;
- Выбрать один из вариантов структуры сайта;
- Задать расположение меню;
- Установить цвет фона для контента.
Для продвинутых пользователей в панели администрирования WordPress имеется встроенный редактор шаблонов. Он также доступен в разделе меню « Внешний вид »:
На диске ( или хостинге ) файлы всех установленных тем хранятся в папке wp-content/themes/ . В редакторе тем админки все файлы шаблона перечислены справа. После нажатия на имя файла его содержимое станет доступным для правки в окне редактора:
Чтобы лучше понять, как редактировать шаблон WordPress , разберем на примере создание темы для сайта.
Not Found
Place some dummy headlines and text to preview changes you might want to do with the stylesheet or the HTML code. The blog post headline is called by , just delete this and type in a dummy headline. To enter dummy text for the blog post article body, replace with some dummy text. Enter dummy links and headlines in your sidebar.
After you enter the dummy text, you now have a mock up design of your WordPress theme that you can use as base for customization. With this, you can instantly preview results of changes in the CSS or HTML codes. After you’ve finalized the design, copy the new codes to the different template files and save the CSS. Go over the codes again and replace the dummy text you placed with the appropriate WordPress template tags for the blog title, blog post headline and content.
To tweak your WordPress theme even further, you might want to check my repository of pieces of great WordPress theme codes, feel free to suggest snippets that should be added there. I still have to finish the second part of my article: How to create a WordPress theme: A guide for the design-challenged non-geek. I’m thinking of finishing part 2 by next week (fingers crossed).
Читайте также: