• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Customize WordPress Inline Code

By Abhishek Ghosh November 13, 2015 10:44 pm Updated on November 13, 2015

Customize WordPress Inline Code

Advertisement

Most of Technology Blogs use some Syntax Highlighter. In This Article the Methods to Customize WordPress Inline Code Shown With Needed the Snippets. We use Crayon WordPress Syntax Highlighter. That plugin actually supports inline code capturing with the fancy name of the feature – Inline Tags. There are options to Wrap Inline Tags, Capture code, Capture backquotes / backticks etceteras. Obviously we want something more manual to give power to the users. There Are Many Ways to Customize WordPress Inline Code to Look Them Pretty Nice Like Twitter Bootstrap.

Customize WordPress Inline Code
Table of Contents

  1. Introduction
  2. Backticks to Code and WordPress Add Inline Style Function
  3. CSS to Customize WordPress Inline Code
  4. Only Inline Code Like Effect With CSS
  5. Customizing WordPress Inline Code Does Not Mean Only Using Inline CSS
  6. Further Possibilities
  7. Go to the End

 

Customize WordPress Inline Code : Recall Old Guide to Convert Backticks to Code

 

In our older guide we to convert backticks to code with simple PHP snippet. Secondly, we have easy to use user customizable WordPress Plugin which was originally for managing all the stuffs we ever need to add to Theme or Child Theme’s function.php file.

Advertisement

---

Actually WordPress has a special function reference, it s called wp_add_inline_style :

Vim
1
https://codex.wordpress.org/Function_Reference/wp_add_inline_style

So, that way is not very difficult :

Vim
1
2
3
4
5
6
7
8
9
10
11
12
13
function my_styles_method() {
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/custom_script.css'
);
        $color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
        $custom_css = "
                .mycolor{
                        background: {$color};
                }";
        wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );

As you can see, when we wrote wp_add_inline_style, the formatting is basic. Everything on this Earth can be modified with inline CSS and a custom class, even logically used with plugins – like we did for adding drop cap to this post.

Not to forget, old HTML had support for Teletype text with tt, but HTML5 does not support HTML tt but we need to use code block. In short :

Backticks will become automatically code – that is your matter how which method you will use.
Inline Code Block will have funky colors on need – we are talking this.

 

Customize WordPress Inline Code : Directly Use Custom Inline CSS or Modify Theme’s CSS

 

This is Twitter Bootstrap style incline code’s CSS :

Vim
1
2
3
4
5
6
7
8
code {
background-color: #F9F2F4;
border-radius: 4px;
color: #C7254E;
font-size: 90%;
padding: 2px 4px;
font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace;
}

If you add/modify via your Theme’s / Child Theme’s CSS – that will do global change. That is great if you finalize the design for all the code blocks. If we want to override the loaded CSS, we need to add a class (like inline) and add !important :

Vim
1
2
3
4
5
6
7
8
code.inline {
background-color: #F9F2F4 !important;
border-radius: 4px !important;
color: #C7254E !important;
font-size: 90% !important;
padding: 2px 4px !important;
font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;
}

anyone can easily embed it on post wrapping with style :

Vim
1
2
3
4
5
6
7
8
9
10
<style>
code.inline {
background-color: #F9F2F4 !important;
border-radius: 4px !important;
color: #C7254E !important;
font-size: 90% !important;
padding: 2px 4px !important;
font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;
}
</style>

Return to Top

 

Customize WordPress Inline Code : Inline Code Like Effect With CSS

 

Actually, that style distracts; it is good for some posts; like this article. Now, we can call the code.inline wrapping with HTML code blocks and adding the class. It is not a coding competition, so we can add simple span style ! This is what we used for that text span style :

Vim
1
<span style="background-color: #F9F2F4 !important; border-radius: 4px !important; color: #C7254E !important; font-size: 90% !important; padding: 2px 4px !important; font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;">span style</span>

Pseudo method – as using the inline CSS ONLY not really doing the real work of wrapping with code.

Ultimately, the front-end will add inline CSS if we use Syntax Highlighter! This way is preserving this webpage as document with the inline style – it does not matter if we change the theme. In fact we have such 5 years old posts with incline CSS demo! In the year 2010-11, that was “new style”, in the year 2020 (may be you are reading this guide after 2020), our this span style will become old style. Like fashion designing. This way is more great, because we can customize a particular character like @ with a different color. Like @AbhishekCTRL. We needed to adjust the padding: 2px 4px :

Vim
1
2
3
4
5
6
<span style="background-color: #F9F2F4 !important; border-radius: 4px !important; color: #990033 !important; font-size: 90% !important; padding-top: 2px !important; padding-bottom: 2px !important; padding-left: 4px !important; font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;">
@
</span>
<span style="background-color: #F9F2F4 !important; border-radius: 4px !important; color: #C7254E !important; font-size: 90% !important; padding-top: 2px !important; padding-bottom: 2px !important; padding-right: 4px !important; font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;">
AbhishekCTRL
</span>

