• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Customization

  • An Introduction to Filters
  • An Introduction to Hooks
  • Filter Reference
  • Hook Reference
  • Shortcode Reference
  • Theme Customization Basic Skills
  • Visual Markup Guide
Shortcode Reference
  • Footer Shortcode Reference
  • Post Shortcode Reference
  • Shortcodes Overview

General

  • An Introduction to Genesis Child Themes
  • Getting Started with WordPress and the Genesis Framework

Genesis Code Snippets

Accessibility
  • Enable Accessibility Features
Admin Management
  • Force the Genesis Layout Settings
  • Remove the Genesis In-Post SEO Settings
  • Remove the Genesis Layout Settings
  • Remove the Genesis Menu Link
  • Remove the Genesis SEO Settings Menu Link
  • Unregister the Genesis Layout Settings
  • Unregister the Genesis Widgets
Author Box
  • Enable the Author Box on Archive Pages
  • Enable the Author Box on Single Posts
  • Modify the Author Box Title
  • Modify the Gravatar Size
  • Remove the Author Box on Single Posts
Block Editor
  • Disable Responsive Typography in Genesis Blocks
  • Enable Block-Based Widget Editor
Breadcrumbs
  • Modify the Breadcrumbs Display
  • Modify the Breadcrumbs Home Link
  • Reposition the Breadcrumbs
Comments
  • Add A Comment Policy Box
  • Modify the Author Says Text
  • Modify the Comments Headline Text
  • Modify the Comments Link Text
  • Modify the Gravatar Size
  • Modify the Speak Your Mind Text
  • Modify the Submit Button Text
  • Modify the Trackbacks Headline Text
  • Remove the Allowed Tags Text
Custom Feeds
  • Remove Custom RSS Feed Redirect
Entry Content (HTML5)
  • Add Post Navigation
  • Remove Entry Content
  • Remove Post Image
  • Remove Post Navigation
  • Remove Post Permalink
Entry Footer (HTML5)
  • Customize the Entry Footer
  • Remove Entry Footer Markup
  • Remove Entry Meta
Entry Header (HTML5)
  • Customize the Entry Header
  • Remove Entry Header Markup
  • Remove Entry Meta
  • Remove Entry Title
  • Remove Post Format Image
Footer
  • Customize the Credits Text
  • Customize the Return to Top of Page Text
  • Customize the Site Footer
  • Reposition the Site Footer
Google AdSense
  • Remove AdSense ID Setting in Customizer
  • Remove AdSense Metabox from Theme Settings Screen
  • Remove AdSense Metabox on Posts and Pages
Head Section
  • Add Custom Viewport Meta Tag
  • Add Viewport Meta Tag
Header
  • Modify the Header URL
  • Remove the Header Widget Area
  • Remove the Site Description
  • Remove the Site Title
HTML5
  • Enable HTML5 Markup
Images
  • Add Featured Images
  • Display a Custom Gravatar
Miscellaneous
  • Add an After Entry Widget Area
  • Add Custom Body Class
  • Show Content Above Posts on Blog Page
Navigation Menus
  • Add Navigation Extras
  • Reposition the Primary Navigation Menu
  • Reposition the Secondary Navigation Menu
  • Unregister the Primary Navigation Menu
  • Unregister the Primary/Secondary Navigation Menus
  • Unregister the Secondary Navigation Menu
Post Excerpts
  • Modify the Content Limit Read More Link
  • Modify the Content Read More Link
  • Modify the Length of Post Excerpts
Post Formats
  • Add Post Format Images
  • Add Post Formats
Post Info (XHTML)
  • Customize the Post Info Function
  • Remove the Post Info Function
Post Meta (XHTML)
  • Customize the Post Meta Function
  • Remove the Post Meta Function
Post Navigation
  • Customize the Next/Newer Page Link
  • Customize the Previous/Older Page Link
Scripts
  • Disable Superfish Script
  • Enable Superfish Script
Search Form
  • Customize the Search Form Input Box
  • Customize the Search Form Input Button
  • Customize the Search Form Label
Sidebars
  • Unregister Primary Sidebar
  • Unregister Secondary Sidebar
Structural Wraps
  • Add Structural Wraps
  • Home
  • Docs
  • Customization
  • Theme Customization Basic Skills

Theme Customization Basic Skills

Table of Contents
  • HTML
  • CSS
  • PHP
  • Recommended Tools
  • FTP
  • Code Editor
  • Image Editor

You’ve got a fantastic new theme with a plethora of features, but you want to modify it to make it distinctively yours. You face a dilemma: should you hire a developer or become one yourself? Both choices have their ups and downs. A competent developer can achieve things you never imagined, quickly transforming your site into your vision. However, skilled developers can be pricey, with rates usually starting at $100/hour and going up to $200/hour or more.

Many people choose the do-it-yourself route. The most apparent advantage is potentially saving hundreds of dollars. But don’t forget to weigh the hidden costs, such as the value of your time. To create an impressive and functional site, you need to learn CSS, HTML, and enough PHP to modify existing code. It’s achievable, but don’t dive in headfirst.

HTML #

To follow CSS tutorials, create links, insert images, and more, you need to learn HTML basics. We highly recommend W3Schools.com as a fantastic free resource for learning HTML.

Essential concepts to learn include:

  • Divs
  • Spans
  • Anchors (links)
  • Images
  • Headings
  • Paragraphs
  • Breaks
  • Lists

Mastering these elements will give you a solid foundation to build upon.

CSS #

With a strong HTML foundation, you’ll want to learn how to style your site using CSS. CSS dictates the size, color, background, layout, and virtually every visual aspect of your site. W3Schools.com is once again recommended. Ensure you learn the following:

  • The Box Model
  • Backgrounds
  • Color
  • Fonts
  • Padding
  • Border
  • Margin
  • Floats

With proficiency in these areas, you can easily search for other answers.

PHP #

PHP, the most challenging part, involves logic construction. You don’t need to learn enough PHP to create something from scratch, but enough to modify tutorial code, which means understanding its logic. W3Schools.com is a valuable resource here as well.

Become familiar with these concepts:

  • Strings
  • Arrays
  • Comments
  • Variables
  • If…Else
  • Loops
  • Functions

Once you grasp these, you’ll be able to follow the code and adapt it to your needs.

Recommended Tools #

Developers have their favorite tools, often expensive software. If you’re on a budget, consider inexpensive or free options. Every tool mentioned below is free.

FTP #

You must learn to access your site via FTP. Good FTP programs include:

  • FileZilla: Available on all major OS including Linux
  • Cyberduck: Mac specific
  • WinSCP: Windows Specific

Code Editor #

Basic code editors include plain text editors like Windows’ Notepad. More advanced text editors offer markup, tab settings, and error checks, with some even connecting via FTP to update files automatically. Examples include:

  • Notepad++
  • NetBeans

Image Editor #

While Adobe Photoshop is popular, it’s also costly. For those on a tight budget, try Gimp, a free, extendable image editor that can open Photoshop files. Use Inkscape for vector art, as it works with Illustrator files.

Shortcode ReferenceVisual Markup Guide
Table of Contents
  • HTML
  • CSS
  • PHP
  • Recommended Tools
  • FTP
  • Code Editor
  • Image Editor
  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework