ThemeShaper Forums » Thematic

Thematic Development, some comments on my first...

(6 posts)
  • Started 10 years ago by Tomcat23
  • Latest reply from Tomcat23
  • This topic is resolved
  1. Ian, Chris and all,

    Fairly finished with my 1st Thematic theme, and I'm fairly certain I'll be using it on a number of sites in the future. I'm posting here a few things which I searched long for on a variety of sites. Hopefully this will help other who come across them. I'm fairly advanced when it comes to coding in php and I've built a few wordpress themes in the past. I'll be doing about 20 client sites before the end of the year is over, and I'm pretty sure I'll be using thematic for most of them.

    So, first, any syntax bug in your functions.php code is going to cause you a white screen and you may not be able to even get into wp-admin. If this happens, add

    <?php error_reporting(E_ALL); ini_set('display_errors', 'on'); ?>

    to the top and you'll get the errors displayed. Simple, handy, essential.

    Next, my last project was to develop a new wordpress theme (which I decided to use thematic for) for an existing wordpress blog. So, making sure to have thematic installed in the themes directory, and your new child theme in it's own directory too, I was able to use this VERY handy plugin

    to do so. 1st, install the plugin and activate it. Now you don't have to use the php code at all, simply go back to the blog and enter add "?wptheme=name of theme from your childtheme's style.css" to the end of your wp site's URL. Like this -- of child theme

    and the plugin will set a cookie for that session (close your browser to reset) that will let you view your new child theme while you develop it.

    To see the widgetized areas for thematic, set the existing template as a child theme by adding "Template: thematic" to it's style.css and now you can see thematic's widget areas while you develop your own theme, which only you are seeing. (The existing theme wasn't using any widgets, so I got away with this pretty well.)

    Next up. I'd suggest copying the thematic styles directory into your child theme and changing styles.css in your child theme to point to there. Really helps when you need to change something.

    Oh, and while you can scour the web for the answers, I'd suggest just looking at themes\thematic\library\extensions for a list of all the thematic hooks. Look for the 'doaction' lines and see the comments as to what each do. I almost pulled my hair out relying on

    From there, when you are editing functions.php, you can follow the advice on the forums here and on the wiki about hooks and filters. Remember that for some of the code examples you'll be dropping in and out of php with <? and ?>, and an error will cause the whole site to go down. I found it easier to add my hooks in includes like this -

    function calltoaction() {
     include(STYLESHEETPATH . '/calltoaction.php' );
    add_action('thematic_navigation_below', 'calltoaction', 1);

    rather than spend time figuring out where I'd gotten the syntax wrong. Oh, and STYLESHEETPATH is the constant for PHP to include, but if you have to output the same path in html, it looks like this --

    function my_scripts() { ?>
    		<link rel="stylesheet" href="<? bloginfo('stylesheet_directory'); ?>/css/" type="text/css" media="screen" charset="utf-8" />
    		<script src="<? bloginfo('stylesheet_directory'); ?>/scripts/mootools.v1.11.js" type="text/javascript"></script>
    		<script src="<? bloginfo('stylesheet_directory'); ?>/scripts/" type="text/javascript"></script>
    <?php }
    add_action('wp_head', 'my_scripts', 20);

    Hope this post helps clear things up!

    Posted 10 years ago #
  2. What? Why can't you just view your child site in one browser (with firebug) and edit child theme functions and css in another browser tab? In my understanding you don't need to edit anything in thematic itself, and in fact should not to effectively use the framework idea.

    AND furthermore, to keep the childtheme simple and accessible to clients, the only styles I have in there are the ones that I'm over-riding or providing uniquely for that child theme. All other styles, including typography, reset, images are in Thematic. In my mind, this helps keep the theme "safe" from curious clients. :)

    Posted 10 years ago #
  3. amygail

    Thanks Tomcat.

    Cathy - as the saying goes, there are many ways to skin a cat. -
    In this case, Tomcat is sharing his method. - I think the themeswitcher trick may a good one for testing/debugging your theme on a live site. (the Firebug method is a good one - but you still need to test your site in other browsers.)

    For that matter, not everyone has access to firebug.

    Unless I'm missing, he's not suggesting editing the Thematic files - he's talking about child themes

    Posted 10 years ago #
  4. Yes, I'm totally talking about child themes. I found I preffered moving the styles directory over to my child theme to edit them there, rather than just add overriding css to styles.css. Yeah, it's messy, but I was feeling a little control-freaky about what gets rendered.

    Firebug is essential. Oh, the kids these days, they have it so easy. Take a look at the extensions for firebug. THere's one what handles cookies, one that handles 'net requests (so you can debug in the ajax context...) One for coloring your source code for when you view source on a page. (that's fireCookie, firePHP, fireRainbow...) All free. Even one called PixelPerfect that lets you overlay a comp over the rendered page so you can see how it looks.

    Oh, here something I'll note because it came up yesterday and I'd solved it a few months ago. On this client's wordpress site, I had gotten my thematic child theme up and running, but then when I got into the archives with a few thousand posts, I found green, serifed fonts and plenty of ugly. The posts themselves contained lots of FONT tags!

    So I, ahem, Shot the serif, but I swear it was in self defense. With this handy css style:

    	color: inherit !important;
    	margin: inherit !important;
    	padding: inherit !important;
    	font: inherit !important;
    	text-decoration: inherit !important;
    	border: inherit !important;
    	background: inherit !important;
    	bottom: inherit !important;
    	top: inherit !important;
    	left: inherit !important;
    	right: inherit !important;
    	position: inherit !important;
    	clear: inherit !important;
    	float: inherit !important;
    	height: inherit !important;
    	width: inherit !important;
    	letter-spacing: inherit !important;
    	text-transform: inherit !important;
    	outline: inherit !important;
    	overflow: inherit !important;
    	display: inherit !important;
    	visibility: inherit !important;
    	text-indent: inherit !important;
    	white-space: inherit !important;
    	word-spacing: inherit !important;
    	z-index: inherit !important;
    	text-align: inherit !important;
    	max-height: inherit !important;
    	max-width: inherit !important;
    	min-height: inherit !important;
    	min-width: inherit !important;
    	cursor: inherit !important;

    Might be a candidate for reset.css, no?

    Posted 10 years ago #
  5. amygail

    ohhh. Tomcat - I have a particular client (actually an employee of a client) who keeps "ruining" pages by adding her own colors and font styles via the WP editor. - Would this neutralize these shenanigans?
    I'm going to have to try this -thanks.

    Posted 10 years ago #
  6. Yeah, I think it does. I found it a few months ago somewhere and it essentially makes the font tags disappear. It's big and ugly, and you can trim off some of those declarations, but in a pinch it's the best way to go. Beats hand-editing the html for countless posts in the WP editor!

    Posted 10 years ago #

RSS feed for this topic


You must log in to post.