Building Custom WordPress Sites from Scratch

Move from wireframes to the design phase by applying fonts, colors, textures, and imagery to convey the client’s goals, and choose a dominant and secondary font to guide the layout.

Establish a base color for the design using the color panel and color guide in Illustrator, then build a cohesive palette with complementary colors and a new swatches group.

Design a site logo by selecting fonts and a color palette, creating and styling two strokes with the appearance panel, and positioning grouped text for 'order karate' using Illustrator.

Position the logo in the layout and enable scale strokes and effects so strokes resize with the logo, then use guides and zoom to preview overlap with the navigation menu.

Learn to craft an Asian-inspired brush splash in Illustrator using a dry brush (number six) and a bold red–black palette, layered behind the site logo.

Develop three main text containers by duplicating a logo and shaping 'why karate,' 'meet your sensei,' and 'tour our dojo,' applying typography tweaks, positioning, and a drop shadow in Illustrator.

Push the design further with a three-column main area and a gradient fill. Add brush effect behind the text, thumbnail gallery, and newsletter signup, then move from Illustrator to Photoshop.

Borrow a calendar UI from Yahoo design stencils, download the stencil kit, and open in Illustrator to edit colors and quickly wireframe a WordPress layout.

Learn how to move a design from Illustrator to Photoshop, preserve layers, and paste as a smart object in a 960 by 1977 document.

Align Photoshop and Illustrator canvases by checking artboard options and matching width and height, then switch the canvas size to pixels and anchor to bottom left to trim white stripe.

Explore how vector smart objects enable a seamless Photoshop–Illustrator workflow, editing contents in Illustrator and quickly reflecting changes back in Photoshop through double-clicking the smart object and saving.

Break apart a photoshop layout from an illustrator vector smart object by separating header, slideshow, blog loop, sidebar, and footer into layers. Resolve content shifting with a practical fix.

Prevent layout shifts when breaking apart the layout by locking a rectangle behind an Illustrator smart object aligned to the art board; paste header content as a Photoshop smart object.

Learn to break apart a website layout in Photoshop by extracting sections into separate vector smart objects—slide show, center section, blog loop, sidebar, and footer—using Illustrator steps.

Organize your Photoshop layers into header and slideshow groups, rename content for clarity, and learn quick grouping techniques using Ctrl/Cmd+G to speed up your workflow.

Develop the header by breaking header content into separate layers and smart objects, then apply a texture inside the header area to enable easier manipulation of logo and menu text.

Insert a header texture in Photoshop using a clipping group with the red rectangle as the mask, then adjust blending and position the texture for the header.

Insert imagery into your layout by importing photos in Photoshop, placing a slide show photo inside a clipping group, resizing with free transform, and using blending modes for dynamic results.

Isolate blog thumbnail rectangles and clip photographs into the blog loop and photo gallery using clipping groups, with the magic wand, marquee tool, and free transform to resize.

Explore building the center section of a WordPress layout by organizing images with clipping groups, breaking apart smart objects between Photoshop and Illustrator, and aligning text with guides and layers.

Finalize the layout by detailing the center section with textures, clipping groups, and layered photos, organize layers and smart objects, install WordPress locally on your computer, and prepare CSS.

Download WordPress from WordPress.org, download the zip file, and unzip it to access the WordPress directory for local installation on Windows or Mac.

Launch the Zahm control panel, start Apache and MySQL on Windows, then open localhost/phpMyAdmin to create a new database for WordPress and note its name for installation.

Install WordPress on a local Windows PC by moving the WordPress folder into htdocs, using the installer to create wp-config with your database name, then log into the local dashboard.

Download and install MAMP on your Mac via DMG, run a local Apache and MySQL server, then configure preferences and create a WordPress database.

point mamp to your unzipped wordpress directory, start the apache and mysql servers, and create the database to drive your wordpress site.

Create a small database with phpMyAdmin and install WordPress locally on a Mac, understanding WordPress frontend and backend and how pages, posts, and comments are stored in the database.

Learn to access the WordPress admin dashboard on Mac and Windows, log in via local host, and explore the backend layout with posts, pages, categories, and comments.

Understand how WordPress separates the front end from the back end for visitors and content management. Learn to use two browser tabs to preview changes in real time.

Explore the four WordPress areas—header, content area, sidebar, and footer—and how to customize them with widgets and a navigation menu. See how posts and pages populate content.

Configure WordPress permalinks to replace cryptic page IDs with readable, SEO-friendly URLs by using a custom structure of /%postname%/ in settings, permalinks, then save and refresh to see the changes.

Learn to change a WordPress site's presentation by applying and previewing themes, switching from 2011 to 2010, and observing how the layout, widgets, and footer update.

Explore locating and editing WordPress template files, including header, loop and sidebar PHP files in the wp-content/themes/2010 theme, and choose a suitable text editor with line numbers for editing.

Learn to customize a WordPress theme by inspecting style.css, using a code editor, and applying background colors to the wrapper, header, and main content to reveal the site layout.

Define the main layout components in CSS by styling header, main layout block, content area, sidebar, and footer. Visualize the structure in the browser with background colors.

Adjust the layout width from 940 to 960 pixels by updating the wrapper and removing top margins and padding; learn how containers, padding, and margins determine page layout and spacing.

Begin by building the header piece by piece, removing the site title, tagline, and header graphic, then adjust the main menu and style.css to a full-width aqua 960px layout.

Isolate the header content and extract the logo and menu as smart objects in Photoshop. Slice the header background with the slice tool and prepare it for WordPress layout integration.

Save the header background from Photoshop as a high-quality JPEG, choosing the slice and file settings, then save it into your WordPress images folder with a clean, none-based filename.

Corrects the Wordpress file structure by removing the intermediary images folder, consolidating into one images folder containing header background, and adjusting Photoshop save settings to prevent duplicate folders.

Insert the header background graphic into the WordPress CSS by referencing the images folder and setting the correct local path, then adjust header height and remove padding for proper display.

Extract the main logo from the Photoshop layout using a smart object workflow across Photoshop and Illustrator, preserve transparency with PNG-24 for WordPress header images.

Insert the WordPress logo into the header with inline css and an image tag, then adjust header height and move the menu below the logo for proper alignment.

Resize the logo using Photoshop by adjusting image size while preserving proportions, then preview in the browser to adjust height and prevent the logo from dipping into the menu.

Rough in the slideshow area by creating a placeholder slice from the Photoshop layout. Save the slice to the Wordpress images directory and note its dimensions for a self-running slideshow.

rough in a wordpress slideshow by updating the css main padding and editing index.php to insert a styled div and an image tag with the slideshow path.

Learn the basics of blog posts, including title, date, author, content, and post meta data, and how the blog loop on the home page displays newer posts first.

Publish placeholder blog posts in WordPress by adding new posts, entering a title and content, choosing between visual and HTML editors, and configuring slug, publish date, category, and visibility.

Learn to create a post thumbnail with Photoshop, save as JPEG in the WordPress images folder, and set it as the post's featured image.

insert and display a featured image post thumbnail by editing the WordPress loop, injecting a floated left image with a right margin, to render on the front end.

Learn how to use the WordPress more tag to trim post content in the blog loop and enable a continue reading link to the full post, updating frontend and backend.

Repurpose the Hello World post into blog posts 3 and 4, copy content, set the more tag and permalink, assign a featured image, and publish to fill the blog loop.

Learn to set the blog loop background graphic in a WordPress site by isolating and exporting a graphic with Photoshop and Illustrator, and applying it via CSS to control tiling.

Learn to control the blog loop background tiling using CSS by applying background-repeat and background-position, positioning the graphic with x and y coordinates to fit the design.

Insert blog loop title graphic into WordPress by exporting a transparent png from Photoshop, placing it in the images folder, and updating index.php to display it in the blog loop.

Learn to customize how posts display in the WordPress loop by rearranging post meta, including date, author, and category, using simple code edits and a vertical pipe separator.

Learn how wordpress post display becomes customizable by editing php to show or hide titles and adjust padding, line height, and margins with cssa.

Directly adjust the blog loop CSS by removing container margins, narrowing the container to 645px, and setting content margins to 0 5px; these changes prepare for a wider upcoming sidebar.

Distinguish WordPress pages from posts by showing that pages are standalone, not in the blog loop, and commonly appear in menus, sidebars, or footers with optional templates.

Create and publish placeholder WordPress pages, edit slugs, use the visual or HTML editor, apply page templates, and see the theme auto-update the top menu while adjusting styling with CSS.

Publish additional pages in WordPress and add links like meet your sensei, our dojo, and why karate to the main menu; preview the front end and note potential reordering.

Change the front-end menu order by adjusting each page's sort order in the WordPress dashboard, using quick edit to set positions after home, and refresh to verify.

Finish the menu setup by confirming page order and automatic WordPress page names, and plan the footer layout so all pages appear across the site with placeholders.

Isolate the center box texture using Photoshop slices, divide the layout into three vertical slices, and export a center texture pack as a JPEG for code integration.

Code the center section in WordPress by building a 960px wide, 382px high center container with three inline-styled blocks that float left and reveal the pulled center texture.

Apply a repeating background texture to the three inner center containers and adjust the 1-pixel border in CSS to maintain consistent width.

Extract and prepare the center section graphics by isolating each photograph, red title, and paragraph text in Photoshop, using selections, copy merge, and PNG-24 transparency.

Arrange three center graphics in a WordPress layout by using nested divs and inline styles. Insert image tags with correct src paths and set dimensions and margins for alignment.

Adjust the center section of a three-column WordPress layout by padding-top, negative margins, and links to why karate, meet your sensei, and tour our dojo.

Learn to set center box hyperlinks by copying the link address, inserting an anchor tag in index.php around the center box graphic, and testing the clickable links in the browser.

Download, extract, manually install and activate the featured content gallery plugin to create an automated slideshow on your WordPress site by adding it to the plugins directory.

Install and configure the featured content gallery, copy the code from the gallery, and insert it into the 2010 theme's index.php to enable a slideshow on the blog front end.

Create slideshow graphics in photoshop by building multiple slides from royalty-free photos, using a placeholder template and clipping groups, then save web-ready JPEGs for WordPress.

Build the slide posts gallery by creating WordPress posts with required custom fields and a main gallery image, ensuring at least two items and publishing them to the slideshow category.

Configure a self-running slideshow using the featured content gallery, selecting the slideshow category and setting width and height, then update options to display slides without blog loop content.

Identify the gallery category id and exclude those posts from the blog loop by inserting a minus category id into index.php.