Custom CSS and Custom Actions

If you are familiar with PHP, you might have already taken a look under the hood of PressWork to see how things work. Hopefully it doesn’t all look like gibberish and you can pretty much understand how we decide to code it. We tried our best to comment every function so that you can easily figure out what does what. We also added two button to the toolbox so that you can display functions and hooks to see what is powering each element on a page.

Custom Actions

PressWork has been built so that all the customization happens through a file called actions.php. This file is located in the /admin folder of the PressWork theme directory. Take a look around to see how things works. If you feel like you want to start modifying a few things, whatever you do, DO NOT MODIFY THE CORE THEME FILES.

There are two ways that you can easily modify the theme without messing with the core. I had previously discussed creating a child theme so you can read about that HERE.

The other way is to create a file called custom-actions.php and upload it to your site’s /uploads directory. PressWork will automatically look for that file and load it in the appropriate place.

With that file created, you can start to use some of PressWork’s action hooks to customize things.

Custom Actions Examples

NOTE: Since this is a PHP file, you need to make sure that you open the file with a PHP tag:

<?php
//start your custom actions after this line

Removing the featured post section at the top of the index page:

remove_action('pw_index_sticky_post_middle', 'pw_posts_featured');
remove_action('pw_index_featured_post_middle', 'pw_posts_featured');

Removing the author box from single post pages:

remove_action('pw_single_bottom', 'pw_authorbox');

Customizing the 404 page:

remove_action('pw_404_middle', 'pw_404');
 
function custom_404() {
	echo pw_function_handle(__FUNCTION__); // displays the function name when functions are turned on
	?>
	<div id="post-0" class="post error404 not-found">
    	<header>
    	   	<h1 class="posttitle">My Custom 404 Page</h1>
        </header>
        <div class="entry">
            <p>You've hit my custom 404 page. There is nothing here so head back to the <a href="<?php echo home_url("/"); ?>">home page</a>.</p>
        </div>
    </div>
	<?php
}
add_action('pw_404_middle', 'custom_404');

Custom CSS

PressWork has many theme options that allow you to customize how your site is styled. There is no need for CSS when you can choose colors and fonts using the toolbox. But what if you wanted to really delve into some custom CSS. Once again, you can look into creating a child theme, or you can create a file called custom.css and upload it to your site’s /uploads directory.

PressWork will automatically enqueue your custom.css stylesheet and add it to the head tag. If you are familiar with CSS you can now start to customize your site’s styles without having to worry that they might get overwritten when the next update of PressWork is released.

If you are new to CSS, there are some great tutorials available online. Here are some resources:

http://www.w3schools.com/css/
http://www.csstutorial.net/

I also suggest installing a tool for Firefox called Firebug (http://getfirebug.com/). This is a must have tool for everyone involved in any level of web development.