Custom Code Addition to a WordPress Theme
Related: Editable content, Properties
With the help of Divine Elemente v0.9 to generate a theme for WordPress CMS and then to add a prepared element’s code to the theme is easy as never.
Custom object. Banner
Let’s consider the whole step-by-step process on how to insert HTML code in the theme with the example of the Flash banner addition to a prepared theme for WordPress CMS.
Step 1. Open a PSD template in Adobe Photoshop.
We use a “Iphone4.psd” PSD template for this tutorial.
But you can also download any other PSD template from the Marketplace and work with it.
Step 2. Add a new element to the PSD template.
First of all, you are to prepare a place for a new object arrangement in the Footer grid block (in our case). To do that, in Adobe Photoshop you should:
- (A) Select a Rectangle Tool (U)
- (B) Draw a rectangle with 125 x 125 px dimensions (our banner dimensions)
Custom object. New element in a PSD template
Step 3. Launch Divine Elemente.
Select the “Elemente > Publish and Upload” item in the menu.
Custom object. Launch Divine Elemente
Step 4. Set required element’s properties.
Select the element created and assign it as an “Image”.
Custom object. Element assignment
The following properties are to be indicated in the Properties panel:
- Content: Editable in CMS
- CSS: New_banner
Custom object. Element properties
More details on Elements and their Properties.
Step 5. Publish a theme.
Select a prepared FTP account (A) (B) and click on the “Publish” button (C).
Custom object. Theme publishing
More details on FTP accounts and the whole publishing process can be found in the “Publish Editor” guide.
Step 6. Activate the theme at the website.
Being in the WordPress CMS backend, move to the “Appearance > Themes” section and select a new theme uploaded.
Custom object. WordPress CMS theme activation
Step 7. Switch on the Editing mode at the website.
Don’t log out from your admin account. And move to the website with the theme activated.
Find a hidden floating menu with Divine Elemente label (It is located in the top right corner of the browser window or in the top left corner) and click on the checkbox “Edit content” to enable the editing mode.
Custom object. Editable content
Read more about Editable content.
Step 8. Insert a prepared element’s code.
Select your prepared element and change the current code by your prepared website HTML code addition in the editor appeared.
Custom object. Element’s editing.
Step 9. Save and switch off the Editing mode.
Click on the “Save” button in the editor. Then, in the hidden floating menu uncheck the “Edit content” checkbox to disable the editing mode. After that, all changes will take effects immediately, and you’ll be able to enjoy the result of the website HTML code addition.
Step 10. Admire the result ;)
Conclusion
In such a way, you have just learned the whole process of a WordPress theme creation and how to insert HTML code in theme any time you need it with Divine Elemente v0.9.Related Guides and Tutorials:
DEPOSIT NOW CANCEL