Those who are new around CSS, padding: 2px 4px means :

Vim
1
2
3
4
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;

 

Does Customize WordPress Inline Code Means Using Inline CSS?

 

Never! We can wrap HTML, PHP and whatever stuffs if we use

(or backticks get converted to

).

is not mere a word div, but needs to indicate the web server software not to process it at all. That

is not balanced with

– it would break the whole web page’s design! We can not include that word code itself with opening and closing with normal keyboard character. To avoid such conflict, we use Github Gist or some externally hosted service. They are few and smallest limitation of any PHP like software driven content management system. TinyMCE of WordPress lacks a mode – we can not indicate that when text/HTML should not be processed in Text mode. We have to use web safe characters for ASCII chars :

Vim
1
2
&lt; for <
&gt; for >

TinyMCE plus a syntax highlighter perform that complicated work. That is why if you switch between Text and Visual mode, the formatting usually get lost. Not impossible – <code> but impractical. It is rediscovering the need of WYSIWYG html editor.

Another point is that – wrapping with code or pre will force to look the wrapped text different from the rest of the text even if CSS is not loaded.

Return to Top

 

What’s New We Read From Your Customize WordPress Inline Code Post? Known Things!

 

It is possible to use inline css in this way, we have to add a custom button on TinyMCE which will easily wrap with the CSS :

Vim
1
2
3
<span style="background-color: #F9F2F4 !important; border-radius: 4px !important; color: #C7254E !important; font-size: 90% !important; padding-top: 2px !important; padding-bottom: 2px !important; padding-right: 4px !important; font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;">
AbhishekCTRL
</span>

That type of kind of code is actually for drawing the attention, like for example – run apt update && apt upgrade. There is no actual difference if we use real code to separate apt update && apt upgrade from the normal text of a sentence. This usage is not to escape the issue with non web safe characters. We could use italics or bold. But, sadly looks too much ordinary, mean something different and Google may think it as spam. Our typography is a bit different than that of Twitter Bootstrap, we need to increase the font-size: 110% !important; and change the font-family.

This is closer to perfect from typographical point of view, for our current design (at time of publication of this article). We used this :

Vim
1
2
3
<span style="background-color: #F7F7F9 !important; border: 1px solid #E1E1E8 !important; color: #C7254E !important; padding: 2px 4px !important; white-space: nowrap !important; border-radius: 3px !important; font-size: 1em !important;font-family: monospace, serif !important;">
This is closer
</span>

We can create a Button on WordPress Text Editor – simple highlighting the text and clicking the button will add the style or we can create a custom shortcode to manually wrap the text. We should end the article here!

Return to Top

This Article Has Been Shared 266 Times!

Facebook Twitter Pinterest
Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Orthopaedic Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Customize WordPress Inline Code

  • Scalable MySQL Database for WordPress with Rackspace Cloud

    Scalable MySQL Database for WordPress is very easy to create as Rackspace allows Cloud Database,so does Amazon. Here is a guide for high performance WordPress.

  • Genesis 2.0, YARP and Schema.org : Guide

    Genesis 2.0 is HTML5 based and YARP is one of the best related post plugin. Here is how to use Schema.org markup to tell search engines about the related links.

  • Remove 3rd Party URLs Added By WordPress Plugins

    Remove 3rd Party URLs Added By WordPress Plugins by a Bit Manual Searching on the Source Codes of the Plugins for Better on Page SEO. Here is Some Examples.

  • Add Itemprop image Schema in WordPress Posts

    Add Itemprop image Schema in WordPress Posts regardless of your type of Theme or Theme Framework – its do-it-yourself guide without keeping hit or miss chance.

  • WordPress W3TC Plugin Disable : For WP Update

    Disable W3TC Plugin for Nginx PHP5-FPM with Database Caching ON. WordPress W3TC Plugin Disable For WordPress Update When Stuck or Hanged.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

You can subscribe to our Free Once a Day, Regular Newsletter by clicking the subscribe button below.

Click To Subscribe

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (20K Followers)
  • Twitter (4.9k Followers)
  • Facebook (5.8k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.2k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • What is Domain-Driven Design (DDD)? January 23, 2021
  • Top 10 Anti Hacking Software for Microsoft Windows January 22, 2021
  • What is Software Modernization? January 21, 2021
  • Cloud Computing : Cybersecurity Tips for Small Business Owners January 20, 2021
  • Arduino : Independently Blink Multiple LED January 18, 2021

 

About This Article

Cite this article as: Abhishek Ghosh, "Customize WordPress Inline Code," in The Customize Windows, November 13, 2015, January 23, 2021, https://thecustomizewindows.com/2015/11/customize-wordpress-inline-code/.

Source:The Customize Windows, JiMA.in

 

This website uses cookies. If you do not want to allow us to use cookies and/or non-personalized Ads, kindly clear browser cookies after closing this webpage.

Read Cookie Policy.

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2021 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy